/* ============================================================
   hud.motion.css — 关键帧 + 编排 + 三档强度 + reduced-motion
   纪律：循环用 linear，离散用缓动；只动 transform / opacity
   ============================================================ */

@keyframes hud-scan    { 0%   { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes hud-pulse   { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes hud-breathe { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: .75; transform: scale(1.02); } }
@keyframes hud-spin    { to { transform: rotate(360deg); } }
@keyframes hud-dash    { to { stroke-dashoffset: -120; } }
@keyframes hud-boot    { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes hud-rise    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hud-tick    { 0% { background-position: 0 0; } 100% { background-position: 24px 0; } }
@keyframes hud-flicker { 0%,97%,100% { opacity: 1; } 98% { opacity: .72; } }
@keyframes hud-count   { from { transform: translateY(.6em); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 入场 ---------- */
.hud-boot-in { animation: hud-boot var(--hud-dur-3) var(--hud-ease-out) both; }
.hud-rise-in { animation: hud-rise var(--hud-dur-2) var(--hud-ease-out) both; }
.hud-count-in{ animation: hud-count var(--hud-dur-2) var(--hud-ease-back) both; }

/* 级联：只给少量用，长列表禁用 */
.hud-stagger > * { animation: hud-rise var(--hud-dur-2) var(--hud-ease-out) both; }
.hud-stagger > *:nth-child(1) { animation-delay: .04s; }
.hud-stagger > *:nth-child(2) { animation-delay: .08s; }
.hud-stagger > *:nth-child(3) { animation-delay: .12s; }
.hud-stagger > *:nth-child(4) { animation-delay: .16s; }
.hud-stagger > *:nth-child(5) { animation-delay: .20s; }
.hud-stagger > *:nth-child(n+6) { animation-delay: .24s; }

/* ============================================================
   Splash 开屏五阶段编排（约 3s）
   扫描线 → 主标识 → 标题 clip-path 揭示 → 分隔线 → 副标题
   时长与延迟全部由 --hud-dur-3 折算（×系数），不引入新令牌。
   ============================================================ */
@keyframes splash-scan  { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes splash-mark  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes splash-title { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes splash-rule  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes splash-sub   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hud-splash__scan  { animation: splash-scan  calc(var(--hud-dur-3) * 3.75)  var(--hud-ease-out) both; }                                            /* 1.80s      */
.hud-splash__mark  { animation: splash-mark  calc(var(--hud-dur-3) * 1.667) var(--hud-ease-out) calc(var(--hud-dur-3) * 1.667) both; }              /* 0.80s @0.80 */
.hud-splash__title { animation: splash-title calc(var(--hud-dur-3) * 1.458) var(--hud-ease-out) calc(var(--hud-dur-3) * 3.333) both; }              /* 0.70s @1.60 */
.hud-splash__rule  { transform-origin: left center;
                     animation: splash-rule  calc(var(--hud-dur-3) * 1.25)  var(--hud-ease-out) calc(var(--hud-dur-3) * 4.792) both; }              /* 0.60s @2.30 */
.hud-splash__sub   { animation: splash-sub   calc(var(--hud-dur-3) * .833)  var(--hud-ease-out) calc(var(--hud-dur-3) * 5.625) both; }              /* 0.40s @2.70 */


/* ---------- 载入环（唯一低于 2s 的循环） ---------- */
.hud-spinner {
  width: 18px; height: 18px; flex: none;
  border: 2px solid var(--hud-a18);
  border-top-color: var(--hud-accent);
  border-radius: 0;                 /* 本体系不给圆角——方环更有仪器感 */
  animation: hud-spin 1s linear infinite;
}

/* ---------- 虚线流动 ---------- */
.hud-dashline {
  stroke: var(--hud-a52);
  stroke-dasharray: 4 6;
  animation: hud-dash 6s linear infinite;
}

/* ---------- 刻度带 ---------- */
.hud-tickband {
  height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--hud-a32) 0 1px, transparent 1px 24px);
  animation: hud-tick 4s linear infinite;
}

/* ============================================================
   @property 可动画自定义属性
   让自定义属性参与过渡/动画，无需 JS。
   ============================================================ */
@property --hud-glow-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --hud-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* 示例一：光晕呼吸（--hud-glow-size 驱动 drop-shadow） */
@keyframes hud-glow-breathe { from { --hud-glow-size: 4px; } to { --hud-glow-size: 24px; } }
.hud-glow-breathe {
  filter: drop-shadow(0 0 var(--hud-glow-size) var(--hud-a32));
  animation: hud-glow-breathe 2.4s var(--hud-ease-io) infinite alternate;
}

/* 示例二：渐变进度条平滑过渡（--hud-progress 驱动硬停渐变） */
@keyframes hud-progress-fill { from { --hud-progress: 8%; } to { --hud-progress: 92%; } }
.hud-progress-smooth {
  --hud-progress: 0%;
  background: linear-gradient(90deg,
    var(--hud-accent) var(--hud-progress),
    transparent var(--hud-progress));
  transition: --hud-progress var(--hud-dur-3) var(--hud-ease-io);
}
.hud-progress-smooth.is-animate { animation: hud-progress-fill 3.2s var(--hud-ease-io) both; }

/* ============================================================
   @starting-style 入场过渡（display:none → block）
   配合 transition-behavior: allow-discrete，不必先用 JS 显隐再触发。
   ============================================================ */
.hud-panel[open] {
  transition: opacity var(--hud-dur-2) var(--hud-ease-out),
              transform var(--hud-dur-2) var(--hud-ease-out),
              display var(--hud-dur-2);
  transition-behavior: allow-discrete;
}
@starting-style {
  .hud-panel[open] { opacity: 0; transform: translateY(-8px); }
}

/* ============================================================
   sibling-index() 渐进增强：纯 CSS 级联入场（替代 JS 编排）
   支持的浏览器覆盖上面的 nth-child 硬编码版；不支持则原样回退。
   ============================================================ */
@supports (animation-delay: calc(sibling-index() * 1ms)) {
  .hud-stagger > * {
    animation: hud-rise var(--hud-dur-2) var(--hud-ease-out) both;
    animation-delay: calc(sibling-index() * 40ms);
  }
}

/* ============================================================
   三档强度
   ============================================================ */
[data-hud-motion="subtle"] .hud-atmo__scan,
[data-hud-motion="subtle"] .hud-tickband,
[data-hud-motion="subtle"] .hud-dashline { animation: none; opacity: .35; }
[data-hud-motion="subtle"] .hud-panel,
[data-hud-motion="subtle"] .hud-kpi { animation: none; }

[data-hud-motion="off"] *,
[data-hud-motion="off"] *::before,
[data-hud-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   reduced-motion —— 用 .01ms 而不是 0
   （某些浏览器对 0 会回退到默认值，反而还在动）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 性能：循环动画元素最多 3 个加 will-change */
.hud-atmo__scan, .hud-spinner, .hud-tickband { will-change: transform; }