/* ==========================================================================
   NSR prototype - story layer (round 4)
   The page said what NSR does but never told it as a walk: where you are, how far in, what comes next. These pieces add that without adding a word
   of copy: a thread down the left edge that counts the chapters (the six numbered sections), a line in the hero that places the studio on the map
   (coordinates and the time in Corpus Christi right now), hand-drawn marks that point at the words that matter, a badge that goes round, and the
   the note under the poster drawn as the coupon it is. All shapes are round: pills, circles, rounded line ends (owner rule, 2026-10-14).
   ========================================================================== */

/* ---------- the chapter thread: a line, six stops, the one you are at is a pill ------------------------------------------------------------ */
#rail {
  position: fixed; z-index: 45; left: calc(var(--frame) + 24px); top: 50%; width: 30px; height: min(310px, 40vh); transform: translateY(-50%);
  color: var(--salt); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--e-out), color 0.35s var(--e-soft);
}
body[data-theme="light"] #rail, body[data-theme="signal"] #rail { color: var(--carbon); }
#rail.is-on { opacity: 1; }
body.menu-open #rail { opacity: 0; }
.rail-line { position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; border-radius: var(--r-pill); background: currentColor; opacity: 0.22; }
.rail-fill { position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; border-radius: var(--r-pill); background: var(--infrared); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); transition: transform 0.6s var(--e-out); }
/* a stop is a fixed 8 x 24 box that holds two layers: a dot (::before) and a pill (::after). The one you are at swaps dot for pill by opacity and a small scale,
   so nothing ever animates width, height or margin (those make the browser lay the page out again on every frame) */
.rail-stop { position: absolute; left: 0; top: calc(var(--i) * 100% / 4); width: 8px; height: 24px; margin-top: -12px; }
.rail-stop::before, .rail-stop::after { content: ""; position: absolute; left: 0; border-radius: var(--r-pill); transition: opacity 0.3s var(--e-ui), transform 0.4s var(--e-out); }
.rail-stop::before { top: 8px; width: 8px; height: 8px; background: currentColor; opacity: 0.4; }
.rail-stop::after { top: 0; width: 8px; height: 24px; background: var(--infrared); opacity: 0; transform: scaleY(0.34); }
.rail-stop.is-past::before { opacity: 0.85; }
.rail-stop.is-on::before { opacity: 0; }
.rail-stop.is-on::after { opacity: 1; transform: none; }
.rail-stop i { position: absolute; left: 20px; top: 50%; margin-top: -6px; font: normal 600 11px/12px var(--f-index); letter-spacing: 0.06em; opacity: 0; transform: translateX(-5px); transition: opacity 0.3s var(--e-out), transform 0.4s var(--e-out); }
.rail-stop.is-on i { opacity: 1; transform: none; }
@media (max-width: 1180px), (max-height: 600px), (hover: none) { #rail { display: none; } }

/* ---------- the hero's place line ---------------------------------------------------------------------------------------------------------- */
.hero-meta {
  position: absolute; z-index: 3; left: var(--col); bottom: calc(8svh - 10px); display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: 11px; color: var(--meta); pointer-events: none; white-space: nowrap;
}
.hero-meta .hm-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--infrared); }
@media (max-width: 1024px) { .hero-meta { display: none; } }

/* ---------- hand-drawn marks: a loop or an underline that draws itself under a word ------------------------------------------------ */
[data-mark] { position: relative; display: inline-block; }
.mark-svg { position: absolute; max-width: none; pointer-events: none; overflow: visible; } /* the reset's svg { max-width: 100% } would squeeze the stroke to the word's own width and slide it off the word */
.mark-svg path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
[data-mark="underline"] .mark-svg { left: -3%; right: -3%; bottom: -0.2em; width: 106%; height: 0.34em; }
[data-mark="loop"] .mark-svg { left: -16%; top: -26%; width: 132%; height: 152%; }
.zone-signal .mark-svg path { stroke: var(--carbon); }

/* ---------- the note under the poster as a coupon: a soft ticket with a notch on each side ------------------------------------------------------ */
.coupon {
  position: relative; padding: 22px 30px; border-radius: var(--r-card);
  background: rgba(9, 10, 11, 0.09); box-shadow: inset 0 0 0 1.5px rgba(9, 10, 11, 0.42);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.coupon p { margin: 0; }

/* ---------- the place badge: where the studio is, going round ------------------------------------------------------------------------------ */
.badge { position: absolute; z-index: 4; width: 128px; height: 128px; color: var(--fg); pointer-events: none; }
.badge svg { width: 100%; height: 100%; overflow: visible; animation: badge-turn 26s linear infinite; }
.badge text { font-family: var(--f-index); font-weight: var(--w-label); font-size: 9.4px; fill: currentColor; } /* the spacing along the circle comes from textLength on the textPath */
.badge .b-dot { fill: var(--infrared); }
.badge .b-ring { fill: none; stroke: currentColor; stroke-opacity: 0.25; stroke-width: 1; }
@keyframes badge-turn { to { transform: rotate(360deg); } }
.founders { position: relative; }
.founders .badge { display: none; right: calc(var(--col) * 1.2); top: clamp(60px, 11vh, 120px); }
@media (max-width: 1024px) { .founders .badge { display: none; right: 18px; top: 44px; width: 96px; height: 96px; } }

/* ---------- the FAQ's empty side: nested pills, outlines only -------------------------------------------------------------------------------- */
.faq-art { display: none; position: absolute; z-index: -1; left: calc(var(--col) * -1.5); bottom: -6%; width: 46vw; height: 17vw; pointer-events: none; transform: rotate(-14deg); }
.faq-art i { position: absolute; inset: 0; border: 1.5px solid var(--hair-strong); border-radius: var(--r-pill); opacity: 0.55; }
.faq-art i:nth-child(2) { inset: 12% 8%; opacity: 0.4; }
.faq-art i:nth-child(3) { inset: 24% 16%; opacity: 0.3; border-color: var(--accent); }
.faq { overflow: hidden; }
@media (max-width: 768px) { .faq-art { width: 92vw; height: 34vw; bottom: 2%; left: -10vw; } }

/* ---------- a way back to the top, as a pill ------------------------------------------------------------------------------------------------- */
.to-top { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid var(--hair-strong); border-radius: var(--r-pill); font-weight: 600; font-size: 15px; color: var(--fg); transition: background-color 0.18s var(--e-ui), border-color 0.18s var(--e-ui), transform 0.16s var(--e-out); }
.to-top svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .to-top:hover { border-color: var(--fg); } }
.to-top:active { transform: scale(0.97); }
.foot-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; }
.foot-end .legal { margin: 0; }

/* ---------- reduced motion ------------------------------------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .badge svg { animation: none; }
  .rail-fill, .rail-stop::before, .rail-stop::after, .rail-stop i, #rail { transition: none; }
}
html:not([data-atmos="on"]) .faq-art, html:not([data-atmos="on"]) .badge { display: none; }