/* Animation Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Animation Classes */
.animate-fade-in-up {
    opacity: 0; /* Hidden by default */
    animation: fadeInUp 0.8s ease-out forwards;
    animation-play-state: paused; /* Pause until visible */
}

.animate-slide-in-left {
    opacity: 0;
    animation: slideInLeft 0.8s ease-out forwards;
    animation-play-state: paused;
}

.animate-slide-in-right {
    opacity: 0;
    animation: slideInRight 0.8s ease-out forwards;
    animation-play-state: paused;
}

.animate-zoom-in {
    opacity: 0;
    animation: zoomIn 0.7s ease-out forwards;
    animation-play-state: paused;
}

/* Animation Delays */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }


/* Utility Classes for Text Colors */
.text-primary-light { color: var(--primary-color); }
.text-secondary-light { color: var(--secondary-color); }
.text-white-75 { color: rgba(255, 255, 255, 0.75); }
.text-white-50 { color: rgba(255, 255, 255, 0.5); }