/* UI 增强层：暗黑游戏质感的 HUD 装饰 + 科技感动效
   常驻动画只用 transform / opacity（GPU 合成），并由 .hud-paused 统一暂停。 */

/* ---------- 四角定位框 ---------- */
.hud-frame{position:absolute;inset:0;z-index:3;pointer-events:none}
.hud-corner{
  position:absolute;
  width:26px;
  height:26px;
  border:1px solid rgba(217,223,114,.34);
  animation:hud-corner-in .9s var(--ease-out) both;
}
.hud-corner.tl{left:var(--gutter);top:96px;border-right:0;border-bottom:0}
.hud-corner.tr{right:var(--gutter);top:96px;border-left:0;border-bottom:0;animation-delay:.08s}
.hud-corner.bl{left:var(--gutter);bottom:96px;border-right:0;border-top:0;animation-delay:.16s}
.hud-corner.br{right:var(--gutter);bottom:96px;border-left:0;border-top:0;animation-delay:.24s}
@keyframes hud-corner-in{
  from{opacity:0;transform:scale(.4)}
  to{opacity:1;transform:scale(1)}
}
/* 位移用 transform，不触发重排 */
.hud-corner.tl,.hud-corner.tr{transform:translateY(-6px)}
.hud-corner.bl,.hud-corner.br{transform:translateY(6px)}
.hud-corner.tl{animation-name:hud-corner-in-tl}
@keyframes hud-corner-in-tl{from{opacity:0;transform:translateY(-6px) scale(.4)}to{opacity:1;transform:translateY(-6px) scale(1)}}
.hud-corner.tr{animation-name:hud-corner-in-tl}
.hud-corner.bl{animation-name:hud-corner-in-bl}
@keyframes hud-corner-in-bl{from{opacity:0;transform:translateY(6px) scale(.4)}to{opacity:1;transform:translateY(6px) scale(1)}}
.hud-corner.br{animation-name:hud-corner-in-bl}

/* ---------- 左侧刻度轨 ---------- */
.hud-rail{
  position:absolute;
  left:calc(var(--gutter) - 2px);
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.hud-rail-ticks{
  display:flex;
  flex-direction:column;
  gap:3px;
  /* 刻度的"流"：整体缓慢上移，形成持续运行的暗示 */
  animation:rail-flow 9s linear infinite;
}
@keyframes rail-flow{
  from{transform:translateY(0)}
  to{transform:translateY(-25%)}
}
.hud-rail-ticks i{
  display:block;
  width:9px;
  height:1px;
  background:rgba(236,234,228,.22);
  transition:background .4s linear,width .4s var(--ease-out);
}
.hud-rail-ticks i.is-major{width:16px;background:rgba(236,234,228,.4)}
/* 已播放进度内的刻度点亮（用进度当阈值，靠 nth-child 近似即可） */
.hud-rail-readout{
  writing-mode:vertical-rl;
  font-family:var(--font-ui);
  font-size:8px;
  letter-spacing:.22em;
  color:rgba(217,223,114,.72);
  white-space:nowrap;
}

/* ---------- 指针坐标读数 ---------- */
.hud-readout{
  position:absolute;
  right:var(--gutter);
  bottom:96px;
  z-index:3;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
}
.hud-readout-label{color:rgba(217,223,114,.6)}
.hud-readout-value{color:rgba(236,234,228,.5)}

/* ---------- 磁吸：位移交给 CSS 变量，JS 只改变量 ---------- */
.seq-arrow,
.intro-control,
.wordmark{
  transform:translate3d(var(--magnet-x,0),var(--magnet-y,0),0);
  transition:transform .25s var(--ease-out),color .25s,border-color .25s,background .25s;
}
.is-magnet{transition:transform .08s linear,color .25s,border-color .25s,background .25s}

/* ---------- 暂停：滚出视口 / 页面隐藏时停掉常驻动画 ---------- */
.hud-paused .hud-rail-ticks,
.hud-paused .hud-corner{animation-play-state:paused}

/* ---------- 窄屏：装饰太密会挤，收掉一部分 ---------- */
@media(max-width:1100px){
  .hud-corner{width:18px;height:18px}
  .hud-rail{display:none}
}
@media(max-width:700px){
  .hud-frame,.hud-readout{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hud-rail-ticks,.hud-corner{animation:none}
  .seq-arrow,.intro-control,.wordmark{transform:none}
}