@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.animate-fade-in-down {
    animation: fadeInDown 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up,
    .animate-fade-in-down {
        animation-duration: 0.01ms;
        transition: opacity 0.2s ease-out;
    }
}