/* =========================================================================
   ДВИЖЕНИЕ
   Правила, по которым здесь всё устроено:
   • вход и выход — ease-out (var(--ease-out)), перемещение — ease-in-out;
     ease-in на интерфейсе не используем: он тормозит ровно в тот момент,
     на который смотрит человек;
   • интерфейсные переходы короче 300 мс, длиннее — только «медиа»
     (появление блока при прокрутке, наезд фотографии);
   • анимируем transform и opacity: они не трогают раскладку и считаются
     на видеокарте;
   • prefers-reduced-motion — не «выключить всё», а убрать перемещение,
     оставив изменение прозрачности.
   ========================================================================= */

@keyframes hint-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@keyframes fade-cross-out {
  to { opacity: 0; transform: translateY(4px); }
}
@keyframes fade-cross-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.lang-fading-out { animation: fade-cross-out 0.18s var(--ease-out) forwards; }
.lang-fading-in { animation: fade-cross-in 0.22s var(--ease-out) forwards; }

/* ---------- Появление при прокрутке ----------
   Было 28px и 700 мс — блок заметно «догонял» прокрутку и читался как
   задержка отрисовки. 14px и 460 мс: движение видно, ожидания нет. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-media) var(--ease-out),
              transform var(--dur-media) var(--ease-out);
  /* задержку внутри «пачки» соседних блоков расставляет js/common.js */
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Появление сбоку ----------
   Обычные блоки въезжают снизу — по ходу прокрутки. Реестр «Для кого»
   выезжает справа: строки идут одна за другой, и горизонтальное движение
   читается как «список разворачивается», а не как «страница едет».
   Смещение маленькое (28 px) и та же кривая, что у всего остального, —
   иначе получится аттракцион. */
[data-reveal="side"] {
  transform: translateX(28px);
}
[data-reveal="side"].in-view {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Появление при прокрутке ничего не объясняет — при таком запросе его
     убираем целиком. !important оставлен от прежней версии намеренно: он
     же страхует показ контента, если скрипт не отработал. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-hint-line { animation: none; }
  .lang-fading-out, .lang-fading-in { animation-name: none; }
  * { scroll-behavior: auto !important; }
}