@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.smiley-animation {
    animation: bounce 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.image-container img {
    animation: fadeIn 0.5s ease-in-out;
}

.answer-btn {
    transition: transform 0.2s;
}

.answer-btn:active {
    transform: scale(0.95);
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10px) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(300px) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

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

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

.celebration-image {
    animation: float 4s ease-in-out infinite;
}

.confetti1 { animation: confettiFall 4s ease-in-out infinite 0s; }
.confetti2 { animation: confettiFall 4s ease-in-out infinite 0.2s; }
.confetti3 { animation: confettiFall 4s ease-in-out infinite 0.4s; }
.confetti4 { animation: confettiFall 4s ease-in-out infinite 0.6s; }
.confetti5 { animation: confettiFall 4s ease-in-out infinite 0.8s; }
.confetti6 { animation: confettiFall 4s ease-in-out infinite 1s; }
.confetti7 { animation: confettiFall 4s ease-in-out infinite 1.2s; }
.confetti8 { animation: confettiFall 4s ease-in-out infinite 1.4s; }