@media (pointer: fine) {
  html::after {
    content: '';
    position: fixed;
    left: var(--cursor-light-x, -400px);
    top: var(--cursor-light-y, -400px);
    width: 560px;
    height: 560px;
    z-index: 15;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.105) 0%, rgba(255,255,255,.035) 36%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }

  html.cursor-light-visible::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html::after { display: none; }
}