/* ===== ANIMATION KEYFRAMES ===== */

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

@keyframes countUp {
    from { 
        opacity: 0; 
        transform: scale(0.5); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

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

@keyframes suspenseReveal {
    0% { 
        opacity: 0; 
        transform: scale(0.3) rotate(-10deg); 
    }
    50% { 
        transform: scale(1.1) rotate(5deg); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) rotate(0deg); 
    }
}

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

@keyframes spin {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

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

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); 
    }
    50% { 
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); 
    }
}

/* Future: 3D flip animation for cards */
@keyframes flip3D {
    0% {
        transform: perspective(400px) rotateY(0);
    }
    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}

/* Future: Slide in from side */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Future: Zoom explosion effect */
@keyframes zoomExplosion {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Future: Typewriter effect helper */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}