/* Page atmosphere: a dot grid under a wash from the top edge, plus an optional
   glow that follows the cursor. Load after global.css.

   A page opts in by placing the layers itself:
     <div class="bg"></div>                     — grid + wash, static
     <div class="bg"></div><div class="spot"></div>   — and the cursor glow

   The homepage uses .bg alone on purpose. .spot needs the pointer script in
   socials/script.js to feed it --mx/--my. */

@property --a { syntax: '<angle>'; inherits: false; initial-value: 0turn; }

.bg, .spot { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.bg {
  background:
    radial-gradient(90% 46% at 50% 0, rgba(59, 130, 246, 0.15), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0) 0 0 / 20px 20px;
}

/* The landing page is wider than the socials column, so the wash spreads
   further before it fades. Same ceiling, same recipe. */
.bg.is-wide {
  background:
    radial-gradient(120% 52% at 50% 0, rgba(59, 130, 246, 0.15), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0) 0 0 / 20px 20px;
}

.spot {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 40%),
    rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0.09) 44%, transparent 70%);
}

/* The same dot grid, brighter and accent-tinted, revealed only where the glow
   lands. Origin and cell size must match .bg so the lit dots sit exactly on
   the dim ones. */
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(159, 189, 242, 0.5) 1px, transparent 0) 0 0 / 20px 20px;
  -webkit-mask: radial-gradient(300px circle at var(--mx, 50%) var(--my, 40%), #000, rgba(0, 0, 0, 0.35) 55%, transparent 72%);
  mask: radial-gradient(300px circle at var(--mx, 50%) var(--my, 40%), #000, rgba(0, 0, 0, 0.35) 55%, transparent 72%);
}

body.is-near .spot { opacity: 1; }