/* Базовое скрытое состояние */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

/* Активное состояние (после пересечения) */
.scroll-animate.active {
    opacity: 1;
    transform: translateY(0);
}

/* Вариации эффектов */
.scroll-animate.fade-in {
    transform: none;
}

.scroll-animate.zoom-in {
    transform: scale(0.9);
}

.scroll-animate.zoom-in.active {
    transform: scale(1);
}

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

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

.scroll-animate.slide-left.active,
.scroll-animate.slide-right.active {
    transform: translateX(0);
}

/* Утилиты задержек — удобно для "ступенчатого" появления */
.sa-delay-0 {
    transition-delay: 0ms;
}

.sa-delay-100 {
    transition-delay: 100ms;
}

.sa-delay-150 {
    transition-delay: 150ms;
}

.sa-delay-200 {
    transition-delay: 200ms;
}

.sa-delay-250 {
    transition-delay: 250ms;
}

.sa-delay-300 {
    transition-delay: 300ms;
}

.sa-delay-400 {
    transition-delay: 400ms;
}

.sa-delay-500 {
    transition-delay: 500ms;
}

.sa-delay-600 {
    transition-delay: 600ms;
}

.sa-delay-700 {
    transition-delay: 700ms;
}

.sa-delay-800 {
    transition-delay: 800ms;
}

.sa-delay-900 {
    transition-delay: 900ms;
}

/* Утилиты длительности анимации */
.sa-duration-400 {
    transition-duration: 400ms;
}

.sa-duration-600 {
    transition-duration: 600ms;
}

.sa-duration-800 {
    transition-duration: 800ms;
}

.sa-duration-1000 {
    transition-duration: 1000ms;
}

/* Предпочтение уменьшенного движения — полностью отключаем */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}