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

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate {
    opacity: 0;
}

.animate.is-visible {
    animation-fill-mode: forwards;
}

.animate--fade-up.is-visible {
    animation: fadeInUp 0.5s ease forwards;
}

.animate--fade.is-visible {
    animation: fadeIn 0.4s ease forwards;
}

.animate--slide-left.is-visible {
    animation: slideInLeft 0.5s ease forwards;
}

.animate--slide-right.is-visible {
    animation: slideInRight 0.5s ease forwards;
}

.animate--scale.is-visible {
    animation: scaleIn 0.4s ease forwards;
}

.animate--delay-1 { animation-delay: 50ms; }
.animate--delay-2 { animation-delay: 100ms; }
.animate--delay-3 { animation-delay: 150ms; }
.animate--delay-4 { animation-delay: 200ms; }
.animate--delay-5 { animation-delay: 250ms; }
.animate--delay-6 { animation-delay: 300ms; }
.animate--delay-7 { animation-delay: 350ms; }
.animate--delay-8 { animation-delay: 400ms; }

body {
    animation: fadeIn 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .animate {
        opacity: 1;
    }

    .animate.is-visible {
        animation: none;
    }

    body {
        animation: none;
    }
}