/* ===========================================================================
   my-ui — появление блоков при прокрутке

   Классы раздаёт reveal.js:
     html.ui-rv              скрипт работает (без него ничего не скрыто)
     .ui-reveal              блок оживает: проявление + подъём снизу
     .ui-reveal--wipe        вместо подъёма — «шторка» слева направо
     .ui-reveal--slow        шторка медленнее (крупные плиты, карта)
     .ui-reveal--keep        на телефоне держит десктопный темп (карточки)
     .ui-reveal--quick       короткий блок у самого низа (служебная лента подвала)
     .ui-reveal--prime       кадр раздачи классов — без перехода
     .is-in                  блок в окне, показан

   Как это должно ощущаться и почему такие числа — reveal.md.
   =========================================================================== */

/* Базовое: проявление 0.49 с и подъём на 56px за 0.63 с.

   Путь: 18px/0.55 с → 30/0.8 → 40 → 56/1.1–1.3 («медленнее и заметнее»
   трижды) → 0.7/0.9 → ×0.7 = 0.49/0.63 («ещё на 30% быстрее», 08.09).
   Ускорение сделано ДЛИТЕЛЬНОСТЬЮ, кривые те же: так начало остаётся
   мягким и движение не становится линейным.

   Проявление идёт по симметричной кривой и занимает 78% подъёма: на середине
   подъёма блок виден примерно наполовину, а не на 98%, и прозрачность
   читается. Эту долю при любом ускорении сохранять — иначе прозрачность
   снова пропадёт. Подъём — своей кривой с живым концом: последние 10% пути
   проходят за 81 мс, половина пути — за 217 мс.

   background-color в списке обязателен: классы остаются на блоке навсегда,
   и без него заливка карточки под курсором менялась бы рывком. */
.ui-rv .ui-reveal {
	opacity: 0;
	transform: translate3d(0, 56px, 0);
	transition: opacity 0.49s cubic-bezier(0.4, 0, 0.6, 1),
	            transform 0.63s cubic-bezier(0.2, 0.5, 0.5, 0.6),
	            background-color var(--ui-base) var(--ui-ease);
}

/* Короткий блок у самого низа страницы (служебная лента подвала) — вдвое
   короче ход и на 35% быстрее: 28px, 0.36/0.47 с. До него доходят, уже
   прокрутив всё, и ждать полного подъёма не должны; на большом экране
   лента к тому же тянется во всю ширину, и полный ход в 56px читался
   у неё крупнее, чем у карточек над ней.

   Правило стоит ДО .is-in: вес у них одинаковый, конечное состояние
   должно перебивать начальное — значит, идти следом. */
.ui-rv .ui-reveal--quick {
	transform: translate3d(0, 28px, 0);
	transition: opacity 0.36s cubic-bezier(0.4, 0, 0.6, 1),
	            transform 0.47s cubic-bezier(0.2, 0.5, 0.5, 0.6),
	            background-color var(--ui-base) var(--ui-ease);
}

.ui-rv .ui-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* «Шторка» слева направо: заголовки и крупные плиты. Ни прозрачности,
   ни сдвига — блок стоит на месте и открывается обрезкой. transform не
   задаём вовсе, чтобы не спорить с inline-стилями (параллакс и т. п.).

   Шторку ведёт Web Animations API из reveal.js — по ширине ТЕКСТА,
   а не блока. Эти правила — запасной путь для браузеров без el.animate;
   кривая та же, что у скрипта. */
.ui-rv .ui-reveal--wipe {
	opacity: 1;
	transform: none;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.59s cubic-bezier(0.25, 0.55, 0.6, 0.9);
}

.ui-rv .ui-reveal--wipe.is-in {
	clip-path: inset(0 0 0 0);
}

.ui-rv .ui-reveal--wipe.ui-reveal--slow {
	transition: clip-path 0.85s cubic-bezier(0.25, 0.55, 0.6, 0.9);
}

/* Кадр после раздачи класса — без перехода (см. prime() в reveal.js) */
.ui-rv .ui-reveal--prime {
	transition: none;
}

/* На телефоне: 0.6 / 0.78 с своими кривыми. Прозрачность не сокращена,
   а растянута относительно подъёма (до 90% плотности к 70% пути) — иначе
   проявления во время подъёма не видно. Лента подвала на телефоне ещё
   короче: 0.26 / 0.32 с в той же пропорции.

   Все :not() обязаны быть в селекторе: без :not(--prime) кадр раздачи
   классов проигрывается с переходом, без :not(--wipe) затирается шторка.
   --keep — блоки, которым на телефоне оставлен десктопный темп: карточки
   выдачи (0.45 / 1.6 с по правке заказчика — они длиннее всего остального
   и записаны явно, чтобы не уехать вместе с базовым правилом). */
@media (max-width: 900px) {
	.ui-rv .ui-reveal:not(.ui-reveal--keep):not(.ui-reveal--wipe):not(.ui-reveal--quick):not(.ui-reveal--prime) {
		transition: opacity 0.6s cubic-bezier(0.33, 0.1, 0.25, 1),
		            transform 0.78s cubic-bezier(0.25, 0.65, 0.6, 0.8),
		            background-color var(--ui-base) var(--ui-ease);
	}

	.ui-rv .ui-reveal--keep:not(.ui-reveal--prime) {
		transition: opacity 0.45s cubic-bezier(0.33, 0.1, 0.25, 1),
		            transform 1.6s cubic-bezier(0.25, 0.55, 0.6, 0.9),
		            background-color var(--ui-base) var(--ui-ease);
	}

	.ui-rv .ui-reveal--quick:not(.ui-reveal--prime) {
		transform: translate3d(0, 28px, 0);
		transition: opacity 0.26s cubic-bezier(0.33, 0.1, 0.25, 1),
		            transform 0.32s cubic-bezier(0.25, 0.65, 0.6, 0.8),
		            background-color var(--ui-base) var(--ui-ease);
	}

	.ui-rv .ui-reveal--quick.is-in {
		transform: none;
	}
}