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

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

@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); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
    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 star-pop {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes sticker-appear {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.2) 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 twinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes spin-in {
    from { transform: rotate(0deg); }
    to { transform: rotate(720deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px var(--accent-glow, rgba(255,211,42,0.4)); }
    50% { box-shadow: 0 0 30px var(--accent-glow, rgba(255,211,42,0.6)); }
}

@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 transform-flash {
    0% { filter: brightness(1); }
    50% { filter: brightness(2); }
    100% { filter: brightness(1); }
}

/* === Utility animation classes === */
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-pop { animation: pop-in 0.4s ease; }
.anim-slide-up { animation: slide-up 0.5s ease; }
.anim-spin { animation: spin-in 0.6s ease; }
.anim-pulse { animation: pulse-glow 2s ease-in-out infinite; }

/* Screen transitions */
.screen.entering {
    animation: fade-in 0.4s ease forwards;
}