:root {
  --cursor-glow-size: clamp(110px, 13vw, 170px);
  --cursor-glow-blur: 26px;
  --cursor-glow-primary: rgba(62, 209, 255, 0.22);
  --cursor-glow-secondary: rgba(47, 247, 202, 0.12);
}

@supports (color: oklch(70% 0.14 220)) {
  :root {
    --cursor-glow-primary: oklch(78% 0.15 225 / 0.24);
    --cursor-glow-secondary: oklch(86% 0.1 170 / 0.16);
  }
}

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--cursor-glow-size);
  height: var(--cursor-glow-size);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100vw, -100vh, 0);
  transition: opacity 240ms ease;
  z-index: 35;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

.cursor-glow::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: inherit;
  background: radial-gradient(circle, var(--cursor-glow-primary) 0%, var(--cursor-glow-secondary) 42%, transparent 68%);
  filter: blur(var(--cursor-glow-blur));
}

body.has-cursor-glow .cursor-glow {
  opacity: 0.72;
}

.no-pointer-events .cursor-glow {
  display: none;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .cursor-glow {
    display: none !important;
  }
}