/**
 * Extracted from therob.lol SndCore likes.css particle animation section.
 */

/* Particles fly outward up to ~1000px from the trigger point. Body must clip
   on the x-axis or mobile gets a phantom horizontal scroll while they animate. */
html, body {
    overflow-x: clip;
}

.snd-heart-particle,
.snd-dopamine-particle,
.snd-brain-particle,
.snd-nooo-particle {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

@keyframes sndHeartFloat {
    0% {
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: translate(-50%, -50%) scale(1) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.8) rotate(25deg);
        opacity: 0;
    }
}

@keyframes sndDopamineBounce {
    0% {
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translate(calc(var(--endX) * 0.3), calc(var(--endY) * 0.2)) scale(1.2) rotate(15deg);
        opacity: 1;
    }
    50% {
        transform: translate(calc(var(--endX) * 0.7), calc(var(--endY) * 0.6)) scale(1) rotate(-10deg);
        opacity: 0.8;
    }
    75% {
        transform: translate(calc(var(--endX) * 0.9), calc(var(--endY) * 0.8)) scale(0.9) rotate(20deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.6) rotate(0deg);
        opacity: 0;
    }
}

@keyframes sndBrainExplode {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    5% {
        transform: translate(var(--shakeIntensity), -50%) scale(1.2);
        opacity: 1;
    }
    10% {
        transform: translate(calc(var(--shakeIntensity) * -1), -50%) scale(1.2);
        opacity: 1;
    }
    15% {
        transform: translate(calc(var(--shakeIntensity) * 0.8), -50%) scale(1.1);
        opacity: 1;
    }
    20% {
        transform: translate(calc(var(--shakeIntensity) * -0.8), -50%) scale(1.1);
        opacity: 1;
    }
    25% {
        transform: translate(calc(var(--shakeIntensity) * 0.5), calc(var(--endY) * 0.1)) scale(1);
        opacity: 1;
    }
    35% {
        transform: translate(calc(var(--endX) * 0.3), calc(var(--endY) * 0.3)) scale(0.95) rotate(15deg);
        opacity: 0.9;
    }
    55% {
        transform: translate(calc(var(--endX) * 0.7), calc(var(--endY) * 0.7)) scale(0.8) rotate(-20deg);
        opacity: 0.7;
    }
    75% {
        transform: translate(calc(var(--endX) * 0.9), calc(var(--endY) * 0.9)) scale(0.6) rotate(25deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.3) rotate(-15deg);
        opacity: 0;
    }
}

@keyframes sndNoooFall {
    0% {
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        opacity: 1;
    }
    10% {
        transform: translate(-50%, -50%) scale(1.4) rotate(-8deg);
        opacity: 1;
    }
    25% {
        transform: translate(calc(var(--endX) * 0.3), calc(var(--endY) * 0.2)) scale(1.1) rotate(15deg);
        opacity: 0.95;
    }
    45% {
        transform: translate(calc(var(--endX) * 0.6), calc(var(--endY) * 0.5)) scale(0.95) rotate(-25deg);
        opacity: 0.8;
    }
    65% {
        transform: translate(calc(var(--endX) * 0.8), calc(var(--endY) * 0.7)) scale(0.8) rotate(35deg);
        opacity: 0.6;
    }
    85% {
        transform: translate(calc(var(--endX) * 0.95), calc(var(--endY) * 0.9)) scale(0.6) rotate(-30deg);
        opacity: 0.3;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.3) rotate(20deg);
        opacity: 0;
    }
}