.cursor-glow{
    position: fixed;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;

    backdrop-filter: blur(3px) saturate(160%) brightness(1.08) url(#lens-distort);
    -webkit-backdrop-filter: blur(3px) saturate(160%) brightness(1.08);

    border: 1px solid rgba(233, 242, 251, 0.22);
    box-shadow:
        inset 0 0 26px rgba(79, 163, 224, 0.18),
        inset 0 0 8px rgba(233, 242, 251, 0.10),
        0 0 40px rgba(79, 163, 224, 0.10);

    will-change: transform;
}

.cursor-glow.active{
    opacity: 1;
}

.cursor-glow::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at 32% 28%,
        rgba(233, 242, 251, 0.14) 0%,
        rgba(233, 242, 251, 0.04) 25%,
        transparent 55%
    );
    pointer-events: none;
}

.cursor-glow::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 42% 50%, rgba(0, 180, 255, 0.22) 0%, transparent 60%),
        radial-gradient(circle at 58% 50%, rgba(255, 80, 40, 0.20) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(180, 80, 255, 0.10) 0%, transparent 70%);
    mix-blend-mode: screen;
}

@media (hover: none){
    .cursor-glow{ display: none; }
}

@media (prefers-reduced-motion: reduce){
    .cursor-glow{ display: none; }
}