/* Spectra: the spectrum-signature thread. Self-contained; only ever touches .sig-* / [data-sig-*] selectors.
   Reads tokens already on :root from css/site.css (--night, --gut, --fog); redefines none of them.
   Animates transform and opacity only (the fill's growth is a transform: scaleX/Y, per js/signature.js). */

.sig {
  position: fixed;
  pointer-events: none;
  z-index: 13;                 /* above the canvas, below the stopcard (16) / cutfade (19); the metro itself is 12 */
  transform-origin: 50% 50%;
  will-change: transform;
}

/* -- orientation: right, a vertical hairline at the metro's own height (js/engine.js: right: calc(var(--gut)*.9),
   vertically centred) -- the recommendation: the metro's stations read as beads on this thread. -- */
.sig-right {
  right: calc(var(--gut) * 0.9 + var(--sar, 0px) + 20px);   /* centred on the metro's dot column: .metro right gut*.9, dot centre 21.5px in (site.css), thread 3px wide */
  top: 50%;
  width: 3px;
  height: 220px;
  transform: translateY(-50%);
}
.sig-right.sig { transform-origin: 50% 50%; }

/* -- orientation: top, a horizontal hairline under the header, full width -- the conventional alternative. -- */
.sig-top {
  left: 0; right: 0; top: calc(var(--gut) * 0.7 + 34px);   /* approximate the header's own height; tune by eye, see FIGURE-SIGNATURE.md */
  width: 100%;
  height: 3px;
}

.sig-rail, .sig-fill, .sig-whiteout { position: absolute; inset: 0; border-radius: 2px; }
.sig-rail { background: rgba(233, 230, 223, 0.14); }
.sig-fill { transform-origin: 50% 0%; }
.sig-right .sig-fill { transform-origin: 50% 0%; }
.sig-top .sig-fill { transform-origin: 0% 50%; }
.sig-whiteout { background: #fff; opacity: 0; border-radius: 2px; }

.sig-head { position: absolute; pointer-events: none; opacity: 0; }
.sig-right .sig-head { left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); }
.sig-top .sig-head { top: 50%; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); }

/* -- the finale layer: fixed, centred, above everything while it plays -- */
.sig-finale-layer { position: fixed; inset: 0; z-index: 25; pointer-events: none; display: none; }
.sig-finale-layer.is-on { display: block; }

.sig-point {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 18px 6px rgba(255,255,255,.85), 0 0 46px 18px rgba(255,255,255,.35);
  transform: translate(-50%, -50%) scale(0.3);
}

.sig-rays { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sig-ray {
  position: absolute; left: 0; top: -1px; width: 46vmax; height: 2px;
  transform-origin: 0% 50%; opacity: 0;
  filter: drop-shadow(0 0 4px currentColor);
}

.sig-mark {
  position: absolute; left: 50%; top: 50%; width: min(60vw, 60vh); height: auto;
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  filter: drop-shadow(0 0 40px rgba(200, 180, 255, .25));
}

@media (max-width: 720px) {
  .sig-right { right: calc(22px + var(--sar, 0px)); height: 170px; }   /* phone metro: right 6px, dot centre 17.5px in */
  .sig-mark { width: min(78vw, 78vh); }
}
@media (prefers-reduced-motion: reduce) {
  .sig-rail, .sig-fill, .sig-whiteout, .sig-point, .sig-ray, .sig-mark, .sig-head { transition: none !important; }
}

/* integrated (2026-09-26): the engine moves the thread (.sig) into #fall, inside this dock, just after the metro,
   so the metro's dots sit ON the thread (beads) and the cut-to-black covers it. The finale layer stays at body
   level (z 25), above the arrival. The thread shows only while the metro does (never over the hero). */
.sig-dock { position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 1; transition: opacity .5s; }
.fall:not(.arrived) .metro:not(.vis) ~ .sig-dock { opacity: 0; }
/* phones: the title card's line runs close to the right edge, so the thread steps back under the card, like the metro */
@media (max-width: 720px) { .card-up .sig-dock { opacity: 0; } }