/* ==========================================================================
   [CSS-5] Keyframes 动画定义 + prefers-reduced-motion 降级
   说明：所有动画只负责"过程"，最终可见状态均由类样式承载，
   因此降级为静态时流程与文案完整可用。
   ========================================================================== */

/* —— 背景光晕漂浮 —— */
@keyframes orb-float-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}

@keyframes orb-float-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7vw, -4vh, 0) scale(1); }
}

@keyframes orb-float-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5vw, -6vh, 0) scale(1.15); }
}

/* —— 欢迎页徽记呼吸发光 —— */
@keyframes emblem-glow {
  0%, 100% { text-shadow: 0 0 14px rgba(212, 175, 55, 0.55), 0 0 34px rgba(212, 175, 55, 0.28); }
  50%      { text-shadow: 0 0 22px rgba(212, 175, 55, 0.9), 0 0 56px rgba(212, 175, 55, 0.5); }
}

/* —— 欢迎页元素依次入场（spring 微过冲上浮） —— */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* —— 卡背入场：干净的上浮归位（配合 --i 逐张 stagger） —— */
@keyframes card-enter {
  0%   { opacity: 0; transform: translateY(44px) scale(0.88); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* —— 3星卡面鎏金流光扫过 ——
   Rev.5 修复"光扫到一半停住"：
   (a) 旧版用 --ease-apple 强缓出曲线——光带前 1/3 时间走完 72% 行程，
       后近 1 秒在卡面爬行，肉眼看即"卡在半路"；
   (b) 旧版 55%~100% 停在 translateX(240%)（带宽 34% × 240% ≈ 卡宽 82%），
       光带残影压在卡面右缘停靠 1.17s。
   Rev.6 修复"离场光带斜尾压卡面右下角"（skew 几何）：
   skewX(-18°) + 带高 140% 卡高（卡高 = 1.4 卡宽 → 半带高 ≈ 0.98 卡宽），
   水平偏差 = tan(18°) × 0.98 ≈ 0.32 卡宽：底缘比中线落后 0.32 卡宽。
   旧终点 340%（= 1.16 卡宽）时底左角仅 0.84 卡宽仍在卡上。
   新几何：起点 -200%（带宽 34% × 200% = 0.68 卡宽 → 顶右角
   -0.68 + 0.34 + 0.32 = -0.02 卡宽，全在卡外）；
   终点 420%（= 1.43 卡宽 → 底左角 1.43 - 0.32 = 1.11 卡宽，全离场）。
   linear 匀速横穿（消除缓出尾部爬行），40→100% 卡外休止形成循环节奏；
   无限循环保持"鎏金流光"活性。 */
@keyframes shine-sweep {
  0% {
    transform: translateX(-200%) skewX(-18deg);
    animation-timing-function: linear;
  }
  40%  { transform: translateX(420%) skewX(-18deg); }
  100% { transform: translateX(420%) skewX(-18deg); }
}

/* —— 5星卡面流动金色渐变光泽（原版 background-position 方案，Rev.5 退回） —— */
@keyframes gold-flow {
  0%   { background-position: 0% 40%; }
  50%  { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}

/* —— 3星多层光晕环扩散（fx-rings） —— */
@keyframes halo-burst {
  0%   { opacity: 0; transform: scale(0.3); }
  12%  { opacity: 0.95; }
  100% { opacity: 0; transform: scale(2.6); }
}

/* —— 5星全屏光柱脉动 —— */
@keyframes beam-pulse {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 1; transform: translateX(-50%) scaleX(1.14); }
}

@keyframes beam-side-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}

/* —— 5星屏幕闪光（白金双层爆闪） —— */
@keyframes flash-pop {
  0%   { opacity: 0; }
  12%  { opacity: 0.95; }
  34%  { opacity: 0.15; }
  48%  { opacity: 0.6; }
  100% { opacity: 0; }
}

/* —— 结算金星点亮弹跳 —— */
@keyframes star-pop {
  0%   { transform: scale(0.72) rotate(-12deg); }
  55%  { transform: scale(1.22) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* —— 主按钮霓光呼吸（金色光晕萦绕） —— */
@keyframes btn-breath {
  0%, 100% { box-shadow: 0 12px 32px rgba(196, 154, 49, 0.38), 0 2px 6px rgba(168, 132, 43, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 22px rgba(240, 212, 124, 0.35); }
  50%      { box-shadow: 0 12px 36px rgba(196, 154, 49, 0.48), 0 2px 6px rgba(168, 132, 43, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 44px rgba(240, 212, 124, 0.7); }
}

/* ==========================================================================
   [Rev.7] 抽卡游戏感升级：召唤过场 / 卡背全息 / 待机浮动 / 电影化
   ========================================================================== */

/* —— 召唤彗星：自右上斜掠至中央（主彗星） —— */
@keyframes comet-fly {
  0%   { opacity: 0; transform: translate(24vw, -22vh) scale(0.6); }
  8%   { opacity: 1; }
  100% { opacity: 1; transform: translate(-38vw, 26vh) scale(1.18); }
}

/* —— 召唤彗星：回声小彗星（错拍跟飞，增加纵深） —— */
@keyframes comet-fly-echo {
  0%   { opacity: 0; transform: translate(20vw, -26vh) scale(0.42); }
  12%  { opacity: 0.85; }
  100% { opacity: 0.85; transform: translate(-30vw, 20vh) scale(0.6); }
}

/* —— 彗星撞击：金色光环爆开 + 消散 —— */
@keyframes summon-burst-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.15); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

/* —— 召唤星夜：星屑闪烁 —— */
@keyframes starfield-twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* —— 卡背全息流光扫过（几何与 shine-sweep 同源：起点 -200% 终点 420% 全离场） —— */
@keyframes back-sheen {
  0% {
    transform: translateX(-200%) skewX(-18deg);
    animation-timing-function: linear;
  }
  34%  { transform: translateX(420%) skewX(-18deg); }
  100% { transform: translateX(420%) skewX(-18deg); }
}

/* —— 卡片待机呼吸浮动（入场落定后，整排错拍轻浮） —— */
@keyframes card-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* —— 5星卡聚光脉动（演出窗口内缓慢缩放注目） —— */
@keyframes card-spotlight {
  0%, 100% { transform: scale(1.05); }
  50%      { transform: scale(1.1); }
}

/* —— 按钮流光扫过 —— */
@keyframes btn-shine {
  0%        { background-position: 130% 0; }
  46%, 100% { background-position: -130% 0; }
}

/* —— 金字标题流光（background-clip:text 的渐变位移） —— */
@keyframes text-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* —— 欢迎页徽记双光环旋转 —— */
@keyframes spin-slow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-slow-rev {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to   { transform: translate(-50%, -50%) rotate(0deg); }
}

/* —— 屏幕震动（5星撞击瞬间） —— */
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  18%      { transform: translate(-6px, 3px); }
  38%      { transform: translate(5px, -4px); }
  58%      { transform: translate(-4px, -2px); }
  78%      { transform: translate(3px, 2px); }
}

/* ==========================================================================
   prefers-reduced-motion 降级：
   动画时长压至近零（保留流程状态切换），轻量 transition 保证可用性；
   所有"终态"均由类样式承载，文案与流程不受任何影响。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }

  /* 光晕层静止（仍保留柔和氛围） */
  .orb,
  .welcome-emblem,
  .btn-primary {
    animation: none !important;
  }

  /* 5星流动卡面定格为静态金色光泽（原版方案，Rev.5 退回） */
  .card-front.rarity-5 {
    animation: none !important;
    background-position: 50% 50%;
  }

  /* 欢迎页元素直接呈现（动画被压短后 forwards 仍生效，双保险） */
  .welcome-inner > * {
    opacity: 1;
  }

  /* 光柱降为静态淡光，闪光不闪 */
  .fx-beam.is-active {
    opacity: 0.5;
  }

  .fx-beam .beam-core,
  .fx-beam .beam-side {
    animation: none !important;
  }

  /* 3星光环压缩后不可见，属预期降级（粒子同步由 JS 侧减量） */
  /* 结算星星终态由 .is-lit 类样式保证可见 */
  .finale-star svg {
    transition-duration: 0.15s !important;
  }
}