.flavor-section{
width:100%;
background:#0D1B2A;
padding:70px 30px;
overflow:hidden;
box-sizing:border-box;
}

.flavor-container{
max-width:1200px;
margin:auto;
}


.flavor-title{
color:#ffffff;
font-size:36px;
font-weight:800;
letter-spacing:1.5px;
text-align:center;
margin-bottom:8px;
}


.flavor-subtitle{
color:rgba(255,255,255,.75);
font-size:15px;
text-align:center;
margin-bottom:40px;
}


.flavor-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}


.flavor-link{
text-decoration:none;
display:block;
}


/* 卡片 */

.flavor-card{

height:200px;

position:relative;

overflow:hidden;

border-radius:20px;


background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);


border:1px solid rgba(255,255,255,.12);


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;


transition:.5s;

}


/* 水波 */

.flavor-card::before{

content:"";

position:absolute;

width:180%;

height:180%;

left:-40%;

top:-40%;


background:

radial-gradient(
circle,
rgba(90,210,255,.35),
transparent 60%
);


filter:blur(25px);

}



/* 橙色光点 */

.flavor-card::after{

content:"";

position:absolute;

width:70px;

height:70px;

right:-30px;

top:-30px;


background:

radial-gradient(
circle,
rgba(255,106,0,.55),
transparent 65%
);


opacity:0;

transition:.5s;

}



/* 图标 */

.flavor-icon{

width:52px;

height:52px;

margin-bottom:12px;

position:relative;

z-index:2;

transition:.4s;


filter:
drop-shadow(
0 0 10px rgba(90,210,255,.45)
);

}


.flavor-icon svg{

width:100%;

height:100%;


stroke:#ffffff;

fill:none;

stroke-width:1.5;

stroke-linecap:round;

stroke-linejoin:round;

}




/* 标题 */

.flavor-name{

position:relative;

z-index:2;


height:28px;


color:#ffffff;


font-size:19px;


font-weight:800;


letter-spacing:.8px;


text-align:center;


margin-bottom:10px;


transition:.4s;

}



/* 描述 */

.flavor-desc{

position:relative;

z-index:2;


height:42px;


color:rgba(255,255,255,.75);


font-size:13px;


line-height:20px;


text-align:center;

}



/* PC Hover */

.flavor-card:hover{

transform:translateY(-8px);

border-color:rgba(100,220,255,.8);

box-shadow:
0 15px 40px rgba(0,200,255,.25);

}


.flavor-card:hover::before{

background:

radial-gradient(
circle,
rgba(90,210,255,.55),
transparent 60%
);

}



.flavor-card:hover::after{

opacity:1;

animation:
orangeMove 3s infinite;

}



.flavor-card:hover .flavor-icon{

transform:translateY(-6px);

}



.flavor-card:hover .flavor-name{

transform:translateY(-4px);

}



@keyframes orangeMove{

0%{
transform:translate(0);
}

50%{
transform:translate(-15px,15px);
}

100%{
transform:translate(0);
}

}




/* ==================
移动端
完全静止
================== */


@media(max-width:768px){


.flavor-section{

padding:50px 14px;

}



.flavor-title{

font-size:24px;

}



.flavor-subtitle{

font-size:13px;

margin-bottom:30px;

}



.flavor-grid{

grid-template-columns:repeat(2,minmax(0,1fr));

gap:12px;

}



.flavor-card{

height:125px;

border-radius:14px;

transform:none!important;

animation:none!important;

}



.flavor-card::before{

top:-40%;

opacity:.25;

animation:none!important;

transform:none!important;

}



.flavor-card::after{

opacity:.2;

width:35px;

height:35px;

}



.flavor-icon{

width:34px;

height:34px;

margin-bottom:8px;

}



.flavor-name{

height:20px;

font-size:13px;

margin-bottom:5px;

}



.flavor-desc{

height:32px;

font-size:10px;

line-height:15px;

padding:0 4px;

}

}