/* ============================================================================
   THE BACKGROUND — Spotlight on grid.  LOCKED.
   ----------------------------------------------------------------------------
   Chosen over Vanta Fog, Lottie soft fields and Squares. Fog looked best but
   cost ~628 KB of three.js and ran WebGL continuously; this is GSAP only,
   ~72 KB, and nothing draws when motion is reduced.

   Every colour is a token, so it follows the accent and flips with the mode —
   the grid rides on --ink, the spotlight on --accent, the vignette on --bg.

   Markup is one line; background.js injects the layers:

       <div class="bg" id="bg" aria-hidden="true"></div>
   ============================================================================ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.bg .grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgb(var(--ink-rgb) / .11) 1px,transparent 1px),
                   linear-gradient(90deg,rgb(var(--ink-rgb) / .11) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 32%,#000 8%,transparent 68%);
          mask-image:radial-gradient(ellipse at 50% 32%,#000 8%,transparent 68%);
}
.bg .spot{
  position:absolute;width:76vmax;height:44vmax;left:50%;top:-6vmax;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgb(var(--accent-rgb) / .26),transparent 62%);
  filter:blur(22px);
}
.bg .spot.s2{
  width:50vmax;height:60vmax;left:18%;top:-14vmax;
  background:radial-gradient(ellipse,rgb(var(--ink-rgb) / .07),transparent 64%);
}
.bg .vig{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 36%,transparent 34%,var(--bg) 88%);
}

/* The grain is what stops a generated page reading as perfectly flat. Overlay
   keeps mid-grey neutral, so one layer works on both the light and dark ground. */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.055;mix-blend-mode:overlay}