/* ===========================================================================
   THE BODY — section transitions (js/haze.js, gates placed by scripts/site_haze.py).
   A zero-height .haze-gate marks each key seam. While a seam is busy, js/haze.js
   places a small WebGL canvas (.haze-veil) INSIDE the gate, centred on the seam,
   so the billowing steam scrolls natively with the page; the bank parts from the
   middle to both sides as the next section arrives.
   The old CSS wisp layers (<i class="h1/h2">) are no longer drawn.
   =========================================================================== */
.haze-gate { position: relative; height: 0; z-index: 5; pointer-events: none; }
.haze-gate > i { display: none; }

/* height + top are set by haze.js (bank height depends on the viewport) */
.haze-veil {
  position: absolute; left: 0; width: 100%;
  pointer-events: none; display: block;
}

/* verification shots (?static) and reduced motion: no haze at all */
.haze-off .haze-veil { display: none; }
@media (prefers-reduced-motion: reduce) { .haze-veil { display: none; } }