/* ============================================================
   GRID LIGHT EFFECT (experimental)
   A soft blue light drifts across a faint sitewide grid, brightening
   the grid lines it passes near. Idle: wanders on its own. Active:
   follows the mouse or a touch.

   TO REMOVE ENTIRELY:
     1. Delete this file (css/grid-light.css)
     2. Delete js/grid-light.js
     3. In each page's <head>, remove the <link> to this file
     4. In each page's <body>, remove the <div class="grid-light-bg">…</div>
        block and the <script src="js/grid-light.js"> tag
   Nothing else references these — no other CSS/JS depends on this file.
   ============================================================ */

.grid-light-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --lx: 50%;
  --ly: 30%;
}

.grid-light-bg .grid-dim,
.grid-light-bg .grid-bright {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(159, 176, 196, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 176, 196, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
}

.grid-light-bg .grid-bright {
  background-image:
    linear-gradient(rgba(180, 205, 235, 0.65) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 205, 235, 0.65) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(circle 240px at var(--lx) var(--ly), rgba(255,255,255,1) 0%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0) 100%);
  mask-image: radial-gradient(circle 240px at var(--lx) var(--ly), rgba(255,255,255,1) 0%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0) 100%);
  transition: opacity 1s ease;
}

.grid-light-bg .glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 210px at var(--lx) var(--ly), rgba(14, 122, 213, 0.32), transparent 70%);
  mix-blend-mode: screen;
  transition: opacity 1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .grid-light-bg .grid-bright,
  .grid-light-bg .glow { display: none; }
}
