/* ============================================================
   Hero Background Animation — Animated Grid Pattern
   Standalone CSS — loaded only on the home page via @section Head
   ============================================================ */

/* Positioning context for the overlay */
.hero-outer {
  position: relative;
}

/* Overlay container injected by hero-bg-animation.js */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  top: -50%;
  height: 200%;
  pointer-events: none;
  z-index: 0;
  transform: skewY(-12deg);
  transform-origin: center center;

  /* Radial fade so edges dissolve smoothly */
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
}

/* Ensure hero content sits above the overlay */
.hero-outer .container {
  position: relative;
  z-index: 1;
}

/* ── Light mode colors ── */
html.light .hero-grid-overlay {
  --grid-stroke: rgba(10, 37, 64, 0.08);
  --grid-fill: rgba(10, 37, 64, 0.18);
}

/* ── Dark mode colors ── */
html.dark .hero-grid-overlay {
  --grid-stroke: rgba(255, 255, 255, 0.06);
  --grid-fill: rgba(59, 130, 246, 0.25);
}

/* Smooth transition when toggling dark/light mode */
.hero-grid-overlay svg {
  transition: stroke 350ms, fill 350ms;
}

/* ── Accessibility: respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .hero-grid-overlay {
    display: none;
  }
}