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

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

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

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

@keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(-10deg); }
    20% { transform: rotate(12deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(9deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

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

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

/* Applied Animations */
.bounce-animation {
    animation: bounce 0.8s ease-in-out;
}

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

.clapping {
    animation: clap 0.5s ease-in-out infinite;
}

.waving-character {
    animation: wave 2.5s ease-in-out infinite;
    transform-origin: bottom right;
}

.sparkle {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    content: '✨';
    animation: sparkle 0.8s ease-in-out forwards;
    z-index: 10;
}

.floating {
    animation: float 3s ease-in-out infinite;
}

/* Specific Element Animations */
#happy-box {
    transition: all 0.3s ease;
}

#happy-box.highlight {
    animation: pulse 0.8s ease-in-out;
    border-color: gold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

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