/* ============================================================
 * fx.css — 全站赛事动效增强（mb261-300 共用）
 * 作用域：html.fx-on；仅 transform/opacity/box-shadow，尊重降级
 * 变体：html[data-fxv="0..5"] 六组配色，方向由 JS 的 data-m 决定
 * ============================================================ */
html.fx-on{
  --fxa:139 92 246; --fxb:34 211 238;
  --fx-ease:cubic-bezier(.22,.61,.36,1);
}
html.fx-on[data-fxv="0"]{--fxa:139 92 246;--fxb:34 211 238}   /* 紫 × 青 */
html.fx-on[data-fxv="1"]{--fxa:217 70 239;--fxb:251 146 60}   /* 品红 × 橙 */
html.fx-on[data-fxv="2"]{--fxa:16 185 129;--fxb:56 189 248}   /* 翠绿 × 天蓝 */
html.fx-on[data-fxv="3"]{--fxa:245 158 11;--fxb:244 63 94}    /* 琥珀 × 玫红 */
html.fx-on[data-fxv="4"]{--fxa:99 102 241;--fxb:168 85 247}   /* 靛蓝 × 紫 */
html.fx-on[data-fxv="5"]{--fxa:6 182 212;--fxb:236 72 153}    /* 青 × 粉 */

/* ---------- 1. 模块入场（4 种方向交替 + 级联延迟） ---------- */
@media (prefers-reduced-motion:no-preference){
  html.fx-on .fx-mod{
    opacity:0;
    transition:opacity .3s var(--fx-ease),transform .3s var(--fx-ease);
    transition-delay:calc(var(--i,0) * 10ms);
    will-change:opacity,transform;
  }
  html.fx-on .fx-mod[data-m="up"]{transform:translateY(30px)}
  html.fx-on .fx-mod[data-m="left"]{transform:translateX(-38px)}
  html.fx-on .fx-mod[data-m="right"]{transform:translateX(38px)}
  html.fx-on .fx-mod[data-m="zoom"]{transform:scale(.955)}
  html.fx-on .fx-mod.fx-in{opacity:1;transform:none}
}

/* ---------- 2. 焦点模块：圆锥流光边框 ---------- */
@property --fx-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
html.fx-on .fx-hero{position:relative}
html.fx-on .fx-ring{
  position:absolute;inset:0;border-radius:inherit;padding:2px;
  pointer-events:none;z-index:4;overflow:hidden;
  background:conic-gradient(from var(--fx-ang,0deg),
    rgb(var(--fxa)),rgb(var(--fxb)),#fff 50%,rgb(var(--fxa)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.85;
  filter:drop-shadow(0 0 5px rgb(var(--fxa)/.55));
  animation-name:fx-ang,fx-breathe;
  animation-duration:6s,2.8s;
  animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite;
  animation-direction:normal,alternate;
}
@keyframes fx-ang{to{--fx-ang:360deg}}
@keyframes fx-breathe{from{opacity:.55}to{opacity:1}}

/* ---------- 3. 焦点模块：漂移极光 ---------- */
html.fx-on .fx-orbhost{isolation:isolate}
html.fx-on .fx-orbs{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  z-index:0;pointer-events:none;
}
html.fx-on .fx-orbs i{
  position:absolute;width:56%;aspect-ratio:1;border-radius:50%;
  filter:blur(52px);opacity:.22;
}
html.fx-on .fx-orbs i:nth-child(1){
  left:-10%;top:-34%;
  background:radial-gradient(circle,rgb(var(--fxa)/.95),transparent 70%);
  animation:fx-drift-a 15s ease-in-out infinite alternate;
}
html.fx-on .fx-orbs i:nth-child(2){
  right:-12%;bottom:-42%;
  background:radial-gradient(circle,rgb(var(--fxb)/.95),transparent 70%);
  animation:fx-drift-b 19s ease-in-out infinite alternate;
}
html.fx-on .fx-orbs i:nth-child(3){
  left:42%;top:-46%;width:34%;opacity:.1;
  background:radial-gradient(circle,rgb(var(--fxb)/.8),transparent 70%);
  animation:fx-drift-c 23s ease-in-out infinite alternate;
}
html.fx-on .fx-orbhost > *:not(.fx-orbs):not(.fx-ring){position:relative;z-index:1}
@keyframes fx-drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(64px,42px) scale(1.14)}}
@keyframes fx-drift-b{from{transform:translate(0,0) scale(1.06)}to{transform:translate(-72px,-46px) scale(.92)}}
@keyframes fx-drift-c{from{transform:translate(0,0)}to{transform:translate(-46px,40px) scale(1.18)}}

/* ---------- 4. 直播中按钮：脉冲光环（仅视口内） ---------- */
html.fx-on .fx-live{
  animation:fx-livepulse 2.1s var(--fx-ease) infinite;
  z-index:1;
}
@keyframes fx-livepulse{
  0%,100%{box-shadow:0 0 0 0 rgb(var(--fxa)/.5),0 6px 16px -8px rgb(var(--fxa)/.55)}
  50%{box-shadow:0 0 0 7px rgb(var(--fxa)/0),0 10px 28px -8px rgb(var(--fxb)/.7)}
}
/* 直播中状态标签：药丸芯片 + 呼吸光晕
   （不能用 border-radius:50%+scale 扩散环：套在"中场"等文字上会撑成大椭圆） */
html.fx-on .fx-livedot{
  position:relative;border-radius:999px;
  background:rgb(var(--fxa)/.12);
  box-shadow:inset 0 0 0 1px rgb(var(--fxa)/.28);
  animation:fx-livebreath 2s ease-in-out infinite;
}
html.fx-on .fx-livedot::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:1px solid rgb(var(--fxa)/.45);
  opacity:0;pointer-events:none;
  animation:fx-liveping 2s ease-out infinite;
}
@keyframes fx-livebreath{
  0%,100%{background:rgb(var(--fxa)/.13)}
  50%{background:rgb(var(--fxa)/.05)}
}
@keyframes fx-liveping{
  0%{opacity:.65;transform:scale(1)}
  60%,100%{opacity:0;transform:scale(1.08)}
}

/* ---------- 5. 列表行 / 卡片：悬浮抬升 + 流光边 ---------- */
html.fx-on .fx-row{
  transition:transform .24s var(--fx-ease),box-shadow .24s var(--fx-ease),border-color .24s;
}
html.fx-on .fx-row:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -16px rgb(var(--fxa)/.6);
}
html.fx-on .fx-card{
  transition:transform .28s var(--fx-ease),box-shadow .28s var(--fx-ease);
}
html.fx-on .fx-card:hover{
  transform:translateY(-3px) scale(1.008);
  box-shadow:0 16px 34px -18px rgb(var(--fxb)/.65);
}

/* ---------- 6. 点击涟漪 ---------- */
html.fx-on .fx-ripple-host{position:relative;overflow:hidden}
html.fx-on .fx-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  transform:scale(0);opacity:.38;
  background:radial-gradient(circle,rgb(var(--fxb)/.55) 0%,rgb(var(--fxa)/.25) 55%,transparent 70%);
  animation:fx-ripple .62s ease-out forwards;
  z-index:3;
}
@keyframes fx-ripple{to{transform:scale(2.6);opacity:0}}

/* ---------- 7. 焦点标题渐变流光 ---------- */
@media (prefers-reduced-motion:no-preference){
  html.fx-on .fx-shine{
    background-image:linear-gradient(100deg,
      rgb(var(--fxa)) 0%,rgb(var(--fxb)) 26%,#fff 50%,
      rgb(var(--fxb)) 74%,rgb(var(--fxa)) 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent!important;
    animation:fx-shine 5.5s linear infinite;
  }
}
@keyframes fx-shine{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- 8. 标签胶囊微光扫过 ---------- */
@media (prefers-reduced-motion:no-preference){
  html.fx-on .fx-chip{position:relative;overflow:hidden}
  html.fx-on .fx-chip::after{
    content:"";position:absolute;top:0;bottom:0;width:38%;left:-60%;
    background:linear-gradient(100deg,transparent,rgb(var(--fxb)/.22),transparent);
    animation:fx-chipshine 4.8s ease-in-out infinite;
  }
  html.fx-on .fx-chip:nth-child(3n)::after{animation-delay:1.4s}
  html.fx-on .fx-chip:nth-child(3n+1)::after{animation-delay:2.6s}
}
@keyframes fx-chipshine{0%,62%{left:-60%}100%{left:130%}}

/* ---------- 降级：减少动效时全部静止 ---------- */
@media (prefers-reduced-motion:reduce){
  html.fx-on .fx-mod{opacity:1!important;transform:none!important}
  html.fx-on .fx-ring,html.fx-on .fx-orbs i,html.fx-on .fx-live,
  html.fx-on .fx-shine,html.fx-on .fx-chip::after,html.fx-on .fx-livedot::after{animation:none!important}
}