/* ════════════════════════════════════════════════════════════
   LBL HERO PARTICLE BURST — event-driven flash
   ────────────────────────────────────────────────────────────
   A canvas overlay behind the hero copy. The particle system
   listens for `lbl:question-change` events on the hero element
   and fires a single rectangular-particle burst per event,
   colored to match that question's lab. Particles fade out
   well before the next question arrives (~2.5s out of 3.6s).

   At rest the canvas is empty — no continuous animation.
   ════════════════════════════════════════════════════════════ */

.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;           /* above .hero::before glow, below content (z-index: 2) */
  pointer-events: none; /* never blocks interaction */
  /* A whisper of blur softens the particle edges into the dark
     background without losing their rectangular character. */
  filter: blur(0.4px);
}

/* On reduced-motion we just don't show the canvas at all —
   the rest of the hero (color wash, fade animations) is gentle
   enough on its own, and the burst is purely decorative. */
@media (prefers-reduced-motion: reduce) {
  .hero-particles { display: none; }
}