/* =========================================================
   SCROLL REVEAL — появление блоков при скролле
   ========================================================= */

/* --- Базовая анимация: снизу вверх с прозрачностью --- */
.reveal {
    opacity: 0;
    transform: translateY(calc(var(--app-em)*1.25));
    transition:
        opacity .6s cubic-bezier(.22, 1, .36, 1),
        transform .6s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* --- Модификатор: только прозрачность, без сдвига --- */
.reveal--fade {
    transform: none;
}

/* --- Модификатор: слева --- */
.reveal--left {
    transform: translateX(calc(var(--app-em)*-1.5));
}

/* --- Модификатор: справа --- */
.reveal--right {
    transform: translateX(calc(var(--app-em)*1.5));
}

/* --- Модификатор: снизу (усиленный) --- */
.reveal--up {
    transform: translateY(calc(var(--app-em)*2));
}

/* --- Модификатор: уменьшенный вариант --- */
.reveal--soft {
    transform: translateY(calc(var(--app-em)*0.5));
    transition-duration: .45s;
}

/* --- Задержки: для каскадного появления сеток --- */
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }
.reveal--delay-4 { transition-delay: .32s; }
.reveal--delay-5 { transition-delay: .40s; }
.reveal--delay-6 { transition-delay: .48s; }

/* --- Reduced motion: отключаем всё --- */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   Автоматический каскад внутри сеток
   Достаточно добавить .reveal на карточку, задержки подставятся
   ========================================================= */
.features__grid > .reveal:nth-child(1),
.team-grid > .reveal:nth-child(1),
.cars-grid > .reveal:nth-child(1),
.promo-grid > .reveal:nth-child(1),
.articles-grid > .reveal:nth-child(1),
.steps > .reveal:nth-child(1)   { transition-delay: .08s; }

.features__grid > .reveal:nth-child(2),
.team-grid > .reveal:nth-child(2),
.cars-grid > .reveal:nth-child(2),
.promo-grid > .reveal:nth-child(2),
.articles-grid > .reveal:nth-child(2),
.steps > .reveal:nth-child(2)   { transition-delay: .16s; }

.features__grid > .reveal:nth-child(3),
.team-grid > .reveal:nth-child(3),
.cars-grid > .reveal:nth-child(3),
.promo-grid > .reveal:nth-child(3),
.articles-grid > .reveal:nth-child(3),
.steps > .reveal:nth-child(3)   { transition-delay: .24s; }

.features__grid > .reveal:nth-child(4),
.team-grid > .reveal:nth-child(4),
.cars-grid > .reveal:nth-child(4),
.promo-grid > .reveal:nth-child(4),
.articles-grid > .reveal:nth-child(4),
.steps > .reveal:nth-child(4)   { transition-delay: .32s; }

.features__grid > .reveal:nth-child(5),
.steps > .reveal:nth-child(5)   { transition-delay: .40s; }

.features__grid > .reveal:nth-child(6),
.steps > .reveal:nth-child(6)   { transition-delay: .48s; }