/* dot-grid.css — interactive pratham-style dot field
   Fixed behind the page (z-index 0), above the solid --bg but below
   .wrap / .study-shell (z-index 1). The static html::before in
   theme.css is the no-JS fallback; when JS boots it adds
   html.has-interactive-dots and hides that fallback. */
.interactive-dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* A field, not a hero spotlight: keep the texture present across the
     viewport and only feather its extreme edges. */
  -webkit-mask-image: radial-gradient(ellipse 128% 96% at 50% 45%, black 64%, transparent 100%);
          mask-image: radial-gradient(ellipse 128% 96% at 50% 45%, black 64%, transparent 100%);
}

/* canvas fills the host */
.interactive-dots canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* hide the static CSS dot layer once the canvas is live */
html.has-interactive-dots::before {
  opacity: 0;
  visibility: hidden;
}

/* reduced-motion: no canvas at all — keep the static CSS dots */
@media (prefers-reduced-motion: reduce) {
  .interactive-dots {
    display: none !important;
  }
  html.has-interactive-dots::before {
    opacity: 1;
    visibility: visible;
  }
}

/* coarse pointer / touch: keep the dots but skip the cursor push
   (no hover), click ripples still work — cheaper and less jitter */
@media (pointer: coarse) {
  .interactive-dots {
    opacity: 0.85;
  }
}