/* Provides a glowing cursor follow effect for desktop users */

/* Provides a subtle constant cursor aura for desktop users */

#cursor-highlight {
  position: fixed;
  top: 0;
  left: 0;

  width: 220px;
  height: 220px;

  background:
  radial-gradient(
    circle,
    rgba(0, 0, 0, 0.08) 0%,
    transparent 55%
  ),
  radial-gradient(
    circle,
    rgba(0, 170, 255, 0.45) 0%,
    rgba(0, 170, 255, 0.25) 35%,
    transparent 75%
  );

  opacity: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;

  transform: translate(-50%, -50%);
  will-change: transform;
  transition: transform 110ms ease-out;
}

/* Hide on touch devices */
@media (pointer: coarse) {
  #cursor-highlight {
    display: none;
  }
}

/* Hide on mobile viewports */
@media (max-width: 768px) {
  #cursor-highlight {
    display: none;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #cursor-highlight {
    transition: none;
  }
}

/* Improve visibility on light backgrounds */
[data-theme='light'] #cursor-highlight {
  mix-blend-mode: multiply;
  opacity: 0.35;
}