#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  filter: blur(60px);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.15s ease-out, background 0.4s ease;
  z-index: 5;
  will-change: transform, background, opacity;
}

body:hover #cursor-glow {
  opacity: 1;
}

/* reduce pointer interference and ensure it's behind text but above background */
#cursor-glow {
  z-index: 40; /* landing page header/logo sits at 10, panels at default; adjust if needed */
}

/* small media tweak for smaller screens */
@media (max-width: 640px) {
  #cursor-glow { width: 220px; height: 220px; filter: blur(48px); }
}