/**
 * Animation Library for Kids Games
 * Reusable animations for all games
 */

/* Entrance Animations */
@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slide-in-up {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-down {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Exit Animations */
@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slide-out-up {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(2deg);
    }
    75% {
        transform: rotate(-2deg);
    }
}

@keyframes swing {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(3deg);
    }
    75% {
        transform: rotate(-3deg);
    }
}

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

@keyframes wobble {
    0%, 100% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-5px) rotate(-2deg);
    }
    30% {
        transform: translateX(5px) rotate(2deg);
    }
    45% {
        transform: translateX(-5px) rotate(-2deg);
    }
    60% {
        transform: translateX(3px) rotate(1deg);
    }
    75% {
        transform: translateX(-3px) rotate(-1deg);
    }
}

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

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

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

@keyframes pop-out {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Star & Sparkle Animations */
@keyframes twinkle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

@keyframes star-grow {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0);
        opacity: 0;
    }
}

/* Fall Animation for Confetti */
@keyframes fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Celebration Animations */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotateZ(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotateZ(720deg);
        opacity: 0;
    }
}

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

@keyframes rainbow-shine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Flip Animation (for cards) */
@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

@keyframes flip-back {
    0% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

/* Bounce Animation (for buttons) */
@keyframes bounce-big {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-5px);
    }
}

/* Slide Animation for correct/wrong */
@keyframes slide-correct {
    0% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(10px) scale(1.1);
    }
    100% {
        transform: translateX(0) scale(1);
        filter: brightness(1.2);
    }
}

@keyframes slide-wrong {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

/* Glow Animation */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 1);
    }
}

@keyframes glow-text {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 215, 0, 1);
    }
}

/* Rainbow Text Animation */
@keyframes rainbow-text {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}

/* Drawing Animation (for tracing) */
@keyframes draw-stroke {
    0% {
        stroke-dashoffset: var(--length);
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Animate.css-style animations */
@keyframes jello {
    0%, 11.1%, 100% {
        transform: none;
    }
    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

/* Utility Animation Classes */
.animate-bounce-in { animation: bounce-in 0.6s ease-out; }
.animate-slide-in-up { animation: slide-in-up 0.5s ease-out; }
.animate-fade-in { animation: fade-in 0.5s ease-out; }
.animate-zoom-in { animation: zoom-in 0.5s ease-out; }
.animate-bounce { animation: bounce 0.6s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 2s linear infinite; }
.animate-pop { animation: pop 0.5s ease-out forwards; }
.animate-twinkle { animation: twinkle 1.5s ease-in-out infinite; }
.animate-correct { animation: slide-correct 0.5s ease-out; }
.animate-wrong { animation: slide-wrong 0.5s ease-out; }
.animate-glow { animation: glow 1.5s ease-in-out infinite; }