/* ==========================================================================
   Spotlight — a decorative radial glow that trails the cursor (vanilla JS in
   /assets/js/spotlight.js). It's aria-hidden and pointer-events:none, and sits
   at z-index:-3 — above the page's dark canvas but behind all content — so it
   glows through the transparent sections and never affects interaction.
   With JS off it stays a static centred glow (progressive enhancement).
   ========================================================================== */
.spotlight {
  --spotlight-color: #212121;
  --spotlight-x: 50vw;
  --spotlight-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: -3;
  display: block;
  width: 150vmax;
  height: 150vmax;
  border-radius: 100%;
  pointer-events: none;
  opacity: 0.375;
  /* `will-change: transform` is set from spotlight.js only while the effect is
     active, so touch / reduced-motion devices (which opt out) never promote a
     compositor layer that would only ever hold a static glow. */
  transform-origin: 50%;
  transform: translate(-50%, -50%) translate(var(--spotlight-x), var(--spotlight-y));
  background: radial-gradient(50% 50% at 50% 50%, var(--spotlight-color) 0%, transparent 100%);
}

/* Faint film-grain texture inside the glow, masked to fade at the edges. */
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComposite operator='in' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' fill='black'/%3E%3C/svg%3E");
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(50% 50%, #000 0%, #0000 100%);
  mask-image: radial-gradient(50% 50%, #000 0%, #0000 100%);
}

/* No cursor to follow — keep a static, calm glow near the top. */
@media (prefers-reduced-motion: reduce) {
  .spotlight {
    --spotlight-y: 32vh;
  }
}

@media (hover: none),
(pointer: coarse) {
  .spotlight {
    --spotlight-y: 28vh;
  }
}