.scroll-animate {
    opacity: 0;
    will-change: opacity, transform;
}
.scroll-animate.is-visible {
    opacity: 1;
}

.fade-in {
    transition: opacity 0.8s var(--ease);
}

.slide-up {
    transform: translateY(34px);
    transition: opacity 0.8s var(--ease),
                transform 0.8s var(--ease);
}
.slide-up.is-visible {
    transform: translateY(0);
}

.scale-in {
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease),
                transform 0.7s var(--ease);
}
.scale-in.is-visible {
    transform: translateY(0);
}

.card-grid > .scroll-animate:nth-child(1).is-visible { transition-delay: 0s; }
.card-grid > .scroll-animate:nth-child(2).is-visible { transition-delay: 0.06s; }
.card-grid > .scroll-animate:nth-child(3).is-visible { transition-delay: 0.12s; }
.card-grid > .scroll-animate:nth-child(4).is-visible { transition-delay: 0.18s; }
.card-grid > .scroll-animate:nth-child(5).is-visible { transition-delay: 0.24s; }
.card-grid > .scroll-animate:nth-child(6).is-visible { transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}