/* Головна сторінка */

/* Герой займає екран мінус визирання першого візуалу.
   svh, а не vh: vh на мобільних рахує висоту без панелей браузера й зрізає низ.
   Хедер липкий і займає місце в потоці, тому герой підтягуємо під нього —
   інакше пара голів центрується нижче середини екрана. */
.hero {
  --peek: 56px;
  margin-top: calc(-1 * var(--header-h));
  /* Рівно екран, щоб пара голів стояла точно по центру вікна.
     Визирання наступного блоку робимо відʼємним відступом знизу, а не
     відніманням від висоти — інакше центр зміщується вгору на пів визирання. */
  min-height: 100svh;
  margin-bottom: calc(-1 * var(--peek));
  align-content: center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}

/* Голови в героєві великі й по центру. На скролі підіймаються, прилипають
   згори й зменшуються до розміру хедера.

   Рух робить сам браузер через sticky — це нативно й не відстає навіть під час
   інерційної прокрутки на телефоні. Раніше позицію щокадру рахував JS, а мобільні
   браузери притримують скрипти під час інерції, звідси й були ривки та стрибки.

   Щоб sticky мав де працювати, голови лежать у власній доріжці, яка тягнеться
   на всю сторінку: sticky тримає елемент лише в межах його батька.
   За JS лишився тільки масштаб — його запізнення на кадр непомітне. */
.heads-rail {
  position: absolute;
  inset: 0;
  z-index: var(--z-header);
  pointer-events: none; /* доріжка не має перехоплювати кліки по сторінці */
}

.heads--hero {
  --head: 200px;
  --dock-top: 48px;   /* дорівнює верхньому падінгу хедера */
  --dock-scale: 0.24; /* 48 / 200 — розмір у хедері */

  position: sticky;
  top: var(--dock-top);
  width: max-content;
  margin-inline: auto;
  pointer-events: auto;

  /* зменшуємо від верхнього краю, тому прилиплий верх лишається на місці */
  transform-origin: center top;
  will-change: transform;
}

/* Розпірка тримає місце в потоці, поки голови їдуть по доріжці */
.hero__heads-space { height: 200px; }

/* Два рядки одним блоком: у макеті це один текстовий вузол, інтерліньяж 1.2.
   Відступ 30 у героєві — між головами й текстом, а не між рядками. */
.hero__text {
  line-height: var(--lh-tight);
  /* тане, поки голови їдуть угору */
  opacity: calc(1 - var(--dock, 0) * 1.6);
}

/* Плавність.
   Запис масштабу в CSS-змінну щокадру змушує браузер перераховувати стилі
   разом із двома <video> усередині — на слабких пристроях це видно ступенями.
   Тому там, де браузер уміє скрол-таймлайни, анімацію створює JS через
   Web Animations API і вона крутиться на компоновнику, повз головний потік.
   Значення туди передаються числами: у @keyframes змінні беруться один раз
   і не оновлюються, коли розкладка досідає. */

@media (max-width: 767px) {
  .heads--hero {
    --head: 120px;
    --dock-top: 16px;
    --dock-scale: 0.358; /* 43 / 120 */
  }
  .hero__heads-space { height: 120px; }
  /* кнопки живуть у нижній ковбасці, герою потрібен запас під неї */
  .hero { margin-bottom: calc(-1 * var(--peek) - var(--btn-h) - 32px); }
}

/* Кому система вимкнула анімації — голови просто стоять на місці, без зʼїжджання */
@media (prefers-reduced-motion: reduce) {
  .heads--hero { transform: none; }
  .hero__text { opacity: 1; }
}