/* Animation Keyframes */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Text Animation */
@keyframes textReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
        letter-spacing: -5px;
    }
    50% {
        letter-spacing: 5px;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: normal;
    }
}

/* Animation Utility Classes */
.animate {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.animate.slide-left {
    transform: translateX(-100px);
}

.animate.slide-right {
    transform: translateX(100px);
}

.animate.fade-up {
    transform: translateY(40px);
}

.animate.scale {
    transform: scale(0.8);
}

.animate.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.text-reveal {
    opacity: 0;
    animation: textReveal 1.5s ease forwards;
    display: inline-block;
    color: var(--color-white) !important;
}

.text-reveal.delay-100 { animation-delay: 100ms; }
.text-reveal.delay-200 { animation-delay: 200ms; }
.text-reveal.delay-300 { animation-delay: 300ms; }
.text-reveal.delay-400 { animation-delay: 400ms; }
.text-reveal.delay-500 { animation-delay: 500ms; }

/* Animation Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }