/* ============================================================
   MOMENTUS — hero concepts · shared layer
   Tokens + the three LOCKED text grammars (verbatim from style.css)
   + poster chrome + stage-line scaffolding, shared by concept-a / concept-c.
   ASCII / line-vector = the AI layer.  Painted artwork = the human layer.
   ============================================================ */
:root {
  --c-bg:      #f8f6f1;   /* paper */
  --c-fg:      #14120e;   /* ink */
  --c-accent:  #ee382b;   /* letude red */
  --slab:      #121110;   /* near-black machine field */
  --bone:      #f1ebdd;

  --type-display: 'Hanken Grotesk', system-ui, sans-serif;
  --type-em:      'Instrument Serif', Georgia, serif;
  --type-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --ease-entrance: cubic-bezier(0.2, 0.9, 0.25, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--type-display);
  color: var(--c-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }

/* ============================================================
   LOCKED GRAMMARS (entry verbatim from style.css; exit = the mirror)
   sans  → .ln-in line-rise (translateY 118% behind a mask)
   serif → [data-wipe] clip-path sweep
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* SANS — line-by-line rise; parent held hidden until JS splits the lines */
  [data-lines] { opacity: 0; }
  [data-lines].is-split { opacity: 1; }
  [data-lines] .ln { display: block; overflow: hidden; padding-bottom: 0.08em; }
  [data-lines] .ln-in {
    display: block;
    transform: translateY(118%);
    transition: transform 1000ms var(--ease-entrance);
    will-change: transform;
  }
  [data-lines].is-in  .ln-in { transform: none; }
  /* EXIT — the riser lifts up and out behind the same mask */
  [data-lines].is-out .ln-in { transform: translateY(-118%); }

  /* SERIF — clip wipe left→right (held-slow start, decisive pickup) */
  [data-wipe] {
    clip-path: inset(-6% 101% -14% -5%);
    transition: clip-path 1300ms cubic-bezier(0.85, 0, 0.2, 1);
    will-change: clip-path;
  }
  [data-wipe].is-in  { clip-path: inset(-6% -5% -14% -5%); }
  /* EXIT — the sweep closes back out to the left */
  [data-wipe].is-out { clip-path: inset(-6% -5% -14% 101%); }

  /* single-block rise + fade (wordmark / cta / credits) */
  [data-rise] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 820ms var(--ease-entrance), transform 820ms var(--ease-entrance);
    will-change: opacity, transform;
  }
  [data-rise].is-in  { opacity: 1; transform: none; }
  [data-rise].is-out { opacity: 0; transform: translateY(-22px); }
}

/* ============================================================
   SCENE + PIN
   ============================================================ */
.scene {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ============================================================
   POSTER CHROME (nav rail · tagline · wordmark · credits)
   ============================================================ */
.poster {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 3vw, 40px);
  pointer-events: none;
}
.poster a { pointer-events: auto; }

.rail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 12px/1 var(--type-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rail nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.rail nav a { opacity: 0.7; transition: opacity var(--ease-entrance) 220ms; }
.rail nav a:hover { opacity: 1; }

.poster-mid { margin-top: auto; }

.tag {
  font: 400 clamp(20px, 2.4vw, 30px)/1.15 var(--type-display);
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.tag i { font-family: var(--type-em); font-style: italic; }

.wm {
  margin-top: clamp(10px, 1.6vh, 22px);
  width: 100%;
}
.wm svg { width: min(94vw, 1180px); height: auto; display: block; }
.hwm-back  { font-family: 'Anton', var(--type-display); }
.hwm-front { font-family: var(--type-em); font-style: italic; }

.credits {
  margin-top: clamp(12px, 2vh, 26px);
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 var(--type-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ============================================================
   STAGE LINES — the thesis, one beat per scroll checkpoint
   ============================================================ */
.stage-lines {
  position: absolute;
  z-index: 7;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 880px);
  text-align: center;
  pointer-events: none;
}
.stage-line {
  position: absolute;
  left: 0;
  width: 100%;
  font: 500 clamp(26px, 3.6vw, 52px)/1.16 var(--type-display);
  letter-spacing: -0.018em;
}
.stage-line .em {
  font-family: var(--type-em);
  font-style: italic;
  font-weight: 400;
}

/* placeholder marker — reminds during review that real renders are pending */
.render-tag {
  position: absolute;
  z-index: 8;
  bottom: clamp(14px, 2.4vw, 26px);
  right: clamp(14px, 2.4vw, 26px);
  font: 500 10px/1 var(--type-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 600ms var(--ease-entrance);
  pointer-events: none;
}

/* fail-open / reduced-motion: never leave text invisible */
.reduce [data-lines],
.reduce [data-wipe],
.reduce [data-rise] { opacity: 1 !important; clip-path: none !important; }
.reduce [data-lines] .ln-in { transform: none !important; }