/* ════════════════════════════════════════════════════════════
   FINCALCS HERO LATTICE — Hex grid + cursor ripple
   ────────────────────────────────────────────────────────────
   A canvas overlay BEHIND the hero content. Renders a
   honeycomb lattice of teal 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 fixed to the hero's bounding box, pointer-events
   disabled so it never blocks clicks on the rotator / search /
   CTAs that sit above it.
   ════════════════════════════════════════════════════════════ */

/* Make the hero section a positioning context for the canvas.
   .hp-hero-v51 was previously `position: static` — adding
   relative here so our absolute-positioned canvas anchors to
   the hero, not the page. No visible side-effects. */
.hp-hero-v51 {
  position: relative;
  overflow: hidden;  /* clip ripple displacements that drift past the edge */
}

.hp-hero-lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;           /* behind all hero content (which is implicit z-auto) */
  pointer-events: none; /* never block clicks on rotator/search/CTAs */
}

/* Ensure hero content sits ABOVE the canvas. The grid is the
   hero's direct child — z-index 1 puts it above z-index 0 canvas. */
.hp-hero-v51-grid {
  position: relative;
  z-index: 1;
}

/* Reduced-motion: hide entirely. The hero already has plenty
   of visual interest (rotator, search, decision cards). */
@media (prefers-reduced-motion: reduce) {
  .hp-hero-lattice { display: none; }
}