/* ============================================================ 竞技场之夜 Arena Night —— 赛事级动效层 motion.css（纯加性） 加载顺序：tokens.css → style.css → motion.css（本文件必须最后）。 驱动：public/js/motion.js（defer；就绪时给 加 .fx-ready）。 纪律（与 style.css 同一约法）： 1. 渐进增强：一切初始隐藏态只挂在 html.fx-ready 之下—— 无 JS / JS 失败时本文件不隐藏、不位移任何内容。 2. fx- 命名空间：.fx-ready / .fx-in / .fx-counting / .fx-counted / [data-stagger] / .stagebar--animate / .podium--animate， 与 main.js 的 .reveal/.is-visible 体系互不接管；同时挂 .reveal 的 fx 元素在 §2 统一中和，避免双重入场。 3. 性能：只动 transform / opacity（流光走 background-position、 辉光走 text/box-shadow，均 paint-only），零布局改动、零 CLS。 4. 动效有因果：入场=进入视口，充能=晋级推进，扫光=悬停/登场； 除聚光灯呼吸（沿用 heroDrift 氛围先例）外无无限循环。 5. 色值只引用 tokens.css 令牌（透明度用 color-mix），不引入新色。 6. scroll-behavior:smooth 已由 style.css 提供（含 reduce 降级）， 此处不重复。 ============================================================ */ /* ===== 0. fx 计时 / 缓动令牌 ===== 微交互 150–300ms；入场 ≤500ms；错峰 30–50ms/项； enter=ease-out，exit=ease-in 且时长 ≈ enter 的 65%；禁 linear （stagebar 充能为推进指示，仍以 ease-out 收尾）。 */ :root { --fx-micro: 200ms; /* 微交互进入 */ --fx-micro-exit: 130ms; /* 微交互退出 ≈ 65% */ --fx-enter: 420ms; /* 元素入场 */ --fx-enter-lg: 500ms; /* 大块入场上限 */ --fx-step: 45ms; /* 错峰步进（30–50ms/项） */ --fx-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --fx-ease-in: cubic-bezier(0.5, 0, 0.75, 0.4); --fx-shine: color-mix(in srgb, var(--text-hi) 60%, var(--gold-300)); --fx-glow-text: 0 0 10px color-mix(in srgb, var(--gold-400) 20%, transparent); --fx-glow-card: 0 14px 36px color-mix(in srgb, var(--arena-950) 60%, transparent), 0 0 24px color-mix(in srgb, var(--gold-400) 16%, transparent), 0 0 64px color-mix(in srgb, var(--gold-400) 7%, transparent); } /* ===== 1. 关键帧（全部 fx 前缀，避免与 style.css 撞名）===== */ @keyframes fxRiseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes fxNodeOn { 0% { opacity: 0.38; transform: scale(1); box-shadow: 0 0 0 color-mix(in srgb, var(--gold-400) 0%, transparent); } 55% { opacity: 1; transform: scale(1.14); box-shadow: 0 0 20px color-mix(in srgb, var(--gold-400) 45%, transparent); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px color-mix(in srgb, var(--gold-400) 22%, transparent); } } @keyframes fxLabelOn { from { opacity: 0.4; } to { opacity: 1; } } @keyframes fxRailFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes fxPodiumRise { from { opacity: 0; transform: translateY(var(--fx-rise, 48px)); } to { opacity: 1; transform: none; } } @keyframes fxSheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } } @keyframes fxBtnSheen { from { transform: translateX(-180%) skewX(-18deg); } to { transform: translateX(300%) skewX(-18deg); } } @keyframes fxShimmer { from { background-position: 115% 0, 0 0; } to { background-position: -15% 0, 0 0; } } @keyframes fxBreathe { from { opacity: 0.7; transform: rotate(var(--fx-rot, 0deg)) scale(1); } to { opacity: 1; transform: rotate(var(--fx-rot, 0deg)) scale(1.04); } } /* ===== 2. .reveal 中和 ===== fx 接管的容器（及错峰子元素）不再走 main.js 的整体淡入， 避免"容器隐身 + 子元素动画"双重入场。main.js 仍会照常打 .is-visible，互不报错。注意：本节必须在 §4 的隐藏态之前。 */ html.fx-ready [data-stagger].reveal, html.fx-ready [data-stagger] > .reveal, html.fx-ready .stagebar--animate.reveal, html.fx-ready .podium--animate.reveal, html.fx-ready .hero-copy.reveal, html.fx-ready .hero-panel.reveal { opacity: 1; transform: none; transition: none; } /* ===== 3. 英雄区：错峰登场 + 金字流光 + 聚光灯呼吸 ===== */ /* 错峰入场：kicker → 标题 → lead → 按钮 → 右侧面板（50ms 步进）。 backwards：延迟期间保持首帧隐藏；结束后回到自然样式， 不残留 transform，按钮悬停不受影响。 */ html.fx-ready .hero-kicker { animation: fxRiseIn var(--fx-enter) var(--fx-ease-out) backwards; animation-delay: 40ms; } html.fx-ready .hero-title { animation: fxRiseIn var(--fx-enter) var(--fx-ease-out) backwards; animation-delay: 90ms; } html.fx-ready .hero-lead { animation: fxRiseIn var(--fx-enter) var(--fx-ease-out) backwards; animation-delay: 140ms; } html.fx-ready .hero-actions { animation: fxRiseIn var(--fx-enter) var(--fx-ease-out) backwards; animation-delay: 190ms; } html.fx-ready .hero-panel { animation: fxRiseIn var(--fx-enter-lg) var(--fx-ease-out) backwards; animation-delay: 240ms; } /* 极简金辉光：标题级微光晕（非霓虹），text-shadow 可继承进 gradient-text */ html.fx-ready .hero-title { text-shadow: var(--fx-glow-text); } /* 金色流光：叠一层"高光带 + 原金渐变"双层背景，只动 background-position。 静止位（0 0）高光带在可视窗外，观感与原 --grad-gold 完全一致； 入场后扫 2 遍即停（登场因果，非无限装饰）。 必须同 style.css 一样包在 @supports 里：不支持 clip:text 的浏览器 走原金色实字兜底，不能叠加背景层。 */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { html.fx-ready .hero-title .gradient-text, html.fx-ready .podium--animate.fx-in .podium__place--1 .podium__amount.gradient-text { background-image: linear-gradient(105deg, transparent 0%, transparent 46%, var(--fx-shine) 53%, transparent 60%, transparent 100%), var(--grad-gold); background-size: 230% 100%, 100% 100%; background-position: 0 0, 0 0; } html.fx-ready .hero-title .gradient-text { animation: fxShimmer 1400ms ease-in-out 2; animation-delay: 650ms; } /* 冠军奖金：颁奖台升起后单独扫一遍 */ html.fx-ready .podium--animate.fx-in .podium__place--1 .podium__amount.gradient-text { animation: fxShimmer 1200ms ease-in-out 1; animation-delay: 1150ms; } } /* 聚光灯缓慢呼吸：沿用 heroDrift 的氛围先例（≤768 已 display:none） */ html.fx-ready .hero-light { animation: fxBreathe 8.5s ease-in-out infinite alternate; } html.fx-ready .hero-light--l { --fx-rot: 9deg; } html.fx-ready .hero-light--r { --fx-rot: -11deg; animation-duration: 10s; animation-delay: -4.25s; } /* ===== 4. 通用错峰揭示 [data-stagger] ===== motion.js 给直接子元素写 --fx-i 序号，容器进视口加 .fx-in。 隐藏态只在"未点亮"时生效；动画 backwards：延迟期隐藏、 结束后回自然样式（悬停 transform 不被 fill 钉死）。 */ html.fx-ready [data-stagger]:not(.fx-in) > * { opacity: 0; } html.fx-ready [data-stagger].fx-in > * { animation: fxRiseIn var(--fx-enter) var(--fx-ease-out) backwards; animation-delay: calc(var(--fx-i, 0) * var(--fx-step)); } /* ===== 5. stagebar 充能（.stagebar--animate 进视口加 .fx-in）===== 序列：节点1 点亮 → 轨道1 金渐变自左充满 → 节点2 ……（晋级推进感） 时刻表：节点 0 / 400 / 800 / 1200ms（亮灯 380ms）； 轨道 120 / 520 / 920ms（充能 300ms，收尾恰接下一节点）。 子元素为 span 序列：step(1) rail(2) step(3) rail(4) step(5) rail(6) step(7)。 */ html.fx-ready .stagebar--animate .stagebar__node { opacity: 0.38; } html.fx-ready .stagebar--animate .stagebar__label { opacity: 0.4; } html.fx-ready .stagebar--animate .stagebar__rail { position: relative; overflow: hidden; opacity: 1; background: color-mix(in srgb, var(--gold-600) 32%, transparent); } html.fx-ready .stagebar--animate .stagebar__rail::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-300)); transform: scaleX(0); transform-origin: left center; } html.fx-ready .stagebar--animate.fx-in .stagebar__node { animation: fxNodeOn 380ms var(--fx-ease-out) both; } html.fx-ready .stagebar--animate.fx-in .stagebar__label { animation: fxLabelOn 300ms var(--fx-ease-out) both; } html.fx-ready .stagebar--animate.fx-in .stagebar__rail::after { animation: fxRailFill 300ms var(--fx-ease-out) both; } html.fx-ready .stagebar--animate.fx-in .stagebar__step:nth-child(1) .stagebar__node, html.fx-ready .stagebar--animate.fx-in .stagebar__step:nth-child(1) .stagebar__label { animation-delay: 0ms; } html.fx-ready .stagebar--animate.fx-in .stagebar__rail:nth-child(2)::after { animation-delay: 120ms; } html.fx-ready .stagebar--animate.fx-in .stagebar__step:nth-child(3) .stagebar__node, html.fx-ready .stagebar--animate.fx-in .stagebar__step:nth-child(3) .stagebar__label { animation-delay: 400ms; } html.fx-ready .stagebar--animate.fx-in .stagebar__rail:nth-child(4)::after { animation-delay: 520ms; } html.fx-ready .stagebar--animate.fx-in .stagebar__step:nth-child(5) .stagebar__node, html.fx-ready .stagebar--animate.fx-in .stagebar__step:nth-child(5) .stagebar__label { animation-delay: 800ms; } html.fx-ready .stagebar--animate.fx-in .stagebar__rail:nth-child(6)::after { animation-delay: 920ms; } html.fx-ready .stagebar--animate.fx-in .stagebar__step:nth-child(7) .stagebar__node, html.fx-ready .stagebar--animate.fx-in .stagebar__step:nth-child(7) .stagebar__label { animation-delay: 1200ms; } /* ===== 6. 颁奖台升起（.podium--animate 进视口加 .fx-in）===== 颁奖惯例错峰：亚军 → 季军 → 冠军压轴；冠军行程最长（台最高）。 backwards：结束后回自然样式，冠军金边呼吸留给既有静态 glow。 */ html.fx-ready .podium--animate:not(.fx-in) .podium__place { opacity: 0; } html.fx-ready .podium--animate.fx-in .podium__place { animation: fxPodiumRise var(--fx-enter-lg) var(--fx-ease-out) backwards; } html.fx-ready .podium--animate.fx-in .podium__place--2 { --fx-rise: 44px; animation-delay: 0ms; } html.fx-ready .podium--animate.fx-in .podium__place--3 { --fx-rise: 38px; animation-delay: 150ms; } html.fx-ready .podium--animate.fx-in .podium__place--1 { --fx-rise: 64px; animation-delay: 320ms; } /* 奖牌光泽：升起落定后各扫一道玻璃高光（一次性） */ html.fx-ready .podium--animate.fx-in .podium__medal { position: relative; overflow: hidden; } html.fx-ready .podium--animate.fx-in .podium__medal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--text-hi) 55%, transparent) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; animation: fxSheen 620ms var(--fx-ease-out) 1 backwards; } html.fx-ready .podium--animate.fx-in .podium__place--2 .podium__medal::after { animation-delay: 640ms; } html.fx-ready .podium--animate.fx-in .podium__place--3 .podium__medal::after { animation-delay: 800ms; } html.fx-ready .podium--animate.fx-in .podium__place--1 .podium__medal::after { animation-delay: 1000ms; } /* ===== 7. 数字滚动样式配合（.count-up[data-to]，逻辑在 motion.js）===== 滚动中金晕增强 → 落定后收敛为常驻微光（关键数字礼遇）。 */ html.fx-ready .count-up { transition: text-shadow 480ms var(--fx-ease-out); } html.fx-ready .count-up.fx-counting { text-shadow: 0 0 14px color-mix(in srgb, var(--gold-400) 38%, transparent); } html.fx-ready .count-up.fx-counted { text-shadow: var(--fx-glow-text); } /* ===== 8. 微交互（悬停/按压；enter=ease-out，exit=ease-in 更短）===== 注意：本节须位于 §2 中和规则之后（stage-card 的 transition 覆盖）。 */ /* 主 CTA：悬停/键盘聚焦扫光 + 按压反馈（扫光层画在文字上方=玻璃眩光） */ html.fx-ready .btn--primary { position: relative; overflow: hidden; } html.fx-ready .btn--primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--text-hi) 42%, transparent) 50%, transparent 100%); transform: translateX(-180%) skewX(-18deg); pointer-events: none; } html.fx-ready .btn--primary:hover::before, html.fx-ready .btn--primary:focus-visible::before { animation: fxBtnSheen 480ms var(--fx-ease-out) 1; } html.fx-ready .btn--primary:active { transform: translateY(0) scale(0.975); } html.fx-ready .btn--ghost:active, html.fx-ready .btn--onband:active, html.fx-ready .btn--onband-ghost:active { transform: scale(0.975); } /* 辉光卡：悬停上浮 + 金辉增强 */ html.fx-ready .card--glow { transition: transform var(--fx-micro-exit) var(--fx-ease-in), border-color var(--fx-micro-exit) var(--fx-ease-in), box-shadow var(--fx-micro-exit) var(--fx-ease-in); } html.fx-ready .card--glow:hover { transform: translateY(-3px); border-color: var(--gold-400); box-shadow: var(--fx-glow-card); transition-duration: var(--fx-micro); transition-timing-function: var(--fx-ease-out); } /* 赛段卡：悬停上浮 + 金辉光；巨幽灵数字随之微浮（悬停因果，非循环）。 选择器带 .stages 抬高优先级，压过 §2 中和的 transition:none。 */ html.fx-ready .stages > .stage-card { transition: transform var(--fx-micro-exit) var(--fx-ease-in), border-color var(--fx-micro-exit) var(--fx-ease-in), box-shadow var(--fx-micro-exit) var(--fx-ease-in); } html.fx-ready .stages > .stage-card:hover { transform: translateY(-4px); border-color: var(--gold-600); box-shadow: var(--fx-glow-card); transition-duration: var(--fx-micro); transition-timing-function: var(--fx-ease-out); } html.fx-ready .stage-card__num { transition: opacity var(--fx-micro) var(--fx-ease-out), transform 300ms var(--fx-ease-out); } html.fx-ready .stage-card:hover .stage-card__num { transform: translateY(-7px); } /* ===== 9. 响应式收敛（≤768：幅度减半、节奏加快）===== */ @media (max-width: 768px) { :root { --fx-step: 35ms; --fx-enter: 360ms; --fx-enter-lg: 420ms; } /* 移动端颁奖台纵向堆叠（1→2→3），改为自上而下依次升起、幅度收敛 */ html.fx-ready .podium--animate.fx-in .podium__place--1 { --fx-rise: 36px; animation-delay: 0ms; } html.fx-ready .podium--animate.fx-in .podium__place--2 { --fx-rise: 30px; animation-delay: 120ms; } html.fx-ready .podium--animate.fx-in .podium__place--3 { --fx-rise: 30px; animation-delay: 240ms; } /* 标题流光只扫一遍 */ html.fx-ready .hero-title .gradient-text { animation-iteration-count: 1; } } /* ===== 10. prefers-reduced-motion：终态直达 ===== style.css 已全局把动画/过渡压到 0.001ms，但 animation-delay 与 本文件的初始隐藏态仍需显式清零/点亮；数字滚动由 motion.js 检测 偏好后跳过——页面直接呈现服务端渲染的终值。 （也兜底"页面打开后中途切换系统偏好"的场景。） */ @media (prefers-reduced-motion: reduce) { html.fx-ready .hero-kicker, html.fx-ready .hero-title, html.fx-ready .hero-lead, html.fx-ready .hero-actions, html.fx-ready .hero-panel, html.fx-ready .hero-light, html.fx-ready .gradient-text, html.fx-ready .count-up, html.fx-ready [data-stagger] > *, html.fx-ready .stagebar--animate .stagebar__node, html.fx-ready .stagebar--animate .stagebar__label, html.fx-ready .stagebar--animate .stagebar__rail::after, html.fx-ready .podium--animate .podium__place, html.fx-ready .podium--animate.fx-in .podium__medal::after, html.fx-ready .btn--primary::before { animation: none !important; transition: none !important; } html.fx-ready [data-stagger] > *, html.fx-ready .podium--animate .podium__place, html.fx-ready .stagebar--animate .stagebar__node, html.fx-ready .stagebar--animate .stagebar__label { opacity: 1 !important; transform: none !important; } /* 赛程轨道直接呈现充满终态 */ html.fx-ready .stagebar--animate .stagebar__rail::after { transform: none !important; } }