.cursor-glow,
.cursor-trail,
.cursor-ripple {
    position: fixed;
    z-index: 24;
    pointer-events: none;
}

.cursor-glow {
    top: 0;
    left: 0;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, rgba(216, 255, 82, .17) 0, rgba(53, 224, 255, .08) 34%, rgba(53, 224, 255, 0) 70%);
    mix-blend-mode: screen;
    filter: blur(4px);
    transition: width .25s, height .25s, margin .25s, opacity .25s;
    will-change: transform;
}

.cursor-glow.is-visible {
    opacity: 1;
}

.cursor-glow.is-interactive {
    width: 340px;
    height: 340px;
    margin: -170px 0 0 -170px;
    opacity: .92;
    background: radial-gradient(circle, rgba(216, 255, 82, .24) 0, rgba(37, 211, 102, .1) 32%, rgba(53, 224, 255, 0) 70%);
}

.cursor-trail {
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #d8ff52;
    box-shadow: 0 0 10px rgba(216, 255, 82, .9), 0 0 22px rgba(61, 218, 255, .5);
    animation: cursor-trail-out .7s ease-out forwards;
}

.cursor-ripple {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 1.5px solid rgba(216, 255, 82, .9);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(216, 255, 82, .35), inset 0 0 14px rgba(53, 224, 255, .25);
    animation: cursor-ripple-out .75s cubic-bezier(.15, .75, .25, 1) forwards;
}

@keyframes cursor-trail-out {
    0% { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: translateY(12px) scale(.15); }
}

@keyframes cursor-ripple-out {
    0% { opacity: .9; transform: scale(.25); }
    100% { opacity: 0; transform: scale(5.5); }
}

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