/* Анимации появления — как на Тильде.
   Работают, только если в <head> выставлен класс .anim (его снимает site.js,
   если скрипт не загрузился за 3 секунды) и в системе не отключены анимации. */
@media (prefers-reduced-motion: no-preference) {
  /* Фото выезжают с края: data-slide="left" — слева, "right" — справа (4 с, 300 px) */
  .anim [data-slide] { opacity: 0; transition: opacity 4s cubic-bezier(.16,1,.3,1), transform 4s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
  .anim [data-slide="left"] { transform: translateX(-300px); }
  .anim [data-slide="right"] { transform: translateX(300px); }
  /* Плавное проявление (плашки направлений на первом экране: через 2 с, 2.1 с) */
  .anim [data-fade] { opacity: 0; transition: opacity 2.1s ease; transition-delay: var(--d, 2s); }
  /* Разделы ниже первого экрана — мягко поднимаются при прокрутке */
  .anim [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
  .anim .is-in[data-slide], .anim .is-in[data-fade], .anim .is-in[data-reveal] { opacity: 1; transform: none; }
}
/* Выезжающие фото не должны давать горизонтальную прокрутку */
main { overflow-x: clip; }