/* ignicion — the blue front that turns the ink first frame into the hero.
   The critical rules (ink hero, hidden nav / phonetic / h1, the catalyst at the
   viewport centre) are inline in <head>, before styles.css, so the first painted
   frame is already right. This file only owns svg.ignite.

   The held h1 sits at opacity .001, not 0: identical pixels (it rounds to
   nothing at 8 bits on ink, blue and white, forced colours included), but
   Chrome only treats opacity 0 as unpainted, so LCP records the first paint
   instead of T0. What shows it is unchanged: gsap.set(h1, {opacity: 1}) at T0
   on the per-word path, the fromTo from 0 under the front on the fade path.

   svg.ignite is absolute inside .hero (inset 0, z 1): below the catalyst (70) and
   the text layer (75). It has no viewBox, so its user units are hero-local px and
   the script writes one transform on its <use> per frame. It shows only while the
   front runs: html.js.is-igniting (the sequence) + [data-on] (set by the script
   once the first transform is written, so the untransformed mark
   never flashes at the hero's corner). Without JS, with reduced motion or after
   the sequence, it is display:none and the hero is plain CSS blue. */

.ignite {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-ignite);
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  fill: var(--blue);
}

.js.is-igniting .ignite[data-on] { display: block; }

/* ---------- Releases ---------- */
@media (prefers-reduced-motion: reduce) {
  .js.is-igniting .ignite[data-on] { display: none; }
}

@media print {
  .js.is-igniting .ignite[data-on] { display: none; }
}

@media (forced-colors: active) {
  .ignite use { fill: Canvas; }
}