/* Keyframe Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 1s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

/* Delay utilities */
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-600 { animation-delay: 600ms; }
.animation-delay-800 { animation-delay: 800ms; }
.animation-delay-1000 { animation-delay: 1000ms; }
.animation-delay-1200 { animation-delay: 1200ms; }
.animation-delay-1400 { animation-delay: 1400ms; }
.animation-delay-1600 { animation-delay: 1600ms; }
.animation-delay-1800 { animation-delay: 1800ms; }
.animation-delay-2000 { animation-delay: 2000ms; }
.animation-delay-2200 { animation-delay: 2200ms; }
.animation-delay-2400 { animation-delay: 2400ms; }
.animation-delay-2600 { animation-delay: 2600ms; }

/* Initially hide animated elements */
.animated {
    opacity: 0;
}