/* ════════════════════════════════════════════════════════════
   PIVOTRESET HERO LATTICE — Hex grid + cursor ripple
   ────────────────────────────────────────────────────────────
   A canvas overlay BEHIND the .mag-hero content. Renders a
   honeycomb lattice of burnt-orange dots that:
     · breathe gently and host a slow drifting wave at rest
     · push outward in radial ripples following cursor movement
     · slowly relax back to home (~30s) after cursor leaves

   The canvas is pinned to the hero's bounding box, pointer-events
   disabled so it never blocks clicks on the headline / CTAs.

   Family rhyme with FinCalcs and LBL: same lattice mechanic,
   different host. PivotReset uses single-color orange (vs
   FinCalcs single-teal, LBL four-lab colors).
   ════════════════════════════════════════════════════════════ */

/* Make .mag-hero a positioning context for the absolute canvas.
   It was previously `padding only` — adding relative + overflow
   here so the canvas anchors correctly and ripple displacements
   that drift past edges get clipped. No visible side effects. */
.mag-hero {
  position: relative;
  overflow: hidden;
}

.mag-hero-lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;           /* behind all hero content */
  pointer-events: none; /* never block clicks on headline, CTAs */
  /* style.css applies `canvas{max-height:250px}` in its mobile
     media query (for Chart.js charts). That rule clips the
     lattice on small screens — we override it here so the
     lattice always fills the full hero height. */
  max-height: none !important;
}

/* Ensure mag-inner content sits ABOVE the canvas. */
.mag-hero .mag-inner {
  position: relative;
  z-index: 1;
}

/* On reduced-motion: hide entirely. The editorial design is
   plenty intentional without animated decoration. */
@media (prefers-reduced-motion: reduce) {
  .mag-hero-lattice { display: none; }
}