/* Animations for LexiDrop Game */

/* Letter Drop Animation */
@keyframes letterDrop {
    0% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0);
    }
}

.letter-drop {
    animation: letterDrop 0.5s ease-in;
}

/* Letter Move Animation */
@keyframes letterMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--move-distance));
    }
}

.letter-move {
    animation: letterMove 0.2s ease-out forwards;
}

/* Letter Position Animation (for both X and Y) */
@keyframes letterPosition {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(var(--move-x), var(--move-y));
    }
}

.letter-position {
    animation: letterPosition 0.2s ease-out forwards;
}

/* Valid Word Flash Animation */
@keyframes validWordFlash {
    0%, 100% {
        background-color: inherit;
        color: inherit;
    }
    50% {
        background-color: white;
        color: black;
    }
}

.valid-word-flash {
    animation: validWordFlash 0.5s ease-in-out;
}

/* Invalid Word Flash Animation */
@keyframes invalidWordFlash {
    0%, 100% {
        background-color: inherit;
        color: inherit;
    }
    50% {
        background-color: #FF0000;
        color: white;
    }
}

.invalid-word-flash {
    animation: invalidWordFlash 0.5s ease-in-out;
}

/* Word Fade Out Animation */
@keyframes wordFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.word-fade-out {
    animation: wordFadeOut 0.5s ease-out forwards;
}

/* Level Up Animation */
@keyframes levelUp {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.level-up {
    animation: levelUp 1s ease-out;
}

/* Game Over Animation */
@keyframes gameOver {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.game-over {
    animation: gameOver 0.5s ease-out;
}

/* Shake Animation for Error */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

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

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

.pulse {
    animation: pulse 0.5s infinite;
}

/* Fade In Animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in forwards;
}

/* Fade Out Animation */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

/* Power-up Drop Animation */
@keyframes powerUpDrop {
    0% {
        transform: translateY(-30px) rotate(0deg);
    }
    100% {
        transform: translateY(0) rotate(360deg);
    }
}

.power-up-drop {
    animation: powerUpDrop 0.5s ease-in;
}

/* Power-up Pulse Animation */
@keyframes powerUpPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.power-up-pulse {
    animation: powerUpPulse 1s infinite;
}

/* Slow Effect Animation */
@keyframes slowEffect {
    0% {
        box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(33, 150, 243, 0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
    }
}

.slow-effect {
    animation: slowEffect 2s infinite;
}

/* Freeze Effect Animation */
@keyframes freezeEffect {
    0% {
        box-shadow: 0 0 5px rgba(0, 188, 212, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 188, 212, 0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 188, 212, 0.5);
    }
}

.freeze-effect {
    animation: freezeEffect 1s infinite;
}

/* Countdown Animation */
@keyframes countdownPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.countdown-display {
    animation: countdownPulse 1s infinite;
}

/* Level Up Notification Animation */
@keyframes levelUpNotification {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(-20px);
    }
    20% {
        opacity: 1;
        transform: scale(1.2) translateY(0);
    }
    80% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.2) translateY(20px);
    }
}

.level-up-notification {
    animation: levelUpNotification 2s ease-out forwards;
}