/* factgate — cinematic landing. Zero-dep, static. Tokens from design/COMMIT-SHEET.md.
   auteur-allow: RULE_7 -- the 01–05 act kickers ARE a real narrative sequence (a film's acts),
   not decorative section scaffolding; the numbering is load-bearing. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0B0F14;
  --surface: #131A22;
  --border:  #223041;
  --text:    #E6EDF3;
  --muted:   #93A1B0;   /* lifted from #8B98A5 for AA on tinted panels */
  --pass:    #3FB950;
  --fail:    #F85149;
  --warn:    #D29922;
  --accent:  #58A6FF;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 15px; line-height: 1.6; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; }   /* clip, NOT hidden — hidden creates a scroll container and breaks position:sticky (the gate peak) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
b { font-weight: 600; }
::selection { background: color-mix(in srgb, var(--pass) 30%, transparent); }

/* ── the grid backdrop (subtle, cool) ── */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(transparent 0, transparent calc(100% - 1px), color-mix(in srgb, var(--border) 45%, transparent) 100%) 0 0 / 100% 46px,
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), color-mix(in srgb, var(--border) 45%, transparent) 100%) 0 0 / 46px 100%;
  mask: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 78%); }

/* ── progress rail + act chip ── */
.rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; background: color-mix(in srgb, var(--border) 60%, transparent); }
.rail-fill { display: block; height: 100%; width: 0; background: var(--pass); box-shadow: 0 0 10px var(--pass); transition: width .12s linear; }
.act-chip { position: fixed; top: 14px; right: 16px; z-index: 40; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .06em; color: var(--muted); background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border); border-radius: 4px; padding: .28rem .6rem; backdrop-filter: blur(6px); }
.act-chip b { color: var(--text); text-transform: uppercase; }

/* ── scene shell ── */
.scene { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 6rem 1.5rem; overflow: hidden; }
.wrap { position: relative; z-index: 3; width: 100%; max-width: 900px; margin: 0 auto; }
.scene .bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); }
.scene.in .bg { opacity: .34; transform: scale(1); }
.scene .bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 50%, transparent 30%, var(--bg) 92%), linear-gradient(180deg, var(--bg), transparent 22%, transparent 78%, var(--bg)); }

/* reveal primitives (each act overrides distance/direction) */
.eyebrow, .kicker, .hero-title, .hero-sub, .scrollcue, .claim, .claim-rce, .meta, .tell,
.query, .ledger, .gate-title, .gate-note, .term, .proof-foot, .call-title, .cmd, .pills, .call-link, .creed {
  opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.scene.in .eyebrow, .scene.in .kicker, .scene.in .hero-title, .scene.in .hero-sub, .scene.in .scrollcue,
.scene.in .claim, .scene.in .claim-rce, .scene.in .meta, .scene.in .tell, .scene.in .query, .scene.in .ledger,
.scene.in .gate-title, .scene.in .gate-note, .scene.in .term, .scene.in .proof-foot,
.scene.in .call-title, .scene.in .cmd, .scene.in .pills, .scene.in .call-link, .scene.in .creed {
  opacity: 1; transform: none; }
.scene.in [style*="--d"] { transition-delay: var(--d); }

.kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.4rem; }

/* ════ INTRO ════ */
.intro { text-align: center; }
.eyebrow { font-family: var(--mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.6rem; }
.eyebrow .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--pass); box-shadow: 0 0 8px var(--pass); vertical-align: middle; margin-right: .5rem; }
.hero-title { font-family: var(--mono); font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 700; letter-spacing: -.04em; line-height: .95; display: flex; align-items: center; justify-content: center; gap: .28em; }
.hero-title .mark { width: .62em; height: .62em; background: var(--pass); box-shadow: 0 0 24px color-mix(in srgb, var(--pass) 60%, transparent); animation: markpulse 3.4s var(--ease) infinite; }
@keyframes markpulse { 0%,100% { opacity: .82; } 50% { opacity: 1; box-shadow: 0 0 34px var(--pass); } }
.hero-sub { max-width: 620px; margin: 1.6rem auto 0; color: var(--muted); font-family: var(--mono); font-size: .96rem; line-height: 1.7; }
.hero-sub b { color: var(--text); }
.scrollcue { margin-top: 3.4rem; font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.scrollcue .arw { display: inline-block; margin-left: .5rem; animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ════ THE LIE ════ */
.lie-k { color: var(--fail); }
.claim { font-family: var(--mono); font-size: clamp(1.8rem, 5.2vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.lie .cve { color: var(--fail); text-shadow: 0 0 22px color-mix(in srgb, var(--fail) 55%, transparent); }
.lie .crit { color: var(--fail); } .lie .sev { color: var(--muted); font-size: .5em; font-weight: 400; vertical-align: middle; }
.claim-rce { margin-top: .8rem; font-family: var(--mono); font-size: 1.02rem; color: color-mix(in srgb, var(--fail) 40%, var(--text)); }
.meta { margin-top: 1.6rem; font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.meta b { color: var(--text); font-weight: 500; } .meta .crit { color: var(--fail); }
.cur { display: inline-block; width: 9px; height: 1.05em; background: var(--fail); vertical-align: -2px; margin-left: 6px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tell { margin-top: 2.2rem; max-width: 560px; font-size: 1.02rem; color: var(--text); line-height: 1.7; }
.tell b.fail-t { color: var(--fail); }

/* ════ THE DOUBT ════ (asymmetric: query left-weighted, not centered) */
.doubt .wrap { max-width: 820px; }
.decay { position: absolute; inset: 0; z-index: 1; opacity: .5; pointer-events: none; }
.query { margin-top: .4rem; font-family: var(--mono); }
.req, .res { font-family: var(--mono); font-size: clamp(.72rem, 1.9vw, .92rem); line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 8px 8px 0 0; padding: 1rem 1.1rem; }
.res { border-top: none; border-radius: 0 0 8px 8px; }
.q-verb { color: var(--accent); font-weight: 700; } .q-cve { color: var(--fail); }
.r-status { color: var(--muted); } .r-zero { color: var(--warn); font-weight: 700; } .r-none { color: var(--fail); }
.doubt .tell { margin-top: 2rem; }

/* ════ THE GATE (peak, pinned) ════ */
.gate { padding: 0; display: block; height: 320vh; overflow: visible; }   /* overflow:visible — a clipping parent breaks the sticky pin; the images clip inside .gate-sticky instead */
.gate-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
/* two real keyframes, cross-faded by scroll (--m 0→1): amber "scanning" → green "PASS".
   robust everywhere — no WebGL fragility, renders identically on every GPU. */
.gate-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.gate-img-a { opacity: .5; }
.gate-img-b { opacity: calc(var(--m, 0) * .62); }
.gate-scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gate-scan::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: calc(var(--m, 0) * 100%);
  background: var(--pass); box-shadow: 0 0 22px 2px var(--pass); opacity: calc(.75 - var(--m, 0) * .55); }
.gate-sticky::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--bg) 8%, color-mix(in srgb, var(--bg) 55%, transparent) 44%, transparent 72%); }
.gate-status { position: absolute; top: 8vh; left: max(1.5rem, calc(50vw - 450px)); z-index: 3; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); border-radius: 4px; padding: .3rem .7rem; background: color-mix(in srgb, var(--surface) 70%, transparent); transition: color .4s, border-color .4s; }
.gate-status.passed { color: var(--pass); border-color: color-mix(in srgb, var(--pass) 55%, var(--border)); }
.gs-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: .5rem; box-shadow: 0 0 8px currentColor; vertical-align: middle; }
.gate-wrap { max-width: 900px; }
.gate-k { color: var(--accent); }
.gate-title { font-family: var(--mono); font-size: clamp(2rem, 5.6vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; text-transform: lowercase; }
.ledger { margin-top: 1.6rem; max-width: 640px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; backdrop-filter: blur(4px); }
.ledger-bar { padding: .55rem .9rem; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.ledger-rows { list-style: none; }
.lrow { display: flex; align-items: center; gap: 1rem; padding: .62rem .9rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  opacity: 0; transform: translateX(-8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.gate-sticky.rows-in .lrow { opacity: 1; transform: none; }
.gate-sticky.rows-in .lrow[data-i="1"] { transition-delay: .09s; } .gate-sticky.rows-in .lrow[data-i="2"] { transition-delay: .18s; }
.gate-sticky.rows-in .lrow[data-i="3"] { transition-delay: .27s; } .gate-sticky.rows-in .lrow[data-i="4"] { transition-delay: .36s; }
.l-claim { flex: 1; font-family: var(--mono); font-size: .8rem; color: var(--text); }
.l-verdict { font-family: var(--mono); font-size: .68rem; font-weight: 700; padding: .16rem .5rem; border-radius: 3px; border: 1px solid; white-space: nowrap; }
.l-verdict.pass { color: var(--pass); border-color: var(--pass); background: color-mix(in srgb, var(--pass) 10%, transparent); }
.l-verdict.fail { color: var(--fail); border-color: var(--fail); background: color-mix(in srgb, var(--fail) 10%, transparent); }
.ledger-stamp { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .6rem .9rem; }
.ls-exit { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.ls-stamp { font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: .18rem .7rem; transition: color .5s, border-color .5s, box-shadow .5s; }
.gate-sticky.passed .ls-stamp { color: var(--pass); border-color: var(--pass); box-shadow: 0 0 18px color-mix(in srgb, var(--pass) 45%, transparent); }
.gate-note { margin-top: 1.4rem; max-width: 560px; font-family: var(--mono); font-size: .8rem; color: var(--muted); line-height: 1.7; }
.gate-note b { color: var(--text); }

/* ════ THE PROOF (grid break: full-bleed receipt tape) ════ */
.proof { background: color-mix(in srgb, var(--surface) 40%, var(--bg)); }
.proof .wrap { max-width: 1180px; }
.term { margin-top: 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 80px -40px #000; }
.term-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--border); }
.term-cmd { font-family: var(--mono); font-size: .82rem; color: var(--text); } .term-cmd .ps { color: var(--pass); }
.term-tag { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.term-out { font-family: var(--mono); font-size: clamp(.62rem, 1.35vw, .8rem); line-height: 1.75; padding: 1.1rem 1.2rem; color: var(--text); white-space: pre; overflow-x: auto; min-height: 15em; }
.term-out .k { color: var(--accent); } .term-out .ok { color: var(--pass); } .term-out .bad { color: var(--fail); } .term-out .mut { color: var(--muted); } .term-out .info { color: var(--muted); }
.term-verdict { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; border-top: 1px solid var(--pass); background: color-mix(in srgb, var(--pass) 6%, transparent); }
.tv-stamp { font-family: var(--mono); font-weight: 700; color: var(--pass); border: 1px solid var(--pass); border-radius: 4px; padding: .18rem .7rem; box-shadow: 0 0 14px color-mix(in srgb, var(--pass) 35%, transparent); }
.tv-exit { font-family: var(--mono); font-size: .78rem; color: var(--muted); } .tv-what { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin-left: auto; }
.proof-foot { margin-top: 1.5rem; max-width: 720px; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.src { font-family: var(--mono); font-size: .82em; color: var(--pass); border: 1px solid color-mix(in srgb, var(--pass) 30%, var(--border)); border-radius: 3px; padding: 0 .35em; margin: 0 .1em; }

/* ════ THE CALL ════ */
.call { text-align: center; }
.call-bg::after { background: radial-gradient(80% 70% at 50% 45%, transparent 20%, var(--bg) 88%); }
.call-title { font-family: var(--mono); font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 700; letter-spacing: -.03em; text-transform: lowercase; }
.call-title .accent { color: var(--pass); text-shadow: 0 0 26px color-mix(in srgb, var(--pass) 45%, transparent); }
.cmd { margin: 2.2rem auto 0; max-width: 760px; display: flex; align-items: center; gap: .7rem; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; font-family: var(--mono); font-size: clamp(.66rem, 1.7vw, .86rem); }
.cmd .ps { color: var(--pass); } .cmd code { color: var(--text); flex: 1; overflow-x: auto; white-space: nowrap; }
.copy { flex-shrink: 0; font-family: var(--mono); font-size: .72rem; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: .24rem .7rem; cursor: pointer; transition: color .12s, border-color .12s; }
.copy:hover { color: var(--accent); border-color: var(--accent); }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.6rem 0 0; }
.pill { font-family: var(--mono); font-size: .72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: .24rem .7rem; }
.pill.pass-p { color: var(--pass); border-color: color-mix(in srgb, var(--pass) 40%, var(--border)); }
.pill.amber-p { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.call-link { margin-top: 1.8rem; font-family: var(--mono); font-size: 1rem; }
.creed { margin-top: 2.4rem; font-family: var(--mono); font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
.creed span { color: var(--pass); }

/* ── footer ── */
footer { border-top: 1px solid var(--border); padding: 2.2rem 1.5rem; text-align: center; }
footer p { font-family: var(--mono); font-size: .82rem; color: var(--muted); } footer b { color: var(--text); }
.fp { color: var(--border); margin: 0 .5rem; } .foot-sub { margin-top: .5rem; font-size: .72rem; }

/* ── responsive ── */
@media (max-width: 720px) {
  .scene { padding: 5rem 1.2rem; }
  .gate { height: 240vh; } .gate-sticky::after { background: linear-gradient(180deg, transparent 30%, var(--bg) 96%); }
  .gate-status { left: 1.2rem; }
  .cmd code { white-space: normal; word-break: break-all; }
}

/* ── reduced motion: a calmer cut of the same film ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .scene .bg { opacity: .3; transform: none; }
  .eyebrow, .kicker, .hero-title, .hero-sub, .scrollcue, .claim, .claim-rce, .meta, .tell,
  .query, .ledger, .gate-title, .gate-note, .term, .proof-foot, .call-title, .cmd, .pills, .call-link, .creed,
  .lrow { opacity: 1 !important; transform: none !important; }
  .gate { height: auto; } .gate-sticky { position: relative; height: auto; min-height: 100vh; padding: 6rem 1.5rem; }
  .gate-img-a { display: none; } .gate-img-b { opacity: .45 !important; } .gate-scan { display: none; }
  .gate-sticky.rows-in .lrow, .gate .lrow { opacity: 1 !important; transform: none !important; }
  .gate-status.passed, .gate-sticky .ls-stamp { color: var(--pass); }
}