/* A decorative light layer, aligned with the existing 80px grid. */
.reactive-grid { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 450ms ease; }
.reactive-grid--viewport { position: fixed; z-index: -1; }
.reactive-grid[data-active] { opacity: 1; }
.reactive-grid::before, .reactive-grid::after { content: ""; position: absolute; inset: 0; }
.reactive-grid::before {
  opacity: var(--grid-strength,.5);
  background: radial-gradient(calc(var(--grid-radius,195px) * 1.35) circle at var(--grid-x,-999px) var(--grid-y,-999px), rgba(51,255,102,.09), rgba(51,255,102,.025) 45%, transparent 82%);
}
.reactive-grid::after {
  opacity: var(--grid-strength,.5);
  background:
    radial-gradient(circle at 40px 40px, rgba(170,255,190,.8) .7px, rgba(51,255,102,.25) 1.8px, transparent 4px) -39.5px -39.5px / 80px 80px,
    linear-gradient(rgba(51,255,102,.28) 1px, transparent 1px) 0 0 / 100% 80px,
    linear-gradient(90deg, rgba(51,255,102,.28) 1px, transparent 1px) 0 0 / 80px 100%;
  mask-image: radial-gradient(var(--grid-radius,195px) circle at var(--grid-x,-999px) var(--grid-y,-999px), #000, rgba(0,0,0,.55) 38%, transparent 82%);
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .reactive-grid { display: none; transition: none; } }