/* sparkles.css */

/* for pointer */

.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #fff 0%, #fff 20%, var(--sparkle-color) 60%, rgba(255, 255, 255, 0) 100%);
    border-radius: 50%;
    pointer-events: none;
    filter: drop-shadow(0 0 4px var(--sparkle-color)) drop-shadow(0 0 10px var(--sparkle-color));
    animation: fadeAndShrink 0.8s ease-out forwards;
    z-index: 99999;
    /* Ensures sparkles appear on top of all page content */
}

@keyframes fadeAndShrink {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* for touch events */
.sparkle-touch {
    position: fixed;
    width: 6px;
    height: 6px;
    /* background: radial-gradient(circle, var(--sparkle-t-color), rgba(255, 255, 255, 0.2)); */
    background: var(--sparkle-t-color);
    border-radius: 50%;
    pointer-events: none;
    /* opacity: 0; */
    /* transform: scale(0.5); */
    animation: sparkle-fade 0.8s ease-out forwards;
}

@keyframes sparkle-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.2) translateY(-20px);
    }
}