/* ==========================================================================
   IT'S HIM — THE VEIL  (smoke page transitions · reusable, self-contained)
   Clicking to another page thickens the ambient smoke until it swallows the
   screen; the next page condenses out of the SAME haze (the smoke texture is
   seeded identically everywhere, so it reads as one continuous cloud).

   TO USE ON ANY PAGE — add these three lines and nothing else:
       <link rel="stylesheet" href="veil.css" />                       (head)
       <script>…veil-enter guard…</script>                             (head)
       <script src="veil.js"></script>                            (end of body)
   veil.js injects its own overlay — no per-page markup required.
   Purely additive: fixed overlay, pointer-events none, no layout impact.
   ========================================================================== */

/* Anti-flash guard: when arriving THROUGH the veil (sessionStorage flag set by
   the tiny inline head script), paint the screen dark before first paint so
   the page never flashes in ahead of the dissolve. veil.js removes this class
   the moment its animated overlay is in place. */
html.veil-enter::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #0E0908;            /* --bg — matches every page's dark base */
  z-index: 2147483000;
}

/* The overlay veil.js injects: a dark base with the smoke canvas above it.
   Sits over EVERYTHING (nav included) — the whole room fills with smoke. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background: #0E0908;
  opacity: 0;                     /* animated by veil.js */
  will-change: opacity;
}

.veil__smoke {
  position: absolute;
  inset: -20%;                    /* generous margin: the stream travels far and
                                     the edges must never enter the frame */
  width: 140%;
  height: 140%;
  display: block;
  /* NO filters, NO blend modes here — the dark base, tiled smoke, and warm
     candlelight grade are all baked into the canvas ONCE per transition
     (see paintSmoke in veil.js). The compositor only moves and fades a
     finished, opaque picture, which is what keeps the stream fluid. */
  will-change: transform;
}

/* Reduced motion: veil.js skips the animation entirely; this is belt-and-braces. */
@media (prefers-reduced-motion: reduce) {
  .veil { display: none !important; }
  html.veil-enter::before { display: none !important; }
}