/**
 * Поочерёдное появление карточек секций по скроллу.
 *
 * Класс sm-anim вешает JS (redesign.js, initReveal) — без JS всё видно сразу.
 * После отыгрыша JS снимает классы, чтобы transition-правила не мешали
 * собственным hover-эффектам карточек (например, у .sm-outdoor__card).
 *
 * Правила цепляются к самому sm-anim, а не к перечню секций: список групп
 * задан один раз — в initReveal, и новые блоки подхватываются сами.
 * Секции agency и benefits исключены везде, включая задержки: у них своя
 * анимация в своих файлах, со своим шагом и по своим внутренним элементам.
 *
 * Ритм задан переменными: секции с другим количеством карточек меняют шаг
 * одной строкой, не переопределяя каждую задержку и не воюя специфичностью.
 */

/*
 * Значения по умолчанию живут прямо в var(), а не отдельным правилом:
 * правило с :not() специфичнее, чем переопределение на классе секции,
 * и перебивало бы его.
 */
.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list) > * {
	opacity: 0;
	transform: translateY(var(--sm-reveal-shift, 24px));
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > * {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/*
 * Задержка = база + шаг * порядковый номер. Восьми хватает всем секциям,
 * кроме каталога, — у него свой шаг, поэтому и он укладывается.
 */
.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(1) {
	transition-delay: var(--sm-reveal-base, 0.1s);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(2) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s));
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(3) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 2);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(4) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 3);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(5) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 4);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(6) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 5);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(7) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 6);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(8) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 7);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(9) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 8);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(10) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 9);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(11) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 10);
}

.sm-anim:not(.sm-agency__cards):not(.sm-benefits__list).is-inview > :nth-child(12) {
	transition-delay: calc(var(--sm-reveal-base, 0.1s) + var(--sm-reveal-step, 0.15s) * 11);
}

/*
 * Лента наград прокручивается вбок, и сдвиг по вертикали на ней читается
 * как рывок. Оставляем только проявление.
 */
.sm-awards__track.sm-anim {
	--sm-reveal-shift: 0px;
}

/*
 * Строк каталога на экране двенадцать: с общим шагом последняя ждала бы
 * почти две секунды. Уменьшаем шаг и сдвиг — список набегает волной
 * и успевает отыграть раньше, чем JS снимет классы.
 */
.sm-table__list.sm-anim {
	--sm-reveal-shift: 12px;
	--sm-reveal-base: 0.02s;
	--sm-reveal-step: 0.05s;
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
	.sm-anim > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}