/* ============================================================
   Cursor-reactive grid background (shared across pages).
   Markup is injected by js/fx.js; sits behind content.
   ============================================================ */
.fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
}
.fx-glowgrid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(15, 217, 160, 0.65) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 217, 160, 0.65) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(200px circle at var(--mx, -200px) var(--my, -200px), #000 0%, rgba(0,0,0,0.4) 40%, transparent 72%);
          mask-image: radial-gradient(200px circle at var(--mx, -200px) var(--my, -200px), #000 0%, rgba(0,0,0,0.4) 40%, transparent 72%);
  opacity: 0; transition: opacity 0.45s ease;
}
.fx-spot {
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, -200px) var(--my, -200px), rgba(15, 217, 160, 0.12), rgba(15, 217, 160, 0.04) 35%, transparent 68%);
  opacity: 0; transition: opacity 0.45s ease;
}
body.fx-on .fx-glowgrid, body.fx-on .fx-spot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-glowgrid, .fx-spot { display: none; } }