/* Лёгкая анимация (ADR-0004, Alfie 2026-11-10). Значения — токены --motion-* (tokens.css).
   Класс html.tsg-motion ставит скрипт в <head> (inc/motion.php): без JS, при «уменьшении движения» в системе
   и у автоматических браузеров (проверки) анимации нет — всё видно сразу.
   Страница: содержимое проявляется при загрузке — только прозрачность и без заливки после конца (backwards):
   иначе обёртка навсегда становится слоем наложения и панели внутри неё (фильтры каталога на телефоне) уходят под затемнение.
   Прокрутка: блоки ниже первого экрана всплывают один раз — анимацией, не переходом (у растянутых строк WoodMart и карточек блога
   свой transition:none / transition); после показа классы снимает motion.js. */
@keyframes tsg-page-in { from { opacity: 0 } }
@keyframes tsg-rise { from { opacity: 0; transform: translateY(var(--motion-rise)) } }

html.tsg-motion .main-page-wrapper { animation: tsg-page-in var(--motion-page) ease-out backwards }

html.tsg-motion .tsg-rv:not(.is-in) { opacity: 0 }
html.tsg-motion .tsg-rv.is-in { animation: tsg-rise var(--motion-reveal) var(--motion-ease) var(--rv-delay, 0ms) backwards }
html.tsg-motion .tsg-rv:focus-within { opacity: 1; animation: none }   /* Tab в ещё не показанный блок — виден сразу, с кольцом фокуса */

@media (prefers-reduced-motion: reduce) {
  html.tsg-motion .main-page-wrapper, html.tsg-motion .tsg-rv { opacity: 1; animation: none }
}
@media print {
  html.tsg-motion .tsg-rv { opacity: 1; animation: none }
}