/* ============================================================
   fx-wayfinding — nav ledger, progress hairline, link ink,
   section seams, live HUD readout.
   Tokens only (index.html :root). Everything here is decorative
   and aria-hidden; nav links and focus order are untouched.
   ============================================================ */

/* ---------- nav: progress hairline ---------- */
.nav-prog{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--ink);opacity:.7;
  transform-origin:left;transform:scaleX(0);
  pointer-events:none;
}

/* ---------- nav: ledger (01 / 10 · Overwatch) ---------- */
.nav-ledger{
  display:flex;align-items:center;gap:10px;
  margin-left:22px;margin-right:auto;            /* stays beside the wordmark; the auto margin
                                                    absorbs the free space so .nav-links keeps its edge */
  font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-faint);white-space:nowrap;
  opacity:0;transition:opacity .6s;
  pointer-events:none;
}
.nav.scrolled .nav-ledger{opacity:1}

/* rolling digits */
.nl-n{
  position:relative;display:inline-block;width:2.6em;height:1em;overflow:hidden;
  font-weight:inherit;                            /* <b> would otherwise go bolder */
}
.nl-n span{position:absolute;left:0;top:0;transition:transform .5s var(--ease-out-expo, var(--ease-out))}
.nl-n span:nth-child(2){transform:translateY(110%)}
.nl-n.roll span:first-child{transform:translateY(-110%)}
.nl-n.roll span:nth-child(2){transform:none}
.nl-n.snap span{transition:none}                 /* JS: one frame while the pair is reset */
.nl-sep{color:var(--border-strong)}
.nl-t{color:var(--text-faint)}

/* ---------- nav: link ink ---------- */
.nav-links{position:relative}
.nav-ink{
  position:absolute;left:0;bottom:-1px;height:1px;width:1px;
  background:var(--ink);
  transform-origin:left;
  transform:translateX(var(--ix,0px)) scaleX(var(--iw,0));
  transition:transform .55s var(--ease-out-expo, var(--ease-out));
  pointer-events:none;
}
@media (max-width:760px){.nav-ledger,.nav-ink{display:none}}

/* ---------- section seams ---------- */
.section,.manifesto,.reserve{position:relative}
.seam{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:2}
.seam::before{content:"";position:absolute;inset:0;background:var(--border)}
.section.raised,.reserve{border-top-color:transparent}   /* the seam paints that line */
.seam i{
  position:absolute;top:0;left:0;width:38vw;height:1px;
  background:linear-gradient(90deg,transparent,var(--ink) 55%,transparent);
  opacity:.55;transform:translateX(-40vw);
}
.seam.live i{animation:seam-sweep 7s linear infinite}
@keyframes seam-sweep{to{transform:translateX(140vw)}}
.seam span{
  position:absolute;top:14px;left:clamp(22px,6vw,80px);
  font:500 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);opacity:.8;white-space:nowrap;
}
/* the ticker's border already draws this line — label only */
#services .seam::before,#services .seam i{display:none}

/* scan bands on raised sections — the .holo__scan idiom, static paint */
.section.raised::after{
  content:"";position:absolute;left:0;right:0;top:0;height:160px;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(232,235,233,.025) 0 1px,transparent 1px 5px);
  -webkit-mask-image:linear-gradient(#000,transparent);
  mask-image:linear-gradient(#000,transparent);
}
.section.raised .shell{position:relative;z-index:1}

/* ---------- reduced motion ---------- */
/* pinned explicitly: the global .001s rule would still leave the sweep
   jumping between its keyframe ends */
/* reduced motion (html.rm) */html.rm .seam i{animation:none;transform:translateX(31vw);opacity:.3}
.seam.rm i{animation:none;transform:translateX(31vw);opacity:.3}   /* GH.reduced incl. ?rm=1 */

/* ---- nav fit ----
   Below 1440px the ledger goes (a courtesy; the acts are one wheel-turn away).
   Below 1280px the two chips go too (Ctrl K still works; Sound lives in the palette
   and the mobile menu). The CTA never wraps. */
.nav-links .pill{white-space:nowrap}
@media (max-width:1439px){.nav-ledger{display:none}}
@media (max-width:1279px){.nav-links .nav-k,.nav-links .snd{display:none}}