:root {
  --pointer-glow-colour: 184, 0, 0;
  --pointer-glow-size: 500px;
  --pointer-glow-touch-size: 250px;
  --pointer-glow-opacity: 0.07;
}
.pointer-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--pointer-glow-size);
  height: var(--pointer-glow-size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--pointer-glow-colour), var(--pointer-glow-opacity)) 0%, rgba(var(--pointer-glow-colour), 0) 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: transform;
}
.pointer-glow[data-touch] { width: var(--pointer-glow-touch-size); height: var(--pointer-glow-touch-size); }
.pointer-glow[data-visible] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pointer-glow { transition: none; } }

/* Keep section backgrounds below the glow and all content above it. */
body { isolation: isolate; }
main:has(.hero) > section > .wrap,
main:has(.hero) > .hero-countdown,
.announcement,
footer > .wrap,
body > main:not(:has(.hero)),
body > div:not(.pointer-glow) { position: relative; z-index: 1; }