/* ==========================================================================
   QME — анимации появления блоков при скролле.

   Порт механики оригинала quiz-mafia-event.ru (Bitrix landing24):
   `public/bitrix/templates/landing24/assets/js/helpers/onscroll-animation_init.js`
   + animate.css из темы. Своя копия нужна, чтобы не тянуть Bitrix-наследие
   в рабочую вёрстку — исходники остаются только как эталон.

   Как это работает в оригинале (и здесь):
   - элемент помечен классами `js-animation <имя>`;
   - до появления в зоне видимости у него inline `animation-name: none` и
     `animation-play-state: paused`, поэтому он виден и не мигает;
   - при пересечении вьюпорта добавляется класс `animated`, inline
     `animation-name` снимается — начинает работать имя из класса анимации;
   - по `animationend` класс `animated` снимается, `animation-name` снова
     `none`: анимация проигрывается ровно один раз.
   - на мобильных устройствах оригинал анимации не включает вовсе
     (`if (BX.browser.IsMobile()) return;`) — повторено в qme-animations.js.

   Длительность 1000 мс задаёт JS (как в оригинале), `.animated` держит
   `animation-fill-mode: both`.

   Набор из 9 анимаций — ровно те, что встречаются в разметке оригинала
   на 37 страницах: fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp,
   slideInUp, slideInLeft, slideInRight, zoomIn. Keyframes перенесены
   без изменений из animate.css темы.
   ========================================================================== */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.js-animation.fadeIn.animated { animation-name: fadeIn; }
.js-animation.fadeInDown.animated { animation-name: fadeInDown; }
.js-animation.fadeInLeft.animated { animation-name: fadeInLeft; }
.js-animation.fadeInRight.animated { animation-name: fadeInRight; }
.js-animation.fadeInUp.animated { animation-name: fadeInUp; }
.js-animation.slideInUp.animated { animation-name: slideInUp; }
.js-animation.slideInLeft.animated { animation-name: slideInLeft; }
.js-animation.slideInRight.animated { animation-name: slideInRight; }
.js-animation.zoomIn.animated { animation-name: zoomIn; }

/* Пользователь просил систему не двигать — уважаем prefers-reduced-motion.
   В оригинале этого нет, но это доступность, а не визуальное расхождение:
   у остальных посетителей вид совпадает. */
@media (prefers-reduced-motion: reduce) {
  .js-animation.animated {
    animation: none !important;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}


/* --------------------------------------------------------------------------
   Гашение горизонтального вылета на время анимации.

   fadeInLeft / fadeInRight / slideIn* стартуют с translate3d(±100%), то есть
   элемент на первом кадре стоит за краем экрана. В оригинале это гасится
   `body{overflow-x:hidden}` (kernel_landing_grid темы landing24) — в нашей
   сборке глобального overflow-x не было (см. комментарий в home.css), поэтому
   добавляем здесь, рядом с причиной.

   Строго `hidden`, как в оригинале. Пробовал `overflow-x: clip` (он не создаёт
   контейнер прокрутки и безопаснее для position: sticky) — в браузере страница
   переставала прокручиваться совсем: scrollY залипал на 0 при любом
   window.scrollTo и scrollIntoView. Проверено на /vinnoe-kazino, 1440px.
   ------------------------------------------------------------------------- */
body.page {
  overflow-x: hidden;
}