/* AFC 13 — opening: the F1 start lights. A night curtain (the dark ground: --night + the fine static grain, no grid)
   with a gantry of five pods over the page. The pods light one by one, hold, and all go out at once; then the
   night opens from a thin slit shaped like a helmet visor and the intro shows through it ("lights out and away we go").
   opening.js writes two values: --lit (0–5, the red glow on the ground) and --lift (0 → 1, the reveal's spring; the
   slit itself is a clip-path on the night layer, .op-bg, drawn by AFC.visor — the same shape the intro closes into).
   Lights are a real start-light red; the brand green stays for focus. Loaded after site.css (tokens, dark scope). */

/* no JS, no opening; with JS the curtain is up from the first paint. If opening.js never takes over (.is-live),
   the curtain clears itself after a few seconds: the reader is never trapped behind it */
html:not(.js) .opening { display: none; }
html.is-opening { overflow: hidden; overscroll-behavior: none; }   /* nothing scrolls underneath (scrollbar-gutter is stable: no shift) */

.opening[data-opening] {
  --u: min(clamp(9px, 2.6vw, 20px), 3.8vh);      /* the gantry's unit: every size below is a multiple of it */
  --lamp: calc(var(--u) * 3.4);
  --led: max(4px, calc(var(--lamp) / 9));        /* the LED matrix pitch inside a lamp */
  --red: #e10600;
  --lit: 0;
  --lift: 0;
  --ground-glow: none;                           /* the dark ground's Apex glow stays off: the light here is red */
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; overflow: clip;   /* the beam spans the viewport; the lifting edge clips it round */
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  animation: opening-failsafe .4s ease 4.2s forwards;
}
.opening.is-live { animation: none; }
.opening.is-lifting { pointer-events: none; }
.opening.is-fading { opacity: 0; transition: opacity .3s ease; }   /* reduced motion (or no spring engine): a cross-fade */
@keyframes opening-failsafe { to { opacity: 0; visibility: hidden; } }

/* red light spilling on the ground under the gantry, one fifth per lit pod */
.op-glow {
  position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 80); height: calc(var(--u) * 46);
  translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(225, 6, 0, .26), rgba(225, 6, 0, .08) 52%, transparent);
  opacity: calc(var(--lit) / 5);
  transition: opacity 90ms ease-out;
}
.opening.is-out .op-glow { transition: opacity 160ms ease-in; }

/* ── the mark: top left, where the site's own mark waits underneath ── */
.op-mark {
  position: absolute; left: max(var(--edge), env(safe-area-inset-left, 0px)); top: calc(clamp(16px, 2.2vw, 26px) + env(safe-area-inset-top, 0px));   /* the brand's spot (chrome.css) */
  width: clamp(78px, 7.4vw, 104px); color: var(--ink); line-height: 0; opacity: .92;
}
.op-mark svg { width: 100%; height: auto; }

/* ── the gantry: a beam across the whole track, five pods hanging on it, four lamps per pod (the lower two red).
   When the night opens without the mark (a skip), the slit opens behind it and the dark gantry dims away fast ── */
.op-stage { position: relative; display: grid; justify-items: center; opacity: max(0, 1 - var(--lift) * 2.6); }
.op-gantry { position: relative; display: flex; gap: calc(var(--u) * 1.1); }
.op-beam {
  position: absolute; top: calc(var(--u) * 2.2); height: calc(var(--u) * 2.4);
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: linear-gradient(#171f32, #090f1d 70%, #060913);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 calc(var(--u) * .8) calc(var(--u) * 2) calc(var(--u) * -.6) rgba(0, 0, 0, .7);
}
.op-pod {
  position: relative; display: grid; gap: calc(var(--u) * .55); padding: calc(var(--u) * .7);
  border-radius: calc(var(--u) * 1.3);
  background: linear-gradient(170deg, #151d30, #080d1a 46%, #040710);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) calc(var(--u) * -.8) rgba(0, 0, 0, .85);
}
/* a lamp: a dark lens with its LED matrix faintly visible; lit, the matrix burns red and the lens glows */
.op-lamp {
  position: relative; display: block; width: var(--lamp); height: var(--lamp); border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .06) 0 .8px, transparent 1.3px) 50% 50% / var(--led) var(--led),
    radial-gradient(circle at 40% 34%, #241412, #120a09 60%, #060404);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .7), inset 0 calc(var(--u) * .2) calc(var(--u) * .3) rgba(255, 255, 255, .05), 0 1px 0 rgba(255, 255, 255, .05);
}
.op-lamp::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(circle, rgba(255, 214, 196, .5) 0 .8px, transparent 1.4px) 50% 50% / var(--led) var(--led),
    radial-gradient(circle at 50% 44%, #ff5b3d, #f21b06 30%, var(--red) 56%, #9c0400);
  box-shadow:
    0 0 calc(var(--lamp) * .3) calc(var(--lamp) * .04) rgba(225, 6, 0, .7),
    0 0 calc(var(--lamp) * 1.2) calc(var(--lamp) * .16) rgba(225, 6, 0, .3);
  opacity: 0;
  transition: opacity 140ms ease-in;              /* going out: a short decay, like a real lamp's glow */
}
.op-pod.is-on .op-lamp.is-red::before { opacity: 1; transition: opacity 50ms ease-out; }

/* ── skip: one 44px pill, bottom right, always there ── */
.op-skip {
  position: absolute; right: max(var(--edge), env(safe-area-inset-right, 0px)); bottom: max(clamp(18px, 3.4vh, 34px), env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 20px;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink);
  background: var(--mat-thin); -webkit-backdrop-filter: var(--mat-thin-filter); backdrop-filter: var(--mat-thin-filter);
  box-shadow: var(--mat-edge);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), opacity .15s ease, scale var(--press-t) ease-out;
}
.op-skip .t-label { letter-spacing: .22em; }
.op-skip svg { width: 12px; height: 12px; }
.op-skip:hover { border-color: var(--apex); background: var(--apex-soft); }
.opening.is-lifting .op-skip { opacity: 0; }

/* ── reduced motion: the gantry shows lit for a moment, then the curtain cross-fades away (no slit, no sequence) ── */
@media (prefers-reduced-motion: reduce) {
  .op-stage { opacity: 1; }
}
@media (prefers-contrast: more) {
  .op-pod { outline: 1px solid var(--line-2); outline-offset: -1px; }
}

/* round 10 — the mark: after the lights, the AFC | 13 clip plays on the same night ground (its frame fades into the
   curtain at the edges, so no rectangle ever shows), the gantry steps back under it, and the night then opens behind
   the mark (round 15: through the visor slit). Phones: the clip is wider than the screen, so the mark reads at a
   useful size */
.op-logo {
  position: absolute; left: 50%; top: 50%; width: max(100vw, 177.8vh); height: auto; aspect-ratio: 16 / 9; max-width: none;
  translate: -50% -50%; scale: calc(1 + var(--lift) * .08); opacity: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent);
}
.opening.is-logo .op-logo { opacity: 1; transition: opacity .12s ease-out; }
.opening.is-logo .op-stage, .opening.is-logo .op-glow, .opening.is-logo .op-mark { opacity: 0; transition: opacity .2s ease-out; }
@media (max-width: 860px) { .op-logo { width: 165vw; } }
@media (prefers-reduced-motion: reduce) { .op-logo { display: none; } }

/* round 13 — the curtain's night is its own layer (.op-bg), so it can open while the mark stays.
   round 15 — the visor slit (aurel-one's aperture, in the helmet's shape): the curtain no longer lifts. When the mark
   has played, a thin slit with soft rounded ends and a slight lens bow cuts through the night at mid-height and opens
   on the curtain's spring (damping 1, response .75: --lift) until the intro fills the screen; opening.js writes the
   hole as an even-odd clip-path on .op-bg (AFC.visor.hole), the same visor the intro closes back into on the scroll.
   As it opens the big mark dematerializes into it (--lift is the spring: no transition), gone by --lift .55; the
   site's chrome waits for that (opening.js holds .op-chrome-wait until then) and fades in (chrome.css), so one logo is
   on screen at a time. Without the mark (a skip), the small corner mark hands over to the brand in the same spot */
.op-bg { position: absolute; inset: 0; z-index: 0; }
.opening > :not(.op-bg) { z-index: 1; }
.opening.is-logo.is-lifting .op-logo { opacity: max(0, 1 - var(--lift) * 1.8); transition: none; }   /* only if the mark played */
.opening.is-lifting:not(.is-logo) .op-mark { opacity: max(0, .92 - var(--lift) * 1.8); }
html.op-chrome-wait .brand, html.op-chrome-wait .dock, html.op-chrome-wait .index { opacity: 0; }