/* Main burst button - can be clicked */
.burst-trigger {
    font-size: 50px;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
    will-change: transform;
}

.burst-trigger:active {
    transform: scale(0.9);
    animation-play-state: paused; /* Pause animation when clicking */
}

/* Default animations for specific emojis */

/* Fire - Glow effect */
.burst-trigger[data-particle="🔥"] {
    animation: fire-glow 1.5s infinite alternate;
    filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.6));
}

@keyframes fire-glow {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.6));
        transform: scale(1);
    }

    100% {
        filter: drop-shadow(0 0 12px rgba(255, 100, 0, 1));
        transform: scale(1.05);
    }
}

/* Like - Bounce */
.burst-trigger[data-particle="👍"] {
    animation: like-bounce 1s infinite;
}

@keyframes like-bounce {

    0%,
    100% {
        transform: scale(1);
    }

    10% {
        transform: scale(0.9);
    }

    30% {
        transform: scale(1.15);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Star - Twinkle */
.burst-trigger[data-particle="⭐"] {
    animation: star-twinkle 1.5s infinite;
}

@keyframes star-twinkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.7;
    }
}

/* Heart - Heartbeat */
.burst-trigger[data-particle="❤️"] {
    animation: heartbeat 1.2s infinite;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.1);
    }

    20% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.15);
    }

    40% {
        transform: scale(1);
    }
}

/* Sparkles - Float */
.burst-trigger[data-particle="✨"] {
    animation: sparkle-float 2s infinite ease-in-out;
}

@keyframes sparkle-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(180deg);
    }
}

/* Party - Shake */
.burst-trigger[data-particle="🎉"] {
    animation: party-shake 0.9s infinite;
}

@keyframes party-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(8deg);
    }
}

/* Confetti - Spin (removed duplicate, keep only tada-wave below) */

/* Money - Wiggle */
.burst-trigger[data-particle="💰"] {
    animation: money-wiggle 1.6s infinite;
}

@keyframes money-wiggle {

    0%,
    100% {
        transform: rotate(0deg) translateX(0);
    }

    25% {
        transform: rotate(-5deg) translateX(-3px);
    }

    75% {
        transform: rotate(5deg) translateX(3px);
    }
}

/* Rocket - Launch */
.burst-trigger[data-particle="🚀"] {
    animation: rocket-launch 2s infinite;
}

@keyframes rocket-launch {

    0%,
    100% {
        transform: translateY(0) rotate(-45deg);
    }

    50% {
        transform: translateY(-15px) rotate(-35deg);
    }
}

/* Crown - Royal glow */
.burst-trigger[data-particle="👑"] {
    animation: crown-glow 2s infinite alternate;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

@keyframes crown-glow {
    0% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
        transform: scale(1);
    }

    100% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
        transform: scale(1.08);
    }
}

/* Clap - Clapping */
.burst-trigger[data-particle="👏"] {
    animation: clapping 1s infinite;
}

@keyframes clapping {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-15deg) scale(1.05);
    }

    75% {
        transform: rotate(15deg) scale(1.05);
    }
}

/* Diamond - Shine */
.burst-trigger[data-particle="💎"] {
    animation: diamond-shine 2s infinite;
    filter: drop-shadow(0 0 10px rgba(100, 200, 255, 0.6));
}

@keyframes diamond-shine {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(100, 200, 255, 0.6));
        transform: scale(1) rotate(0deg);
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(100, 200, 255, 1));
        transform: scale(1.06) rotate(10deg);
    }
}

/* Gift - Shake */
.burst-trigger[data-particle="🎁"] {
    animation: gift-shake 0.8s infinite;
}

@keyframes gift-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10%,
    30% {
        transform: rotate(-10deg);
    }

    20%,
    40% {
        transform: rotate(10deg);
    }
}

/* Tada - Celebration wave */
.burst-trigger[data-particle="🎊"] {
    animation: tada-wave 1.6s infinite ease-in-out;
}

@keyframes tada-wave {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.1) rotate(-10deg);
    }

    75% {
        transform: scale(1.1) rotate(10deg);
    }
}

/* Rainbow - Wave shimmer */
.burst-trigger[data-particle="🌈"] {
    animation: rainbow-shimmer 3s infinite ease-in-out;
}

@keyframes rainbow-shimmer {

    0%,
    100% {
        transform: translateY(0) scale(1);
        filter: hue-rotate(0deg);
    }

    50% {
        transform: translateY(-8px) scale(1.1);
        filter: hue-rotate(30deg);
    }
}

/* Trophy - Winner rotate */
.burst-trigger[data-particle="🏆"] {
    animation: trophy-rotate 3s infinite;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

@keyframes trophy-rotate {
    0% {
        transform: rotateY(0deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    }

    50% {
        transform: rotateY(180deg) scale(1.15);
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    }

    100% {
        transform: rotateY(360deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    }
}

/* Lightning - Flash */
.burst-trigger[data-particle="⚡"] {
    animation: lightning-flash 1.6s infinite;
}

@keyframes lightning-flash {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 255, 100, 0.5));
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
        filter: drop-shadow(0 0 20px rgba(255, 255, 100, 1));
    }
}

/* Balloon - Float up */
.burst-trigger[data-particle="🎈"] {
    animation: balloon-float 3s infinite ease-in-out;
}

@keyframes balloon-float {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-20px) rotate(3deg);
    }
}

/* Smile - Happy bounce */
.burst-trigger[data-particle="😊"] {
    animation: smile-bounce 1.5s infinite;
}

@keyframes smile-bounce {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.1) rotate(-5deg);
    }

    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Sun - Radiate */
.burst-trigger[data-particle="☀️"] {
    animation: sun-radiate 2s infinite;
    filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.6));
}

@keyframes sun-radiate {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.6));
    }

    50% {
        transform: scale(1.07) rotate(180deg);
        filter: drop-shadow(0 0 12px rgba(255, 200, 0, 1));
    }
}

/* Moon - Glow pulse */
.burst-trigger[data-particle="🌙"] {
    animation: moon-pulse 3s infinite;
    filter: drop-shadow(0 0 8px rgba(200, 200, 255, 0.5));
}

@keyframes moon-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(200, 200, 255, 0.5));
        opacity: 0.9;
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(200, 200, 255, 0.9));
        opacity: 1;
    }
}

/* Music - Dance */
.burst-trigger[data-particle="🎵"] {
    animation: music-dance 0.8s infinite;
}

@keyframes music-dance {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-8px) rotate(-10deg);
    }

    75% {
        transform: translateY(-5px) rotate(10deg);
    }
}

/* Container for burst particles */
.burst-container {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
}

/* Particle styles */
.particle {
    position: absolute;
    pointer-events: none;
    font-size: 20px;
    opacity: 0;
    animation: burst 0.8s ease-out forwards;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}

@keyframes burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(var(--r));
    }
}

/* Fountain effect - particles shoot upward */
.particle.fountain {
    animation: fountain 1.2s ease-out forwards;
}

@keyframes fountain {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5);
    }
}

/* Rain effect - particles fall down */
.particle.rain {
    animation: rain 1s ease-in forwards;
}

@keyframes rain {
    0% {
        opacity: 1;
        transform: translate(var(--tx), -50px) scale(0.8) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--r));
    }
}

/* Spiral effect */
.particle.spiral {
    animation: spiral 1.5s ease-out forwards;
}

@keyframes spiral {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(var(--spiral-r));
    }
}

/* Float up effect */
.particle.float-up {
    animation: float-up 2s ease-out forwards;
}

@keyframes float-up {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), -150px) scale(0.5) rotate(var(--r));
    }
}

/* Wave effect */
.particle.wave {
    animation: wave 1.2s ease-in-out forwards;
}

@keyframes wave {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8);
    }

    50% {
        transform: translate(var(--tx-mid), var(--ty-mid)) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5);
    }
}

/* Orbit effect */
.particle.orbit {
    animation: orbit 1.5s linear forwards;
}

@keyframes orbit {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.1);
    }
}

/* Implode then explode */
.particle.implode-explode {
    animation: implode-explode 0.8s ease-in-out forwards;
}

@keyframes implode-explode {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    40% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.2)) scale(0.3);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--r));
    }
}

/* Zigzag effect */
.particle.zigzag {
    animation: zigzag 1s ease-in-out forwards;
}

@keyframes zigzag {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.9);
    }

    25% {
        transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.5)) scale(1.1);
    }

    75% {
        transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.8)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6) rotate(var(--r));
    }
}

/* Confetti burst - colorful particles */
.confetti-particle {
    position: absolute;
    pointer-events: none;
    width: 8px;
    height: 8px;
    opacity: 0;
    animation: confetti-burst 1s ease-out forwards;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes confetti-burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.3) rotate(720deg);
    }
}

/* Heart pulse effect */
.pulse-effect {
    animation: pulse-burst 0.6s ease-out;
}

@keyframes pulse-burst {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.instruction {
    color: white;
    text-align: center;
    font-size: 1.2em;
    margin-top: 20px;
    opacity: 0.8;
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.4;
    }
}

.code-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin-top: 30px;
    max-width: 800px;
}

.code-section h3 {
    color: #fff;
    margin-bottom: 15px;
}

.code-section pre {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 10px;
    overflow-x: auto;
    color: #a8e6cf;
    font-size: 0.9em;
    line-height: 1.5;
}

/* ===== NEW DEFAULT ANIMATIONS ===== */

/* Crying emoji - tears dripping */
.burst-trigger[data-particle="😢"],
.burst-trigger[data-particle="😭"],
.burst-trigger[data-particle="😞"] {
    animation: cry-shake 1.5s infinite;
}

@keyframes cry-shake {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.05) rotate(-3deg);
    }
    50% {
        transform: scale(0.95) rotate(0deg);
    }
    75% {
        transform: scale(1.05) rotate(3deg);
    }
}

/* Car - driving wobble */
.burst-trigger[data-particle="🚗"],
.burst-trigger[data-particle="🚙"],
.burst-trigger[data-particle="🚕"] {
    animation: car-drive 0.8s infinite;
}

@keyframes car-drive {
    0%, 100% {
        transform: translateX(0) rotate(-2deg);
    }
    50% {
        transform: translateX(5px) rotate(2deg);
    }
}

/* Airplane - flying */
.burst-trigger[data-particle="✈️"],
.burst-trigger[data-particle="🛫"],
.burst-trigger[data-particle="🛩️"] {
    animation: plane-fly 2s infinite ease-in-out;
}

@keyframes plane-fly {
    0%, 100% {
        transform: translateX(-5px) translateY(3px) rotate(-5deg);
    }
    50% {
        transform: translateX(5px) translateY(-5px) rotate(5deg);
    }
}

/* Party face - extra shake */
.burst-trigger[data-particle="🥳"] {
    animation: party-face 0.6s infinite;
}

@keyframes party-face {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-10deg);
    }
    50% {
        transform: scale(1) rotate(0deg);
    }
    75% {
        transform: scale(1.1) rotate(10deg);
    }
}

/* Champagne & celebration */
.burst-trigger[data-particle="🍾"] {
    animation: champagne-shake 0.5s infinite;
}

@keyframes champagne-shake {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

.burst-trigger[data-particle="🥂"] {
    animation: cheers-clink 1s infinite;
}

@keyframes cheers-clink {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Kiss emoji - pulsing lips */
.burst-trigger[data-particle="😘"] {
    animation: kiss-pulse 1.2s infinite;
}

@keyframes kiss-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* Laughing emojis - shake laugh */
.burst-trigger[data-particle="😂"],
.burst-trigger[data-particle="🤣"],
.burst-trigger[data-particle="😆"] {
    animation: laugh-shake 0.9s infinite;
}

@keyframes laugh-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg) scale(1.05);
    }
    75% {
        transform: rotate(5deg) scale(1.05);
    }
}

/* Sports balls - bounce */
.burst-trigger[data-particle="⚽"],
.burst-trigger[data-particle="🏀"],
.burst-trigger[data-particle="🏐"],
.burst-trigger[data-particle="🎾"] {
    animation: ball-bounce 0.6s infinite;
}

@keyframes ball-bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(0.95);
    }
}

/* Wink */
.burst-trigger[data-particle="😉"] {
    animation: wink-blink 2s infinite;
}

@keyframes wink-blink {
    0%, 90%, 100% {
        transform: scale(1);
    }
    95% {
        transform: scale(1.1);
    }
}

/* Cool sunglasses */
.burst-trigger[data-particle="😎"] {
    animation: cool-nod 1.5s infinite;
}

@keyframes cool-nod {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.05) rotate(-5deg);
    }
    75% {
        transform: scale(1.05) rotate(5deg);
    }
}

/* Crazy face */
.burst-trigger[data-particle="🤪"] {
    animation: crazy-spin 1.6s infinite;
}

@keyframes crazy-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-15deg) scale(1.1);
    }
    50% {
        transform: rotate(0deg) scale(1);
    }
    75% {
        transform: rotate(15deg) scale(1.1);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* Smirk */
.burst-trigger[data-particle="😏"] {
    animation: smirk-slide 2s infinite ease-in-out;
}

@keyframes smirk-slide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px) scale(1.05);
    }
}

/* Target/Bullseye */
.burst-trigger[data-particle="🎯"] {
    animation: target-pulse 1.5s infinite;
}

@keyframes target-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.3));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.6));
    }
}

/* Check mark */
.burst-trigger[data-particle="✅"] {
    animation: check-pop 1s infinite;
}

@keyframes check-pop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Snowflake - gentle fall */
.burst-trigger[data-particle="❄️"] {
    animation: snowflake-drift 3s infinite ease-in-out;
}

@keyframes snowflake-drift {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(180deg);
    }
}

/* Rain cloud */
.burst-trigger[data-particle="🌧️"] {
    animation: rain-cloud 1.5s infinite;
}

@keyframes rain-cloud {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}

/* Butterfly - flutter */
.burst-trigger[data-particle="🦋"] {
    animation: butterfly-flutter 1s infinite ease-in-out;
}

@keyframes butterfly-flutter {
    0%, 100% {
        transform: translateY(0) rotate(-5deg) scale(1);
    }
    25% {
        transform: translateY(-8px) rotate(0deg) scale(1.05);
    }
    50% {
        transform: translateY(-5px) rotate(5deg) scale(1);
    }
    75% {
        transform: translateY(-10px) rotate(0deg) scale(1.05);
    }
}

/* Flowers - sway */
.burst-trigger[data-particle="🌸"],
.burst-trigger[data-particle="🌺"],
.burst-trigger[data-particle="🌻"],
.burst-trigger[data-particle="🌹"] {
    animation: flower-sway 2s infinite ease-in-out;
}

@keyframes flower-sway {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

/* Game controller - shake */
.burst-trigger[data-particle="🎮"] {
    animation: game-shake 0.8s infinite;
}

@keyframes game-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-2px) rotate(-2deg);
    }
    75% {
        transform: translateX(2px) rotate(2deg);
    }
}

/* Money flying - bills flutter */
.burst-trigger[data-particle="💸"] {
    animation: money-fly 1s infinite ease-in-out;
}

@keyframes money-fly {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* Money face */
.burst-trigger[data-particle="🤑"] {
    animation: money-eyes 1s infinite;
}

@keyframes money-eyes {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Briefcase - professional bounce */
.burst-trigger[data-particle="💼"] {
    animation: briefcase-bounce 1.5s infinite;
}

@keyframes briefcase-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Books - stack wobble */
.burst-trigger[data-particle="📚"] {
    animation: books-wobble 2s infinite;
}

@keyframes books-wobble {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* Watch - tick */
.burst-trigger[data-particle="⌚"] {
    animation: watch-tick 1s infinite steps(1);
}

@keyframes watch-tick {
    0%, 50% {
        transform: scale(1);
    }
    25%, 75% {
        transform: scale(1.05);
    }
}

/* Food - yummy wobble */
.burst-trigger[data-particle="🍕"],
.burst-trigger[data-particle="🍔"],
.burst-trigger[data-particle="🍟"],
.burst-trigger[data-particle="🌭"],
.burst-trigger[data-particle="🍦"],
.burst-trigger[data-particle="🧋"],
.burst-trigger[data-particle="🥐"] {
    animation: food-wobble 1.5s infinite ease-in-out;
}

@keyframes food-wobble {
    0%, 100% {
        transform: rotate(-5deg) scale(1);
    }
    50% {
        transform: rotate(5deg) scale(1.05);
    }
}

/* Thumbs down - shake disapproval */
.burst-trigger[data-particle="👎"] {
    animation: thumbs-down 0.8s infinite;
}

@keyframes thumbs-down {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

/* OK sign */
.burst-trigger[data-particle="👌"] {
    animation: ok-pulse 1.5s infinite;
}

@keyframes ok-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Peace sign */
.burst-trigger[data-particle="✌️"] {
    animation: peace-wave 1s infinite ease-in-out;
}

@keyframes peace-wave {
    0%, 100% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
}

/* Handshake */
.burst-trigger[data-particle="🤝"] {
    animation: handshake-shake 0.5s infinite;
}

@keyframes handshake-shake {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(3px);
    }
}

/* Love/kiss couples */
.burst-trigger[data-particle="💏"],
.burst-trigger[data-particle="👩‍❤️‍💋‍👨"],
.burst-trigger[data-particle="👨‍❤️‍💋‍👨"],
.burst-trigger[data-particle="👩‍❤️‍💋‍👩"] {
    animation: love-pulse 1.5s infinite;
}

@keyframes love-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 100, 150, 0.4));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 15px rgba(255, 100, 150, 0.8));
    }
}

/* Healing heart */
.burst-trigger[data-particle="❤️‍🩹"],
.burst-trigger[data-particle="💟"] {
    animation: heart-heal 2s infinite;
}

@keyframes heart-heal {
    0%, 100% {
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    50% {
        transform: scale(1.1);
        filter: hue-rotate(20deg);
    }
}

/* ===== NEW CLICK EFFECTS ===== */

/* Tears effect - droplets falling down */
.particle.tears {
    animation: tears-fall 1.2s ease-in forwards;
}

@keyframes tears-fall {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }
}

/* Drive effect - cars moving from right to left */
.particle.drive {
    animation: drive-move 1.2s ease-out forwards;
}

@keyframes drive-move {
    0% {
        opacity: 1;
        transform: translateX(50px) translateY(var(--ty)) scale(0.6);
    }
    20% {
        opacity: 1;
        transform: translateX(30px) translateY(var(--ty)) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateX(var(--tx)) translateY(var(--ty)) scale(1);
    }
}

/* Fly effect - particles fly across */
.particle.fly {
    animation: fly-across 1.5s ease-out forwards;
}

@keyframes fly-across {
    0% {
        opacity: 1;
        transform: translateX(-50px) translateY(20px) scale(0.6) rotate(-15deg);
    }
    100% {
        opacity: 0;
        transform: translateX(var(--tx)) translateY(var(--ty)) scale(1) rotate(var(--r));
    }
}

/* Pop effect - champagne style burst upward */
.particle.pop {
    animation: pop-burst 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes pop-burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.5)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5);
    }
}

/* Dribble effect - basketball bouncing up and down */
.particle.dribble {
    animation: dribble-bounce 1s ease-in-out forwards;
}

@keyframes dribble-bounce {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(calc(var(--tx) * 0.3), 30px) scale(0.9);
    }
    50% {
        transform: translate(calc(var(--tx) * 0.5), -20px) scale(1.1);
    }
    75% {
        transform: translate(calc(var(--tx) * 0.7), 20px) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8);
    }
}

/* Kick effect - football/soccer ball kick */
.particle.kick {
    animation: kick-ball 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes kick-ball {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    30% {
        transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.6)) scale(1.1) rotate(180deg);
    }
    60% {
        transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.3)) scale(0.9) rotate(360deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.7) rotate(540deg);
    }
}

/* Kiss effect - hearts float out with kiss marks */
.particle.kiss {
    animation: kiss-float 1.5s ease-out forwards;
}

@keyframes kiss-float {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.8)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8);
    }
}

/* Laugh effect - bouncy scatter */
.particle.laugh {
    animation: laugh-scatter 0.8s ease-out forwards;
}

@keyframes laugh-scatter {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8) rotate(0deg);
    }
    50% {
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.3)) scale(1.3) rotate(calc(var(--r) * 0.5));
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6) rotate(var(--r));
    }
}

/* Snow effect - gentle falling */
.particle.snow {
    animation: snow-fall 2s ease-in-out forwards;
}

@keyframes snow-fall {
    0% {
        opacity: 1;
        transform: translate(0, -20px) scale(0.8) rotate(0deg);
    }
    50% {
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(360deg);
    }
}

/* Flutter effect - butterfly style */
.particle.flutter {
    animation: flutter-fly 1.5s ease-in-out forwards;
}

@keyframes flutter-fly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.2)) scale(1.1) rotate(-15deg);
    }
    50% {
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.6)) scale(0.9) rotate(15deg);
    }
    75% {
        transform: translate(calc(var(--tx) * 0.8), calc(var(--ty) * 0.8)) scale(1.1) rotate(-10deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.7) rotate(var(--r));
    }
}

/* Petal effect - flower petals falling */
.particle.petal {
    animation: petal-fall 2s ease-in-out forwards;
}

@keyframes petal-fall {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8) rotate(0deg);
    }
    25% {
        transform: translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.3)) scale(1) rotate(45deg);
    }
    50% {
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.1) rotate(90deg);
    }
    75% {
        transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.8)) scale(0.9) rotate(135deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(180deg);
    }
}

/* Sunray effect - rays radiating outward */
.particle.sunray {
    animation: sunray-radiate 1.2s ease-out forwards;
}

@keyframes sunray-radiate {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.3);
        filter: brightness(2);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.2);
        filter: brightness(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8);
        filter: brightness(1);
    }
}

/* Raindrop effect - raindrops falling with slight sway */
.particle.raindrop {
    animation: raindrop-fall 1s ease-in forwards;
}

@keyframes raindrop-fall {
    0% {
        opacity: 1;
        transform: translate(var(--start-x), -30px) scale(0.6);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--start-x) + var(--sway)), calc(var(--ty) * 0.5)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8);
    }
}

/* Twinkle effect - stars twinkling */
.particle.twinkle {
    animation: twinkle-star 1.5s ease-in-out forwards;
}

@keyframes twinkle-star {
    0% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1.2);
    }
    50% {
        opacity: 0.5;
        transform: translate(var(--tx), var(--ty)) scale(0.8);
    }
    70% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5);
    }
}

/* Shake effect - shaking side to side */
.particle.shake {
    animation: shake-scatter 0.8s ease-out forwards;
}

@keyframes shake-scatter {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    20% {
        transform: translate(calc(var(--tx) * 0.2 + 5px), calc(var(--ty) * 0.2)) scale(1.1);
    }
    40% {
        transform: translate(calc(var(--tx) * 0.4 - 5px), calc(var(--ty) * 0.4)) scale(1);
    }
    60% {
        transform: translate(calc(var(--tx) * 0.6 + 3px), calc(var(--ty) * 0.6)) scale(0.95);
    }
    80% {
        transform: translate(calc(var(--tx) * 0.8 - 3px), calc(var(--ty) * 0.8)) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.7);
    }
}

/* Sparkle effect - sparkling outward */
.particle.sparkle {
    animation: sparkle-out 1s ease-out forwards;
}

@keyframes sparkle-out {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
        filter: brightness(2);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.3) rotate(180deg);
        filter: brightness(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6) rotate(360deg);
        filter: brightness(1);
    }
}

/* Celebrate effect - confetti-like celebration */
.particle.celebrate {
    animation: celebrate-pop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes celebrate-pop {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.3) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.5)) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(var(--r));
    }
}

/* Pulse out effect - pulsing outward */
.particle.pulse-out {
    animation: pulse-expand 1s ease-out forwards;
}

@keyframes pulse-expand {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4)) scale(1.4);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }
}

/* Swing effect - swinging motion */
.particle.swing {
    animation: swing-out 1.2s ease-in-out forwards;
}

@keyframes swing-out {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.2)) rotate(-20deg) scale(1.1);
    }
    50% {
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) rotate(20deg) scale(1);
    }
    75% {
        transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.7)) rotate(-10deg) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.7);
    }
}

/* ===== NEW EMOJI ANIMATIONS (30 Missing Emojis) ===== */

/* 😍 Smiling Face with Heart-Eyes */
.burst-trigger[data-particle="😍"] {
    animation: hearts-in-eyes 1.2s infinite;
}

@keyframes hearts-in-eyes {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
        filter: brightness(1.2);
    }
}

/* 🥺 Pleading Face */
.burst-trigger[data-particle="🥺"] {
    animation: puppy-eyes 1.5s infinite;
}

@keyframes puppy-eyes {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.08) translateY(-2px);
    }
}

/* 🤔 Thinking Face */
.burst-trigger[data-particle="🤔"] {
    animation: thinking-tilt 2s infinite;
}

@keyframes thinking-tilt {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-8deg);
    }
    75% {
        transform: rotate(8deg);
    }
}

/* 😴 Sleeping Face */
.burst-trigger[data-particle="😴"] {
    animation: sleeping-zzz 2s infinite;
}

@keyframes sleeping-zzz {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
    }
    50% {
        transform: translateY(3px) rotate(3deg);
        opacity: 0.9;
    }
}

/* 🤗 Hugging Face */
.burst-trigger[data-particle="🤗"] {
    animation: hugging-pulse 1.5s infinite;
}

@keyframes hugging-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15) rotate(5deg);
    }
}

/* 🤯 Exploding Head */
.burst-trigger[data-particle="🤯"] {
    animation: mind-blown 1.2s infinite;
}

@keyframes mind-blown {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-10deg) scale(1.1);
    }
    50% {
        transform: rotate(10deg) scale(1.15);
    }
    75% {
        transform: rotate(-10deg) scale(1.1);
    }
}

/* 😱 Face Screaming in Fear */
.burst-trigger[data-particle="😱"] {
    animation: screaming 0.8s infinite;
}

@keyframes screaming {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.05) rotate(-2deg);
    }
    50% {
        transform: scale(1.08) rotate(2deg);
    }
    75% {
        transform: scale(1.05) rotate(-2deg);
    }
}

/* 🥰 Smiling Face with Hearts */
.burst-trigger[data-particle="🥰"] {
    animation: floating-hearts 1.5s infinite;
}

@keyframes floating-hearts {
    0%, 100% {
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    50% {
        transform: scale(1.1);
        filter: hue-rotate(15deg);
    }
}

/* 💯 Hundred Points */
.burst-trigger[data-particle="💯"] {
    animation: perfect-glow 1.5s infinite;
}

@keyframes perfect-glow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.3));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8));
    }
}

/* 🙏 Folded Hands */
.burst-trigger[data-particle="🙏"] {
    animation: pray-bow 2s infinite;
}

@keyframes pray-bow {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg) translateY(3px);
    }
}

/* 🔴 Red Circle (Recording) */
.burst-trigger[data-particle="🔴"] {
    animation: recording-pulse 1s infinite;
}

@keyframes recording-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
}

/* 📌 Pushpin */
.burst-trigger[data-particle="📌"] {
    animation: pin-wiggle 1.5s infinite;
}

@keyframes pin-wiggle {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

/* 🎂 Birthday Cake */
.burst-trigger[data-particle="🎂"] {
    animation: candle-flicker 1s infinite;
}

@keyframes candle-flicker {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.3);
    }
}

/* 🍻 Clinking Beer Mugs */
.burst-trigger[data-particle="🍻"] {
    animation: cheers-clink-mugs 1.2s infinite;
}

@keyframes cheers-clink-mugs {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-3px) rotate(-5deg);
    }
    75% {
        transform: translateX(3px) rotate(5deg);
    }
}

/* 🐶 Dog Face */
.burst-trigger[data-particle="🐶"] {
    animation: puppy-wag 0.8s infinite;
}

@keyframes puppy-wag {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

/* 🐱 Cat Face */
.burst-trigger[data-particle="🐱"] {
    animation: cat-curious 2s infinite;
}

@keyframes cat-curious {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* 🦄 Unicorn */
.burst-trigger[data-particle="🦄"] {
    animation: unicorn-magic 2s infinite;
}

@keyframes unicorn-magic {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        transform: scale(1.08) rotate(5deg);
        filter: hue-rotate(30deg) brightness(1.2);
    }
}

/* 🐵 Monkey Face */
.burst-trigger[data-particle="🐵"] {
    animation: monkey-bounce 0.9s infinite;
}

@keyframes monkey-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(-5deg);
    }
    75% {
        transform: translateY(-5px) rotate(5deg);
    }
}

/* 🐢 Turtle */
.burst-trigger[data-particle="🐢"] {
    animation: turtle-slow 3s infinite;
}

@keyframes turtle-slow {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(2px);
    }
}

/* 👻 Ghost */
.burst-trigger[data-particle="👻"] {
    animation: ghost-float 2s infinite;
}

@keyframes ghost-float {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* ☕ Hot Beverage */
.burst-trigger[data-particle="☕"] {
    animation: steam-rise 2s infinite;
}

@keyframes steam-rise {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.03);
    }
}

/* 🍰 Shortcake */
.burst-trigger[data-particle="🍰"] {
    animation: cake-yummy 1.5s infinite;
}

@keyframes cake-yummy {
    0%, 100% {
        transform: rotate(-3deg) scale(1);
    }
    50% {
        transform: rotate(3deg) scale(1.05);
    }
}

/* 📱 Mobile Phone */
.burst-trigger[data-particle="📱"] {
    animation: phone-ring 1s infinite;
}

@keyframes phone-ring {
    0%, 100% {
        transform: rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: rotate(-5deg);
    }
    20%, 40%, 60%, 80% {
        transform: rotate(5deg);
    }
}

/* ===== NEW CLICK EFFECTS FOR NEW EMOJIS ===== */

/* Love burst - hearts flying up */
.particle.love-burst {
    animation: love-burst-anim 1.5s ease-out forwards;
}

@keyframes love-burst-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.3) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.8)) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(360deg);
    }
}

/* Idea burst - lightbulbs and question marks */
.particle.idea-burst {
    animation: idea-burst-anim 1.2s ease-out forwards;
}

@keyframes idea-burst-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.6)) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.7);
    }
}

/* Zzz float - sleeping Z letters */
.particle.zzz-float {
    animation: zzz-float-anim 2s ease-out forwards;
}

@keyframes zzz-float-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), calc(var(--ty) - 80px)) scale(1.2);
    }
}

/* Warm embrace - circular orbit */
.particle.warm-embrace {
    animation: warm-embrace-anim 1.5s ease-out forwards;
}

@keyframes warm-embrace-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--tx) * 1.2), calc(var(--ty) * 1.2)) scale(0.8);
    }
}

/* Explosion - mind blown */
.particle.explosion {
    animation: explosion-anim 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes explosion-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4)) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(var(--r));
    }
}

/* Panic scatter - chaotic movement */
.particle.panic-scatter {
    animation: panic-scatter-anim 1s ease-out forwards;
}

@keyframes panic-scatter-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(calc(var(--tx) * 0.3 + 10px), calc(var(--ty) * 0.2)) scale(1.2) rotate(-30deg);
    }
    50% {
        transform: translate(calc(var(--tx) * 0.5 - 10px), calc(var(--ty) * 0.6)) scale(0.9) rotate(30deg);
    }
    75% {
        transform: translate(calc(var(--tx) * 0.8 + 5px), calc(var(--ty) * 0.9)) scale(1.1) rotate(-20deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6) rotate(var(--r));
    }
}

/* Heart explosion - multiple heart types */
.particle.heart-explosion {
    animation: heart-explosion-anim 1.5s ease-out forwards;
}

@keyframes heart-explosion-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.7)) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6);
    }
}

/* Hundred burst - 100 with fire */
.particle.hundred-burst {
    animation: hundred-burst-anim 1s ease-out forwards;
}

@keyframes hundred-burst-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.3) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.7) rotate(360deg);
    }
}

/* Blessed - holy light radiate */
.particle.blessed {
    animation: blessed-anim 1.5s ease-out forwards;
}

@keyframes blessed-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.3);
        filter: brightness(2);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.2);
        filter: brightness(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8);
        filter: brightness(1);
    }
}

/* Broadcast - ripple effect */
.particle.broadcast {
    animation: broadcast-anim 1.5s ease-out forwards;
}

@keyframes broadcast-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 50%;
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(3);
        border: 1px solid rgba(255, 0, 0, 0);
    }
}

/* Pinned - impact bounce */
.particle.pinned {
    animation: pinned-anim 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes pinned-anim {
    0% {
        opacity: 1;
        transform: translate(0, -20px) scale(0.8);
    }
    50% {
        transform: translate(0, 5px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5);
    }
}

/* Birthday celebrate - candles and confetti */
.particle.birthday-celebrate {
    animation: birthday-celebrate-anim 1.5s ease-out forwards;
}

@keyframes birthday-celebrate-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.5)) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6) rotate(var(--r));
    }
}

/* Toast - beer splash */
.particle.toast {
    animation: toast-anim 1.2s ease-out forwards;
}

@keyframes toast-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.5)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5);
    }
}

/* Puppy love - hearts and paws */
.particle.puppy-love {
    animation: puppy-love-anim 1.3s ease-out forwards;
}

@keyframes puppy-love-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.6) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.7)) scale(1.2) rotate(15deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.7) rotate(var(--r));
    }
}

/* Cat playful - meow and paws */
.particle.cat-playful {
    animation: cat-playful-anim 1.2s ease-out forwards;
}

@keyframes cat-playful-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.7) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.6)) scale(1.1) rotate(-15deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8) rotate(var(--r));
    }
}

/* Rainbow magic - unicorn trail */
.particle.rainbow-magic {
    animation: rainbow-magic-anim 1.8s ease-out forwards;
}

@keyframes rainbow-magic-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
        filter: hue-rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.7)) scale(1.3);
        filter: hue-rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6);
        filter: hue-rotate(360deg);
    }
}

/* Banana toss - arc trajectory */
.particle.banana-toss {
    animation: banana-toss-anim 1.2s ease-out forwards;
}

@keyframes banana-toss-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8) rotate(0deg);
    }
    30% {
        transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.3 - 30px)) scale(1.1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.9) rotate(360deg);
    }
}

/* Slow and steady - gentle leaves */
.particle.slow-and-steady {
    animation: slow-and-steady-anim 2s ease-in-out forwards;
}

@keyframes slow-and-steady-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8) rotate(0deg);
    }
    50% {
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.6)) scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6) rotate(360deg);
    }
}

/* Haunting - ghosts fade in out */
.particle.haunting {
    animation: haunting-anim 1.5s ease-in-out forwards;
}

@keyframes haunting-anim {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.5)) scale(1.2);
    }
    60% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.7) rotate(var(--r));
    }
}

/* Coffee aroma - steam and hearts */
.particle.coffee-aroma {
    animation: coffee-aroma-anim 2s ease-out forwards;
}

@keyframes coffee-aroma-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.6);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), calc(var(--ty) - 60px)) scale(1.2);
    }
}

/* Dessert delight - stars and hearts */
.particle.dessert-delight {
    animation: dessert-delight-anim 1.3s ease-out forwards;
}

@keyframes dessert-delight-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.6)) scale(1.3) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.7) rotate(360deg);
    }
}

/* Notification - bubbles flying out */
.particle.notification {
    animation: notification-anim 1.2s ease-out forwards;
}

@keyframes notification-anim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.6)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8);
    }
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .burst-trigger {
        font-size: 40px;
    }
    :root {
        --distance-scale: 0.5;
    }
}