/* ============================================================
 * 单词竞技场 - 全局动画特效系统
 * 入场动画 · 滚动揭示 · 悬停特效 · 环境氛围 · 交互反馈
 * ============================================================ */

/* === 缓动变量 === */
:root{
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
  --ease-out-quint:cubic-bezier(0.22,1,0.36,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out-circ:cubic-bezier(0.85,0,0.15,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

/* ============================================================
   一、入场动画系统
   ============================================================ */

/* 基础入场: 淡入上移 */
.fx-enter{opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--ease-out-quart),transform 0.6s var(--ease-out-quart)}
.fx-enter.fx-in{opacity:1;transform:translateY(0)}

/* 淡入缩放 */
.fx-enter-scale{opacity:0;transform:scale(0.92);transition:opacity 0.5s var(--ease-out-quart),transform 0.5s var(--ease-out-quart)}
.fx-enter-scale.fx-in{opacity:1;transform:scale(1)}

/* 淡入左滑 */
.fx-enter-left{opacity:0;transform:translateX(-30px);transition:opacity 0.6s var(--ease-out-quart),transform 0.6s var(--ease-out-quart)}
.fx-enter-left.fx-in{opacity:1;transform:translateX(0)}

/* 淡入右滑 */
.fx-enter-right{opacity:0;transform:translateX(30px);transition:opacity 0.6s var(--ease-out-quart),transform 0.6s var(--ease-out-quart)}
.fx-enter-right.fx-in{opacity:1;transform:translateX(0)}

/* 3D翻转入场 */
.fx-enter-flip{opacity:0;transform:perspective(800px) rotateY(-15deg) translateY(20px);transition:opacity 0.6s var(--ease-out-quart),transform 0.6s var(--ease-out-quart)}
.fx-enter-flip.fx-in{opacity:1;transform:perspective(800px) rotateY(0) translateY(0)}

/* 交错入场延迟 */
.fx-delay-1{transition-delay:0.08s}
.fx-delay-2{transition-delay:0.16s}
.fx-delay-3{transition-delay:0.24s}
.fx-delay-4{transition-delay:0.32s}
.fx-delay-5{transition-delay:0.40s}
.fx-delay-6{transition-delay:0.48s}
.fx-delay-7{transition-delay:0.56s}
.fx-delay-8{transition-delay:0.64s}

/* ============================================================
   二、滚动揭示动画
   ============================================================ */
.fx-reveal{opacity:0;transform:translateY(40px);transition:opacity 0.7s var(--ease-out-quart),transform 0.7s var(--ease-out-quart)}
.fx-reveal.fx-visible{opacity:1;transform:translateY(0)}

.fx-reveal-scale{opacity:0;transform:scale(0.9);transition:opacity 0.6s var(--ease-out-quart),transform 0.6s var(--ease-out-quart)}
.fx-reveal-scale.fx-visible{opacity:1;transform:scale(1)}

.fx-reveal-left{opacity:0;transform:translateX(-50px);transition:opacity 0.7s var(--ease-out-quart),transform 0.7s var(--ease-out-quart)}
.fx-reveal-left.fx-visible{opacity:1;transform:translateX(0)}

.fx-reveal-right{opacity:0;transform:translateX(50px);transition:opacity 0.7s var(--ease-out-quart),transform 0.7s var(--ease-out-quart)}
.fx-reveal-right.fx-visible{opacity:1;transform:translateX(0)}

/* ============================================================
   三、悬停特效
   ============================================================ */

/* 3D倾斜卡片 */
.fx-tilt{transition:transform 0.3s var(--ease-out-quart);transform-style:preserve-3d;will-change:transform}
.fx-tilt:hover{transform:perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px)}

/* 光泽扫过 */
.fx-sheen{position:relative;overflow:hidden}
.fx-sheen::after{content:'';position:absolute;top:0;left:-150%;width:80%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.08),transparent);transition:left 0.6s var(--ease-out-quart);pointer-events:none;z-index:1}
.fx-sheen:hover::after{left:150%}

/* 发光脉冲悬停 */
.fx-glow-hover{transition:all 0.3s var(--ease-out-quart)}
.fx-glow-hover:hover{box-shadow:0 0 20px rgba(108,92,231,0.4),0 0 40px rgba(0,206,201,0.15);transform:translateY(-2px)}

/* 边框流光 */
.fx-border-glow{position:relative;transition:all 0.3s var(--ease-out-quart)}
.fx-border-glow::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(108,92,231,0.5),rgba(0,206,201,0.5),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 0.3s}
.fx-border-glow:hover::before{opacity:1}

/* 按钮涟漪 */
.fx-ripple{position:relative;overflow:hidden}
.fx-ripple .ripple-wave{position:absolute;border-radius:50%;background:rgba(255,255,255,0.3);transform:scale(0);animation:rippleExpand 0.6s var(--ease-out-quart);pointer-events:none}
@keyframes rippleExpand{to{transform:scale(4);opacity:0}}

/* ============================================================
   四、环境氛围动画
   ============================================================ */

/* 浮动光球背景 */
.fx-orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.12;animation:orbFloat 20s var(--ease-in-out-circ) infinite}
.fx-orb:nth-child(1){width:400px;height:400px;background:#6c5ce7;top:-100px;left:-100px;animation-delay:0s}
.fx-orb:nth-child(2){width:350px;height:350px;background:#00cec9;bottom:-80px;right:-80px;animation-delay:-5s}
.fx-orb:nth-child(3){width:300px;height:300px;background:#fdcb6e;top:40%;left:50%;animation-delay:-10s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(60px,-40px) scale(1.1)}
  50%{transform:translate(-30px,50px) scale(0.95)}
  75%{transform:translate(40px,30px) scale(1.05)}
}

/* 渐变流动背景 */
.fx-gradient-flow{background-size:200% 200%;animation:gradientFlow 15s var(--ease-in-out-circ) infinite}
@keyframes gradientFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* 星空粒子 */
.fx-stars{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:0;animation:starTwinkle 3s var(--ease-in-out-circ) infinite}
@keyframes starTwinkle{
  0%,100%{opacity:0;transform:scale(0.5)}
  50%{opacity:0.6;transform:scale(1)}
}

/* 网格背景脉冲 */
.fx-grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:
  linear-gradient(rgba(108,92,231,0.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(108,92,231,0.03) 1px,transparent 1px);
  background-size:50px 50px;animation:gridPulse 8s var(--ease-in-out-circ) infinite}
@keyframes gridPulse{
  0%,100%{opacity:0.4}
  50%{opacity:0.8}
}

/* ============================================================
   五、特殊视觉效果
   ============================================================ */

/* 闪烁高光 */
.fx-shimmer-text{
  background:linear-gradient(90deg,#a29bfe 0%,#00cec9 25%,#fdcb6e 50%,#00cec9 75%,#a29bfe 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmerText 4s linear infinite}
@keyframes shimmerText{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* 霓虹文字 */
.fx-neon{color:#00cec9;text-shadow:0 0 5px rgba(0,206,201,0.5),0 0 10px rgba(0,206,201,0.3),0 0 20px rgba(0,206,201,0.2)}
.fx-neon-purple{color:#a29bfe;text-shadow:0 0 5px rgba(162,155,254,0.5),0 0 10px rgba(162,155,254,0.3),0 0 20px rgba(162,155,254,0.2)}
.fx-neon-gold{color:#fdcb6e;text-shadow:0 0 5px rgba(253,203,110,0.5),0 0 10px rgba(253,203,110,0.3),0 0 20px rgba(253,203,110,0.2)}

/* 卡片光晕 */
.fx-card-glow{position:relative}
.fx-card-glow::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(108,92,231,0.08),transparent 50%,rgba(0,206,201,0.06));opacity:0;transition:opacity 0.4s;pointer-events:none}
.fx-card-glow:hover::before{opacity:1}

/* 呼吸光环 */
.fx-breath{animation:fxBreath 3s var(--ease-in-out-circ) infinite}
@keyframes fxBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,0.3)}
  50%{box-shadow:0 0 0 8px rgba(108,92,231,0)}
}

/* 浮动动画 */
.fx-float{animation:fxFloat 3s var(--ease-in-out-circ) infinite}
@keyframes fxFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* 脉冲缩放 */
.fx-pulse{animation:fxPulse 2s var(--ease-in-out-circ) infinite}
@keyframes fxPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.03);opacity:0.9}
}

/* 静态光环 - 替代旋转动画 */
.fx-glow-ring{position:relative}
.fx-glow-ring::after{content:'';position:absolute;inset:-3px;border-radius:inherit;background:linear-gradient(135deg,rgba(108,92,231,0.3),rgba(0,206,201,0.3),rgba(253,203,110,0.15));z-index:-1;filter:blur(4px);opacity:0.6;transition:opacity 0.3s}
.fx-glow-ring:hover::after{opacity:1}

/* ============================================================
   六、标签/内容切换动画
   ============================================================ */
.fx-tab-content{animation:tabFadeIn 0.4s var(--ease-out-quart)}
@keyframes tabFadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   七、模态框入场
   ============================================================ */
.fx-modal-enter{animation:modalEnter 0.35s var(--ease-out-quart)}
@keyframes modalEnter{
  from{opacity:0;transform:scale(0.9) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

.fx-overlay-enter{animation:overlayFade 0.3s ease-out}
@keyframes overlayFade{
  from{opacity:0}
  to{opacity:1}
}

/* ============================================================
   八、数字滚动
   ============================================================ */
.fx-count{display:inline-block;transition:transform 0.3s var(--ease-out-quart)}

/* ============================================================
   九、列表交错入场(自动)
   ============================================================ */
.fx-stagger > *{opacity:0;transform:translateY(20px)}
.fx-stagger.fx-active > *{animation:staggerIn 0.5s var(--ease-out-quart) forwards}
.fx-stagger.fx-active > *:nth-child(1){animation-delay:0.05s}
.fx-stagger.fx-active > *:nth-child(2){animation-delay:0.10s}
.fx-stagger.fx-active > *:nth-child(3){animation-delay:0.15s}
.fx-stagger.fx-active > *:nth-child(4){animation-delay:0.20s}
.fx-stagger.fx-active > *:nth-child(5){animation-delay:0.25s}
.fx-stagger.fx-active > *:nth-child(6){animation-delay:0.30s}
.fx-stagger.fx-active > *:nth-child(7){animation-delay:0.35s}
.fx-stagger.fx-active > *:nth-child(8){animation-delay:0.40s}
.fx-stagger.fx-active > *:nth-child(9){animation-delay:0.45s}
.fx-stagger.fx-active > *:nth-child(10){animation-delay:0.50s}
.fx-stagger.fx-active > *:nth-child(n+11){animation-delay:0.55s}
@keyframes staggerIn{
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   十、页面过渡
   ============================================================ */
.fx-page-enter{animation:pageEnter 0.5s var(--ease-out-quart)}
@keyframes pageEnter{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   十一、加载骨架屏
   ============================================================ */
.fx-skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite}
@keyframes skeletonShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ============================================================
   十二、PC端增强
   ============================================================ */
@media(min-width:769px){
  /* PC端卡片3D悬停增强 */
  .fx-pc-hover-lift{transition:all 0.35s var(--ease-out-quart)}
  .fx-pc-hover-lift:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgba(108,92,231,0.2),0 4px 16px rgba(0,0,0,0.3)}

  /* PC端光标跟随光晕 */
  .fx-cursor-glow{position:relative;overflow:hidden}
  .fx-cursor-glow::before{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(108,92,231,0.1),transparent 70%);pointer-events:none;opacity:0;transition:opacity 0.3s;z-index:0;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%)}
  .fx-cursor-glow:hover::before{opacity:1}
}

/* ============================================================
   十三、移动端增强
   ============================================================ */
@media(max-width:768px){
  /* 移动端触摸反馈 */
  .fx-touch-feedback{transition:transform 0.15s var(--ease-out-quart)}
  .fx-touch-feedback:active{transform:scale(0.96)}
}

/* ============================================================
   十四、无障碍 - 降级动画
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  .fx-enter,.fx-enter-scale,.fx-enter-left,.fx-enter-right,.fx-enter-flip,
  .fx-reveal,.fx-reveal-scale,.fx-reveal-left,.fx-reveal-right,
  .fx-stagger > *{
    opacity:1!important;transform:none!important;
  }
}