.click-spark {
    --click-x: 0px;
    --click-y: 0px;
    --spark-x: 0px;
    --spark-y: 0px;
    --spark-start-x: 0px;
    --spark-start-y: 0px;
    --spark-arc-x: 0px;
    --spark-arc-y: 0px;
    --spark-size: 10px;
    --spark-duration: 980ms;
    --spark-easing: cubic-bezier(0.16, 0.7, 0.25, 1);
    --spark-end-scale: 0.3;
    --twinkle-duration: 210ms;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    pointer-events: none;
    will-change: transform, opacity;
}

.click-spark {
    width: var(--spark-size, 20px);
    height: var(--spark-size, 20px);
    margin: -10px 0 0 -10px;
    color: rgba(255, 247, 211, 0.94);
    background: currentColor;
    filter:
        drop-shadow(0 0 0.6px rgba(153, 119, 54, 0.58))
        drop-shadow(0 0 3px rgba(255, 248, 218, 0.72));
    animation:
        click-spark-scatter var(--spark-duration, 980ms) var(--spark-easing, cubic-bezier(0.16, 0.7, 0.25, 1)) forwards,
        click-spark-twinkle var(--twinkle-duration, 210ms) ease-in-out infinite alternate;
}

.click-spark--four {
    clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
}

.click-spark--five {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes click-spark-scatter {
    0% {
        opacity: 0.15;
        transform:
            translate3d(
                calc(var(--click-x) + var(--spark-start-x)),
                calc(var(--click-y) + var(--spark-start-y)),
                0
            )
            rotate(0deg)
            scale(0.35);
    }
    46% {
        opacity: 1;
        transform:
            translate3d(
                calc(var(--click-x) + var(--spark-arc-x)),
                calc(var(--click-y) + var(--spark-arc-y)),
                0
            )
            rotate(0deg)
            scale(1.15);
    }
    100% {
        opacity: 0;
        transform:
            translate3d(
                calc(var(--click-x) + var(--spark-x)),
                calc(var(--click-y) + var(--spark-y)),
                0
            )
            rotate(0deg)
            scale(var(--spark-end-scale, 0.3));
    }
}

@keyframes click-spark-twinkle {
    0% {
        filter:
            drop-shadow(0 0 0.6px rgba(153, 119, 54, 0.52))
            drop-shadow(0 0 2px rgba(255, 248, 218, 0.58))
            brightness(0.96);
    }
    100% {
        filter:
            drop-shadow(0 0 0.8px rgba(153, 119, 54, 0.65))
            drop-shadow(0 0 5px rgba(255, 251, 231, 0.9))
            drop-shadow(0 0 8px rgba(255, 239, 184, 0.32))
            brightness(1.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .click-spark {
        display: none;
        animation: none;
    }
}