/* Tile animations */
@keyframes tile-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes tile-flip {
    0% {
        transform: rotateX(0);
    }
    50% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(0);
    }
}

.tile-flip {
    animation: tile-flip var(--animation-speed) var(--animation-easing);
}

/* Row shake animation for invalid words */
@keyframes shake {
    0%, 20%, 40%, 60%, 80%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
}

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

/* Key press animation */
@keyframes key-press {
    0% {
        transform: scale(1);
        background-color: var(--color-key-background);
    }
    50% {
        transform: scale(0.95);
        background-color: var(--color-key-background-active);
    }
    100% {
        transform: scale(1);
        background-color: var(--color-key-background);
    }
}

.key-pressed {
    animation: key-press 0.1s ease-in-out;
}

/* Modal animations */
.modal {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-content {
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal.modal-open .modal-content {
    transform: scale(1);
}

/* Toast slide animations */
@keyframes toast-slide-in {
    0% {
        transform: translateY(-100px) translateX(-50%);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translateX(-50%);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    0% {
        transform: translateY(0) translateX(-50%);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(-50%);
        opacity: 0;
    }
}

.toast {
    animation: toast-slide-in 0.3s ease-out;
}

.toast.toast-hide {
    animation: toast-slide-out 0.3s ease-in;
}

/* Guess distribution bar animation */
@keyframes bar-fill {
    0% {
        width: 0;
    }
    100% {
        width: var(--bar-width);
    }
}

.guess-bar {
    animation: bar-fill 0.5s ease-out;
    animation-delay: var(--animation-delay, 0s);
}

/* Success celebration animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.tile-win {
    animation: bounce 0.6s ease-in-out;
    animation-delay: var(--animation-delay);
}

/* Reveal animation for tiles */
@keyframes reveal {
    0% {
        transform: rotateX(0);
        background-color: var(--color-evaluated-background);
        border-color: var(--color-tone-3);
        color: var(--color-text-primary);
    }
    50% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(0);
    }
}

.tile-reveal {
    animation: reveal var(--animation-speed) var(--animation-easing);
    animation-fill-mode: forwards;
}

/* Keyboard key state transitions */
.key {
    transition: all 0.1s ease;
}

.key-correct,
.key-present,
.key-absent {
    transition: all 0.3s ease;
}

/* Loading animation for word lists */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Flip animation for theme toggle */
@keyframes flip {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(180deg);
    }
}

.theme-flip {
    animation: flip 0.6s ease-in-out;
}

/* Slide animations for modals */
@keyframes slide-up {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-down {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100px);
        opacity: 0;
    }
}

.modal-slide-up .modal-content {
    animation: slide-up 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-slide-down .modal-content {
    animation: slide-down 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Countdown timer animation */
@keyframes tick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

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

/* Focus animations */
@keyframes focus-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(106, 170, 100, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(106, 170, 100, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(106, 170, 100, 0);
    }
}

.focus-animate:focus {
    animation: focus-ring 0.6s ease-out;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .tile-flip,
    .shake,
    .key-pressed,
    .toast,
    .tile-win,
    .tile-reveal {
        animation: none !important;
    }
    
    .modal,
    .modal-content,
    .key,
    .guess-bar {
        transition: none !important;
    }
}

/* Performance optimizations */
.tile,
.key,
.modal-content {
    will-change: transform;
}

.tile-flip,
.shake,
.tile-win {
    transform-origin: center;
    backface-visibility: hidden;
}

/* High contrast mode animations */
@media (prefers-contrast: high) {
    .tile-flip,
    .tile-reveal {
        animation-duration: 0.1s;
    }
    
    .shake {
        animation-duration: 0.3s;
    }
}

/* Animation delays for sequential reveals */
.tile[data-col="0"] { --animation-delay: 0ms; }
.tile[data-col="1"] { --animation-delay: 100ms; }
.tile[data-col="2"] { --animation-delay: 200ms; }
.tile[data-col="3"] { --animation-delay: 300ms; }
.tile[data-col="4"] { --animation-delay: 400ms; }

/* Success row animation */
@keyframes success-row {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.02);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.success-row {
    animation: success-row 0.8s ease-in-out;
}