/* =============================================================================
   MAGI MACHINA — Hero: washi white, a living ASCII sea in ultramarine,
   a few quiet lines of text. Nothing else moves.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

/* faint wash of the accent, top of the page */
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 50% at 50% 0%,
    color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%);
}

/* --- The sea: full-bleed living ASCII, anchored to the bottom ---------------- */
.hero__sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* the sea owns the lower half only: the promise gets calm paper, and the
     next section peeks under the fold */
  height: 45svh;
  z-index: 0;
  font-size: clamp(5px, 0.56vw, 8.5px);
  font-weight: 500;
  line-height: 1.04;
  overflow: hidden;
  cursor: crosshair;
  contain: layout style paint;
  /* the hero sea keeps its true halo — the one field worth the paint
     cost; the adaptive governor is the safety net */
  text-shadow: var(--glow-strong);
}
:root[data-theme="dark"] .hero__sea {
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(124, 134, 255, 0.65))
          drop-shadow(0 0 28px rgba(90, 102, 255, 0.35));
}
:root[data-theme="magi"] .hero__sea {
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(61, 255, 115, 0.6))
          drop-shadow(0 0 26px rgba(61, 255, 115, 0.3));
}

/* the hero's grain veil rides above the sea (0), below the content (3) */
.hero .grain-veil { z-index: 2; }

/* --- Frame: one quiet strip under the header, the water below ------------------ */
.hero__frame {
  position: relative;
  z-index: var(--z-hero-content);
  min-height: 100svh;
  padding-top: 6rem;              /* readout strip right under the header   */
  pointer-events: none;           /* let the cursor reach the sea…          */
}
.hero__frame a,
.hero__block {
  pointer-events: auto;           /* …except on real content                */
}

.hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(var(--sp-3), 3vw, var(--sp-6));
}
.hero__name > svg {
  display: block;
  width: clamp(200px, 22vw, 300px);
  height: auto;
  color: var(--ink);
}
/* readout + paragraph block, resting above the waterline */
.hero__block {
  position: absolute;
  left: 0;
  top: max(9rem, 18svh);   /* clears the fixed header with real air */
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.hero__lead {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: min(26rem, 100%);
}
/* the home lead now sits low enough to touch the water: same letter-hugging
   paper knockout as the hero links, invisible over plain paper. Wider measure
   than the sub-heroes so it costs one line less above the waterline. */
.hero:not(.hero--sub) .hero__lead {
  max-width: min(34rem, 100%);
  text-shadow: 0 0 3px var(--paper), 0 0 10px var(--paper);
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* Eyebrow (inner pages) */
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--glow-soft);
}

/* =============================================================================
   Secondary hero (inner pages) — short, quiet, paper.
   ========================================================================== */
.hero--sub { min-height: 46svh; }
.hero--sub .hero__frame {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 46svh;
  padding-bottom: var(--sp-5);
}
.hero--sub .hero__title {
  grid-row: 2;
  max-width: 52rem;
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  text-align: left;
}
.hero--sub .hero__name {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
.hero--sub .hero__lead {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--ink-soft);
  max-width: min(38rem, 100%);
}
/* dossier marker, top right — on the shell's right edge, the same vertical
   as the language pill above it (the negative margin eats the trailing
   letter-spacing, so the last glyph, not its spacing, meets the edge) */
.hero--sub::after {
  content: attr(data-file);
  position: absolute;
  top: clamp(4.5rem, 12vh, 6.5rem);
  right: max(var(--gutter), (100% - var(--content-max)) / 2);
  margin-right: -0.26em;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  pointer-events: none;
}

/* =============================================================================
   Entrance — the page comes into focus once. The title's words rise out of the
   blur one after another (noise → signal), then the lead, the proof, the calls
   to action; the sea fades in beneath. JS says when the text is final
   (html.mm-ready: i18n applied, title split) and adds .mm-intro for the
   duration of the entrance only, so a language switch never replays it.
   Late boots (slow network, background tab) get .mm-late: no entrance at all.
   If JS never comes, the failsafe shows everything at 2.5 s (and <noscript>
   at once). The title itself never moves: its words do.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html:not(.mm-ready) :is(.hero__links, .hero__block > *, .hero--sub .hero__title > *) {
    opacity: 0;
    animation: mm-failsafe 0s 2.5s forwards;
  }
  @keyframes mm-failsafe { to { opacity: 1; } }

  .mm-intro :is(.hero__links, .hero__block > *, .hero--sub .hero__title > *) {
    animation: mm-rise var(--dur-l) var(--ease) backwards;
    animation-delay: var(--d, 0ms);
  }
  .mm-intro :is(.hero__h1, .hero--sub .hero__name).is-split { animation: none; }
  .mm-intro .is-split .w {
    animation: mm-word var(--dur-l) var(--ease) backwards;
    animation-delay: calc(var(--w0, 120ms) + var(--i, 0) * 28ms);
  }
  /* home: wordmark, title words, lead, proof, then the calls to action */
  .hero__block > .hero__lead  { --d: 480ms; }
  .hero__block > .hero__proof { --d: 560ms; }
  .hero__links                { --d: 640ms; }
  /* inner pages: eyebrow, title words, lead, actions (404) */
  .hero--sub .hero__title > :nth-child(2) { --d: 60ms; --w0: 90ms; }
  .hero--sub .hero__title > :nth-child(3) { --d: 400ms; }
  .hero--sub .hero__title > :nth-child(4) { --d: 500ms; }

  @keyframes mm-rise { from { opacity: 0; translate: 0 12px; filter: blur(6px); } }
  @keyframes mm-word { from { opacity: 0; translate: 0 0.4em; filter: blur(8px); } }

  .hero__sea {
    opacity: 0;
    animation: mm-fade 1.4s var(--ease-fade) 0.3s forwards;
  }
  @keyframes mm-fade { to { opacity: 1; } }
}
/* split titles: each word is its own box so it can rise; the accent phrase
   (hero.h1.accent) takes the blue and wraps like normal text */
.is-split .w { display: inline-block; }
.hero__accent { color: var(--accent); text-shadow: 0 0 3px var(--paper), 0 0 10px var(--paper), var(--glow-soft); }

@media (max-width: 860px) {
  /* full-bleed like desktop (top:4.5rem → bottom:0); a chunkier grid so
     the row cap still covers a tall phone screen */
  .hero__sea { font-size: 5.5px; }
  /* the gap is the floor: on a short phone screen (browser bars showing)
     the auto margin below collapses and the links would touch the name */
  .hero__frame { display: flex; flex-direction: column; gap: clamp(var(--sp-5), 7svh, var(--sp-6)); }
  .hero__top { flex-direction: column; gap: var(--sp-4); }
  .hero__links { padding-top: 0; }
  /* the name + lead rest above the HIGHEST possible crest, not the
     resting waterline — water 30 rows + crest 12 + swell ≈ 280 px max */
  .hero__block {
    position: static;
    margin-top: auto;
    margin-bottom: max(40svh, 320px);
  }
}

/* The promise, in plain language, right under the wordmark. The paper
   knockout keeps it legible if the spray ever climbs this high; over plain
   paper it is invisible. */
.hero__h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.14;
  max-width: min(30ch, 100%);
  color: var(--ink);
  text-shadow: 0 0 3px var(--paper), 0 0 10px var(--paper);
}
.hero__proof {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: min(30rem, 100%);
  text-shadow: 0 0 3px var(--paper), 0 0 10px var(--paper);
}