@keyframes fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Initial hidden state — JS adds .is-visible to trigger */
.animate-fade-up {
    opacity: 0;
}

.animate-fade-in {
    opacity: 0;
}

.animate-slide-in-l {
    opacity: 0;
}

.animate-fade-up.is-visible {
    animation: fade-up 0.8s ease-out forwards;
}

.animate-fade-in.is-visible {
    animation: fade-in 0.6s ease-out forwards;
}

.animate-slide-in-l.is-visible {
    animation: slide-in-left 0.6s ease-out forwards;
}

/* Staggered children via CSS custom property */
.animate-fade-up:nth-child(2).is-visible { animation-delay: 0.1s; }
.animate-fade-up:nth-child(3).is-visible { animation-delay: 0.2s; }
.animate-fade-up:nth-child(4).is-visible { animation-delay: 0.3s; }
.animate-fade-up:nth-child(5).is-visible { animation-delay: 0.4s; }
.animate-fade-up:nth-child(6).is-visible { animation-delay: 0.5s; }
.animate-fade-up:nth-child(7).is-visible { animation-delay: 0.6s; }
.animate-fade-up:nth-child(8).is-visible { animation-delay: 0.7s; }
.animate-fade-up:nth-child(9).is-visible { animation-delay: 0.8s; }
.animate-fade-up:nth-child(10).is-visible { animation-delay: 0.9s; }
.animate-fade-up:nth-child(11).is-visible { animation-delay: 1s; }
.animate-fade-up:nth-child(12).is-visible { animation-delay: 1.1s; }
.animate-fade-up:nth-child(13).is-visible { animation-delay: 1.2s; }
.animate-fade-up:nth-child(14).is-visible { animation-delay: 1.3s; }
.animate-fade-up:nth-child(15).is-visible { animation-delay: 1.4s; }

/* Prefers-reduced-motion: skip animations */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .animate-fade-in,
    .animate-slide-in-l {
        opacity: 1;
        animation: none !important;
    }
}