/* ============================================
   HERO FLOW — message-flow canvas background
   Abstract visualization: message dots born on
   the left pass through 3 soft router nodes and
   fan out into 3 channels on the right.
   Painted by js/hero-flow.js (self-init, no-op
   without a #hero-flow canvas).
   ============================================ */

/* Stacking context is .hero (position: relative).
   Paint order inside .hero:
     .hero::before  (z auto, first in tree)  — gradient mesh
     #hero-flow     (z-index: 0)             — this canvas
     .hero::after   (z-index: 0, painted after children) — noise overlay
     .hero-content  (z-index: 1)             — text, always on top */
#hero-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Reduced motion: the JS is a full no-op, but hide the (empty) canvas
   too so no stale frame can ever linger if the preference flips. */
@media (prefers-reduced-motion: reduce) {
  #hero-flow {
    display: none;
  }
}