/* ═══════════════════════════════════════════════════════════════════════════
   Deltawing Labs — the intro.
   Implements DW-WEB-002 / REV A ("Intro Options.dc.html"), the approved cut:
   desktop runs the aperture reveal, mobile runs the same sequence at the
   mobile mark size. Scenes and easing are ported from reveal.jsx.

   The mechanism, from the sheet: the mark's INNER triangle is not a shape, it
   is a window. It starts smaller than the mark itself and grows until it has
   cleared the viewport, and what shows through it is the page. Nothing is
   duplicated — the site itself is behind the hole.

   Three layers, bottom to top:
     __cover   opaque ground; hides the page until the Expand scene lifts it
     __ground  the same ground with the triangular hole punched through it
     __mark    the solid mark, drawn on top, fading out as the hole takes over

   The whole thing is gated on `html.dw-intro-on`, which intro.js sets. With
   scripting off, blocked, or reduced-motion, the class never lands and the
   markup stays display:none — the page is simply there.
   ═══════════════════════════════════════════════════════════════════════════ */

.dw-intro { display: none; }

.dw-intro-on .dw-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;          /* over the nav (100) and the grain (90) */
  pointer-events: none;  /* the page stays clickable; skipping is on window */
}

.dw-intro__cover,
.dw-intro__ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The mark's box is written by intro.js every frame — no inset here, or the
   shorthand would fight the left/top it sets. */
.dw-intro__mark {
  position: absolute;
  display: block;
}

/* Sheet 1B-D opens inverted: bone ground, ink mark, onto the dark page. */
.dw-intro__cover { background: #f4f1ea; }

/* Both start blank. The ground's path and the mark's box are written by
   intro.js on the first frame; until then the mark must not render at the
   element's full 100%×100% box, which would be a viewport-sized triangle. */
.dw-intro__mark { opacity: 0; }

/* The last 250ms — the overlay is already clear of the viewport by then; this
   only catches the residue and the skip. */
.dw-intro--out {
  opacity: 0;
  transition: opacity 250ms cubic-bezier(.2, 0, 0, 1);
}

/* The page is held still while the aperture is open. Released the moment the
   sequence ends or is skipped. */
.dw-intro-on body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dw-intro { display: none !important; }
  .dw-intro-on body { overflow: visible; }
}