/* ==========================================================================
   intro.css — the intro (v2, 2026-10-13; v1 Home only, 2026-10-09)
   --------------------------------------------------------------------------
   Loaded by every page. The approved P unfolds like paper in five
   panels, then the screen breaks along seams that meet at the mark: six
   paper tiles slide off left and right, a brand-orange layer trails them,
   the P parts in two with them, and the page shows underneath (on Home,
   the hero enters).

   Whether it plays is decided before the first paint by the snippet in
   <head> (html[data-intro]). Without that attribute nothing here applies.
   intro.js runs it and removes #pf-intro when it ends. Record:
   docs/home-intro.md.

   Contents   1 tokens · 2 cover and lock · 3 tiles and seams · 4 the mark ·
              5 the hero waits
   ========================================================================== */

/* ---------- 1. Tokens ------------------------------------------------------- */
.pf-intro {
  --pfi-paper: #F4F3F0;            /* = --ix-paper */
  --pfi-ink: #141210;              /* = --ix-ink, the header P in Light */
  --pfi-back: #5B5650;             /* a panel still turning toward the light */
  --pfi-line: rgb(20 18 16 / 0.22);
  --pfi-tint: var(--flow, hsl(18 100% 62%));   /* the "chat" highlight */
  --pfi-mark: clamp(64px, 6.8vw, 104px);
}
:root[data-theme="dark"] .pf-intro {
  --pfi-paper: #101214;
  --pfi-ink: #ECECEE;
  --pfi-back: #8E8E94;
  --pfi-line: rgb(236 236 238 / 0.2);
}

/* ---------- 2. Cover and lock ----------------------------------------------- */
.pf-intro { display: none; }
html[data-intro] .pf-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483000;            /* above the shared header (80) and everything else */
  background: var(--pfi-paper);   /* covers the page until the tiles exist */
  contain: strict;
  cursor: pointer;
}
html[data-intro] .pf-intro.is-built { background: transparent; }
html[data-intro] { overflow: hidden; }

/* ---------- 3. Tiles and seams ---------------------------------------------- */
/* each tile is its own GPU layer from the first frame: nothing repaints as they move */
.pf-intro-tile { position: absolute; will-change: transform; contain: strict; backface-visibility: hidden; }
.pf-intro-tile.is-tint { background: var(--pfi-tint); }
.pf-intro-tile.is-paper { background: var(--pfi-paper); }
.pf-intro-tile.is-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0.5px var(--pfi-line);
  opacity: 0;
  transition: opacity 150ms linear;
}
html[data-intro="open"] .pf-intro-tile.is-paper::after { opacity: 1; }
.pf-intro-seams { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.pf-intro-seam { position: absolute; background: var(--pfi-ink); opacity: 0.5; will-change: transform; }

/* ---------- 4. The mark ----------------------------------------------------- */
.pf-intro-mark, .pf-intro-half {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pfi-mark);
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.pf-intro-mark path, .pf-intro-half path { fill: var(--pfi-ink); }
/* panels turn on their hinges (user units of the viewBox) */
.pf-intro-mark g { transform-box: view-box; }
.pf-intro-mark [data-fold] { opacity: 0; }
.pf-intro-solid { opacity: 0; }
/* the two halves wait, already rasterised, for the break */
.pf-intro-half { opacity: 0; }
.pf-intro-half[data-half="l"] { clip-path: inset(-2px 50% -2px -2px); }
.pf-intro-half[data-half="r"] { clip-path: inset(-2px -2px -2px 50%); }

/* ---------- 5. The hero waits (Home) ----------------------------------------------- */
/* index.css §11 starts the hero's entrance on html.fonts-ready. While the
   intro covers it, that entrance holds at its first frame; it runs when
   the tiles open (data-intro="open"), so the statement rises into view. */
html[data-intro="play"] .ix-title > span,
html[data-intro="play"] .ix-meta,
html[data-intro="play"] .ix-composer,
html[data-intro="run"] .ix-title > span,
html[data-intro="run"] .ix-meta,
html[data-intro="run"] .ix-composer { animation-play-state: paused; }