/* ==========================================================================
   Поява секцій при скролі.

   Початковий стан навішується ЛИШЕ під класом .ak-motion на <html>, який
   ставить ak-motion.js. Якщо скрипт не виконався або користувач просить
   меншу кількість руху — жоден блок не лишиться прихованим.

   Розмітку макета файл не змінює: цільові вузли позначає JS атрибутом
   data-ak-reveal, стан появи — класом is-inview.
   ========================================================================== */

.ak-motion [data-ak-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.125rem, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--ak-i, 0) * 80ms);
  will-change: opacity, transform;
}

/* Знімок героя на сторінці моделі стоїть на низу секції — рух робимо
   коротшим, щоб фігура не «випливала» з-за краю. */
.ak-motion [data-ak-reveal='soft'] {
  transform: translate3d(0, 0.625rem, 0);
}

.ak-motion [data-ak-reveal].is-inview {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Системна вимога меншого руху — показуємо все відразу. */
@media (prefers-reduced-motion: reduce) {
  .ak-motion [data-ak-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}