/* =====================================================
   ANIMATIONS — Fun Interactive Game
   ===================================================== */

/* ---- Shimmer ---- */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---- Bounce ---- */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* ---- Shake ---- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ---- Heavy Shake (screen) ---- */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-10px, -5px) rotate(-1deg); }
    20% { transform: translate(10px, 5px) rotate(1deg); }
    30% { transform: translate(-8px, 3px) rotate(-0.5deg); }
    40% { transform: translate(8px, -3px) rotate(0.5deg); }
    50% { transform: translate(-5px, 5px) rotate(-0.3deg); }
    60% { transform: translate(5px, -2px) rotate(0.3deg); }
    70% { transform: translate(-3px, 3px) rotate(-0.2deg); }
    80% { transform: translate(3px, -1px) rotate(0.1deg); }
    90% { transform: translate(-1px, 1px) rotate(0); }
}

/* ---- Spin ---- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Pulse ---- */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* ---- Glow Pulse ---- */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px var(--pink-glow); }
    50% { box-shadow: 0 0 30px var(--pink-glow), 0 0 60px var(--pink-glow); }
}

/* ---- Float ---- */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(3deg); }
    50% { transform: translateY(-5px) rotate(-2deg); }
    75% { transform: translateY(-20px) rotate(1deg); }
}

/* ---- Wobble ---- */
@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    45% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    75% { transform: rotate(-3deg); }
}

/* ---- Fade In ---- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- Fade Out ---- */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ---- Slide In from Bottom ---- */
@keyframes slideInUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ---- Slide In from Right ---- */
@keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ---- Slide Out to Right ---- */
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100px); opacity: 0; }
}

/* ---- Slide In from Left ---- */
@keyframes slideInLeft {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ---- Zoom In ---- */
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ---- Zoom Out ---- */
@keyframes zoomOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.8); opacity: 0; }
}

/* ---- Pop (spring) ---- */
@keyframes pop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ---- Score Pop ---- */
@keyframes scorePop {
    0% { transform: scale(1); }
    25% { transform: scale(1.4); color: var(--gold); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ---- Confetti Fall ---- */
@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ---- Heart Float Up ---- */
@keyframes heartFloat {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(0.5) rotate(45deg);
        opacity: 0;
    }
}

/* ---- Coin Spin ---- */
@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* ---- Coin Float ---- */
@keyframes coinFloat {
    0% {
        transform: translateY(0) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) rotateY(720deg);
        opacity: 0;
    }
}

/* ---- Achievement Slide ---- */
@keyframes achievementSlide {
    0% { transform: translateX(120%); opacity: 0; }
    15% { transform: translateX(-10px); opacity: 1; }
    20% { transform: translateX(0); }
    85% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* ---- Button Escape ---- */
@keyframes buttonEscape {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(8px) translateY(-6px); }
    50% { transform: translateX(-8px) translateY(6px); }
    75% { transform: translateX(5px) translateY(-4px); }
    100% { transform: translateX(0) translateY(0); }
}

/* ---- Button Caught ---- */
@keyframes buttonCaught {
    0% { transform: scale(1); }
    30% { transform: scale(0.9) rotate(-5deg); }
    60% { transform: scale(1.05) rotate(3deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ---- Taunt Pop ---- */
@keyframes tauntPop {
    0% { transform: translateX(-50%) scale(0); }
    60% { transform: translateX(-50%) scale(1.06); }
    100% { transform: translateX(-50%) scale(1); }
}

/* ---- Button Shrink/Grow ---- */
@keyframes buttonShrink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.7); }
}

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

/* ---- Color Cycle ---- */
@keyframes colorCycle {
    0% { border-color: var(--pink); background: rgba(255, 45, 117, 0.15); }
    25% { border-color: var(--cyan); background: rgba(0, 212, 255, 0.15); }
    50% { border-color: var(--gold); background: rgba(255, 215, 0, 0.15); }
    75% { border-color: var(--green); background: rgba(0, 255, 136, 0.15); }
    100% { border-color: var(--pink); background: rgba(255, 45, 117, 0.15); }
}

/* ---- Progress Fill ---- */
@keyframes progressFill {
    from { width: 0%; }
}

/* ---- Emoji Float (Landing) ---- */
@keyframes emojiFloat {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(80vh) rotate(20deg) scale(1);
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-10vh) rotate(360deg) scale(0.5);
        opacity: 0;
    }
}

/* ---- Gradient Shift (Background) ---- */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- Star Twinkle ---- */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ---- Slide Down (loading text) ---- */
@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ---- Typing Cursor ---- */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ---- Firework Burst ---- */
@keyframes fireworkBurst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* ---- Ripple ---- */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ---- Blue Screen (Fake) ---- */
@keyframes bsodFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

/* ---- Rubber Band ---- */
@keyframes rubberBand {
    0% { transform: scaleX(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    50% { transform: scaleX(1.15) scaleY(0.85); }
    65% { transform: scaleX(0.95) scaleY(1.05); }
    75% { transform: scaleX(1.05) scaleY(0.95); }
    100% { transform: scaleX(1); }
}

/* ---- Particle Fade ---- */
@keyframes particleFade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

/* ---- Balloon Float ---- */
@keyframes balloonFloat {
    0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
    10% { opacity: 1; transform: translateY(80vh) scale(1); }
    100% { transform: translateY(-20vh) scale(0.8); opacity: 0.5; }
}

/* ---- Flip ---- */
@keyframes flipIn {
    0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}

@keyframes flipOut {
    0% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
    100% { transform: perspective(400px) rotateY(-90deg); opacity: 0; }
}

/* ---- Jello ---- */
@keyframes jello {
    0%, 100% { transform: scale3d(1,1,1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
}

/* ---- Utility classes ---- */
.animate-bounce { animation: bounce 1s ease infinite; }
.animate-shake { animation: shake 0.5s ease; }
.animate-screen-shake { animation: screenShake 0.5s ease; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s ease infinite; }
.animate-glow { animation: glowPulse 2s ease infinite; }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-wobble { animation: wobble 0.8s ease; }
.animate-fade-in { animation: fadeIn 0.5s ease; }
.animate-slide-up { animation: slideInUp 0.5s ease; }
.animate-slide-right { animation: slideInRight 0.4s ease; }
.animate-zoom-in { animation: zoomIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.animate-pop { animation: pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.animate-rubber { animation: rubberBand 0.8s ease; }
.animate-jello { animation: jello 0.8s ease; }
.animate-flip-in { animation: flipIn 0.5s ease; }
.animate-score-pop { animation: scorePop 0.5s ease; }

/* Stagger delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }