/* === Keyframe Animations === */

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

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

@keyframes wobble {
    0% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

@keyframes correct-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes wrong-wobble {
    0% { transform: translateX(0); background-color: var(--color-wrong-bg); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

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

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

@keyframes heart-float {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-120px) scale(0.5); opacity: 0; }
}

@keyframes sticker-appear {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px var(--accent-glow); }
    50% { box-shadow: 0 0 30px var(--accent-glow), 0 0 50px rgba(255, 105, 180, 0.2); }
}

@keyframes pulse-hint {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); box-shadow: 0 0 20px var(--accent-glow); }
}

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

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

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

/* === Utility animation classes === */
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-bounce { animation: bounce 1s ease infinite; }
.anim-pop { animation: pop-in 0.4s ease; }
.anim-slide-up { animation: slide-up 0.5s ease; }
.anim-pulse { animation: pulse-glow 2s ease-in-out infinite; }
.anim-wobble { animation: wobble 0.5s ease; }
.anim-sparkle { animation: sparkle 0.8s ease forwards; }