/* Animations for the game */

@keyframes sparkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(360deg);
        opacity: 0;
    }
}

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

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

.sparkles {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    pointer-events: none;
    display: none;
    z-index: 10;
    overflow: visible;
}

.sparkle {
    position: absolute;
    font-size: 24px;
    animation: sparkle 1s ease-in-out;
}

.sparkles[data-visible="true"] {
    display: block;
}

.clapping {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 40px;
    display: none;
    z-index: 10;
}

.clapping::before {
    content: '👏';
    animation: clapping 0.5s infinite;
}

.clapping[data-visible="true"] {
    display: block;
}

.image-choice.correct {
    position: relative;
    z-index: 5;
    animation: pulse 0.5s ease-in-out 2;
    box-shadow: 0 0 20px rgba(74, 207, 102, 0.8);
}

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

.shake {
    animation: shake 0.5s ease-in-out;
}