/* ============================================================================
   DECODE · intro.css — the sticky stage, the canvas, and the hero's register.
   Dark Ink tokens only. No colour is stated here that tokens-ink.css does not
   already own, except as an alpha over the bone.
   ========================================================================= */

/* The act. `data-sc-act="pin"` + `data-sc-span` is the engine's own pinned
   device: scrollcraft.js sets the outer height and sticks the first .sc-stage
   child itself, so there is no height declared here. */
#intro { position: relative; background: var(--sc-canvas); }

/* The stage. .sc-stage is the engine's class (position: sticky, top 0,
   100svh); this only adds the layering the intro needs. `overflow: clip` and
   not `hidden`: a hidden ancestor kills sticky positioning, which is the one
   mistake that would silently unpin the whole act. */
.decode-stage {
  overflow: clip;
  display: grid;
  isolation: isolate;
  background: var(--sc-canvas);
}
.decode-stage > * { grid-area: 1 / 1; }

/* The glyph field. One canvas carries the rain, the lattice and the sparkles,
   so the whole intro is a single draw loop and a single composited layer. */
#decode {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* The hero, in register under the rain. It is the real a1 markup; the intro
   only fades it and lets it settle the last hair of a pixel, so the code
   resolves INTO the page instead of being replaced by it. opacity is written
   by intro.js off the act's progress; --decode-in carries the same value so
   the settle can be pure CSS. */
.decode-hero {
  z-index: 1;
  opacity: 0;
  display: grid;
  align-content: center;
  padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem);
  transform: scale(calc(1 + (1 - var(--decode-in, 0)) * 0.012));
  will-change: opacity, transform;
}
.decode-hero .act,
.decode-hero .sheet,
.decode-hero .sheet__fold { min-height: 0; height: auto; padding: 0; margin: 0; }

/* The filler act below, so the scroll has somewhere to land after the intro
   resolves. One line of the page's own type on the page's own ground. */
.decode-after {
  min-height: 100svh;
  display: grid;
  place-content: center;
  padding: clamp(2rem, 8vw, 6rem);
  background: var(--sc-canvas);
}
.decode-after p {
  max-width: 46ch;
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  line-height: 1.38;
  color: var(--sc-ink-soft);
}
.decode-after em { font-style: italic; color: var(--sc-ink); }

/* The prototype's own label, so a screenshot says what it is. */
.decode-tag {
  position: fixed;
  left: clamp(0.8rem, 2vw, 1.6rem);
  bottom: clamp(0.8rem, 2vh, 1.4rem);
  z-index: 9;
  font-family: var(--sc-font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent);
  pointer-events: none;
}

/* REDUCED MOTION: the final state. The canvas is drawn once at p = 1 (a static
   lattice, no rain) and the hero is simply there — no fade, no scale. */
@media (prefers-reduced-motion: reduce) {
  .decode-hero { opacity: 1 !important; transform: none; will-change: auto; }
}

@media (max-width: 760px) {
  .decode-hero { padding: clamp(0.8rem, 3vh, 1.6rem) clamp(0.8rem, 4vw, 1.4rem); }
}