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

/* Герой займає екран мінус визирання першого візуалу.
   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 {
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
  /* тане, поки голови їдуть угору */
  opacity: calc(1 - var(--dock, 0) * 1.6);
}

/* Масштаб голів ставить app.js на кожну прокрутку — одним transform на самому
   блоці, без CSS-змінних: так браузер не перераховує стилі двох <video> усередині. */

@media (max-width: 1023px) {
  .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); }
}

/* Прилиплі голови клікаються — повертають на героя */
.heads--hero.is-docked { cursor: pointer; }

/* Підписи кейсів у сітці — крупніше за основний текст */
.case__caption { font-size: var(--fs-lead); }

/* Кейс, сторінки якого ще немає: картка стоїть, але не клікається (build.py прибирає адресу) */
.case .is-soon { cursor: default; }