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

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

@keyframes carDrive {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
}

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

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

@keyframes correctFlash {
    0% { background-color: var(--success-light); }
    50% { background-color: var(--success); }
    100% { background-color: var(--success-light); }
}

@keyframes incorrectFlash {
    0% { background-color: var(--error-light); }
    50% { background-color: var(--error); }
    100% { background-color: var(--error-light); }
}

/* Staggered entrance for cards */
.stagger-enter > *:nth-child(1) { animation: fadeInUp 0.3s ease 0.0s both; }
.stagger-enter > *:nth-child(2) { animation: fadeInUp 0.3s ease 0.05s both; }
.stagger-enter > *:nth-child(3) { animation: fadeInUp 0.3s ease 0.1s both; }
.stagger-enter > *:nth-child(4) { animation: fadeInUp 0.3s ease 0.15s both; }
.stagger-enter > *:nth-child(5) { animation: fadeInUp 0.3s ease 0.2s both; }
.stagger-enter > *:nth-child(6) { animation: fadeInUp 0.3s ease 0.25s both; }

/* View transitions */
.view-enter {
    animation: fadeInUp 0.25s ease;
}

/* Timer animations */
.timer-pulse {
    animation: pulse 0.5s ease infinite;
}