/* ============================================================
   05-ГЕРОЙ (первый экран)

   Здесь живёт главный визуальный эффект сайта: следующая секция
   НАЕЗЖАЕТ на первый экран, как штора.

   КАК ЭТО СДЕЛАНО - проще, чем кажется, и без единой строчки JS:

     .hero        обычный блок высотой ровно в экран (100vh).
                  Он пустой - просто занимает место в потоке.

     .hero-fixed  само содержимое первого экрана. Оно
                  position: fixed - то есть прибито к окну
                  браузера и НЕ двигается при прокрутке.

   Пользователь листает - контент героя стоит на месте, а
   следующая секция (у неё свой непрозрачный фон) просто
   наползает сверху и закрывает его. Ощущение, что герой
   «уходит под» страницу.

   На мобильном этого нет: там герой обычный блок в потоке.
   ============================================================ */


/* ------------------------------------------------------------
   КАРКАС
   ------------------------------------------------------------ */

.hero {
  position: relative;
  background-color: #fff;
}

@media (min-width: 768px) {
  .hero {
    height: 100vh;      /* держит место под прибитый герой */
  }
}

/* ------------------------------------------------------------
   МЕРКИ ПЕРВОГО ЭКРАНА
   Макет Figma 3306:404, экран 1512 x 990.

   ГЛАВНАЯ ИДЕЯ НОВОЙ РАСКЛАДКИ. Первый экран больше не считается
   от верха окна. Есть полоса - от низа шапки до верха подписи
   в правом нижнем углу, - и в неё по вертикали ставятся по центру
   две вещи: блок текста и рамка видео. Всё остальное подчинено им.

     112              низ шапки
     100vh - 134      верх подписи «החברה המובילה»
                      (в макете 856 при экране 990)

   Полоса, значит, высотой 100vh - 246, а её середина - на
   50vh - 11. Обе величины ниже так и посчитаны.

   БЛОК ТЕКСТА - это заголовок вместе со значком ai-optimized.
   Его высота 363: восемь пикселей над первой строкой (заголовок
   приподнят на них относительно своей коробки), три строки по 96,
   отступ 38 и сама строчка значка высотой 29.

   Отсюда верх коробки заголовка:
       120 + (100vh - 609) / 2,   где 609 = 246 + 363
   На экране 990 это даёт 310.5 - макетные 311.

   РАМКА ВИДЕО - 549 x 451.5, левым краем вровень с колонкой,
   по вертикали серединой на середине полосы.

   Почему не макетные 620 x 510. Колонка контента на сайте у́же
   макетной, 1208 против 1280: текст справа у нас на 36 левее,
   а рамка слева на 36 правее. Итого 72 пикселя зазора между ними
   съедено. 549 - это ровно та ширина, при которой зазоры между
   рамкой, полоской и текстом остаются макетными. Пропорция
   сохранена: 549 / 451.5 = 620 / 510.

   ЕДИНИЦА ИЗМЕРЕНИЯ --ш - один пиксель макета по ширине. По ней
   живёт весь сайт: размер шрифта, высота строки, поля.
   ------------------------------------------------------------ */

.hero-fixed {
  --ш: calc(100vw / var(--device-size));

  /* Верх коробки заголовка. max() - страховка на низкое окно:
     ниже 120 заголовок не поднимется и на шапку не налезет. */
  --верх-заголовка: max(calc(120 * var(--ш)),
                        calc(120 * var(--ш) + (100vh - 609 * var(--ш)) / 2));

  /* Единица размера рамки. В нормальном окне равна макетной,
     в низком уменьшается, чтобы рамка целиком осталась в полосе.
     266 = 246 полосы + 20 воздуха. */
  --рамка: min(var(--ш), calc((100vh - 266 * var(--ш)) / 451.5));
  --высота-видео: calc(451.5 * var(--рамка));

  /* Середина полосы минус половина рамки */
  --верх-видео: calc(50vh - 11 * var(--ш) - var(--высота-видео) / 2);

  width: 100%;
  padding: calc(122 / var(--device-size) * 100vw) 0
           calc(58 / var(--device-size) * 100vw);
}

@media (min-width: 768px) {
  .hero-fixed {
    position: fixed;    /* вот оно, всё волшебство */
    top: 0;
    left: 0;
    height: 100vh;
    padding-top: var(--верх-заголовка);
  }
}

@media (max-width: 767px) {
  .hero-fixed {
    padding: calc(60 / var(--device-size) * 100vw) 0
             calc(30 / var(--device-size) * 100vw);
  }
}

/* Содержимое распределяется по высоте: заголовок сверху,
   текст и кнопка внизу */
.hero__container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}



/* ------------------------------------------------------------
   ЗАГОЛОВОК СО СТРОКАМИ И ЛИНИЯМИ

   Этот же стиль используют заголовки всех секций.

   В разметке заголовок - это просто несколько <span>.
   Скрипт js/02-появление.js превращает каждый в пару
   «текст + тонкая линия под ним» и запускает их по очереди.
   Поэтому классов title-row__block, __text и __line в разметке
   нет - они создаются на лету.
   ------------------------------------------------------------ */

.title-row {
  position: relative;
  margin: 0;
  font-size: calc(76 / var(--device-size) * 100vw);
  font-weight: 300;
  letter-spacing: calc(-4 / var(--device-size) * 100vw);
  line-height: calc(96 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .title-row {
    font-size: calc(35 / var(--device-size) * 100vw);
    letter-spacing: calc(-2 / var(--device-size) * 100vw);
    line-height: calc(48 / var(--device-size) * 100vw);
  }

  /* на мобильном переносы строк расставляет сама вёрстка */
  .title-row br { display: none; }
}

/* Обёртка одной строки. overflow: hidden - это «шторка»,
   из-под которой текст выезжает при появлении */
.title-row__block {
  position: relative;
  display: block;
  overflow: hidden;
}

.title-row__text {
  position: relative;
  display: block;
  top: calc(-8 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .title-row__text {
    top: calc(-3 / var(--device-size) * 100vw);
  }
}

/* Тонкая линия под строкой. При появлении «прочерчивается» */
.title-row__line {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(1 / var(--device-size) * 100vw);
  background-color: #cfcfcf;
}

/* КОРОТКИЕ ЛИНИИ - ТОЛЬКО В ПЕРВОМ ЭКРАНЕ И ТОЛЬКО НА ДЕСКТОПЕ.

   В секциях ниже линии по-прежнему во всю колонку, их не трогаем.
   А в герое линия обрывается на 30 пикселей левее самой длинной
   строки - той, что печатается и меняется.

   Откуда 628. Самая длинная из пяти сменяющихся строк занимает
   598 пикселей (замерено в браузере на всех пяти вариантах), плюс
   те самые 30 - получается 628. Строки прижаты вправо, линия тоже,
   поэтому левый край линии сам встаёт куда нужно.

   Если когда-нибудь поменяется список слов в заголовке, это число
   надо пересчитать: замерить самую широкую строку и прибавить 30.
   Иначе линия либо не достанет до текста, либо уедет под видео. */
@media (min-width: 768px) {
  .hero .title-row__line {
    width: calc(628 / var(--device-size) * 100vw);
  }
}

/* Красное слово внутри заголовка: <b>текст</b> */
.title-row b {
  color: #d41318;
  font-weight: 500;
}

/* На иврите у выделенного слова буквы стоят плотнее, чем у
   остального заголовка: -2 против -4. Мелочь, но без неё строка
   получается на несколько пикселей длиннее, чем в макете. */
[lang="he"] .title-row b {
  letter-spacing: calc(-2 / var(--device-size) * 100vw);
}

/* Меняющееся слово: <i class="js-typewriter">...</i>.
   Курсив отключаем - тег взят ради краткости, а не наклона */
.title-row i {
  font-style: normal;
}


/* ------------------------------------------------------------
   ВИДЕО ЗА ЗАГОЛОВКОМ

   Раньше здесь по очереди сменялись пять картинок. Теперь одно
   зацикленное видео - файл assets/videos/hero-opening.mp4.

   object-fit: cover означает «заполнить рамку целиком, лишнее
   обрезать по краям». Пропорции видео и рамки не совпадают
   (видео шире), поэтому на десктопе оно немного подрезается
   по бокам - так и задумано в макете.

   Чтобы заменить ролик, достаточно положить новый файл под тем
   же именем. Требования: без звука он всё равно проигрывается,
   но лучше выгружать без звуковой дорожки - файл легче.
   ------------------------------------------------------------ */

.hero-back {
  border-radius: calc(10 / var(--device-size) * 100vw);
  overflow: hidden;
}

/* ДЕСКТОП. Все мерки объявлены выше, в блоке .hero-fixed - здесь
   их только применяем.

   ВЕРХ - серединой на середине полосы между шапкой и подписью.

   ЛЕВЫЙ КРАЙ - вровень с левым краем колонки контента. Контейнер
   сайта у́же макетного, поэтому край считаем от контейнера, а не
   от окна: иначе рамка вылезает левее сетки. max(0px, ...) - на
   узком экране контейнер занимает всю ширину и поля не остаётся. */
@media (min-width: 768px) {
  .hero-back {
    position: absolute;
    top: var(--верх-видео);
    left: calc(max(0px, (100vw - 1440 * var(--ш)) / 2) + 116 * var(--ш));
    width: calc(549 * var(--рамка));
    height: var(--высота-видео);
  }
}

/* МОБИЛЬНЫЙ. Рамка обычная, в потоке, под заголовком.
   Размеры прежние - в макете они не менялись. */
@media (max-width: 767px) {
  .hero-back {
    position: relative;
    width: calc(288 / var(--device-size) * 100vw);
    height: calc(205 / var(--device-size) * 100vw);
    margin-top: calc(20 / var(--device-size) * 100vw);
    border-radius: calc(5 / var(--device-size) * 100vw);
  }
}

.hero-back__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
   ЗНАЧОК AI-OPTIMIZED
   При наведении рядом появляется поясняющая надпись.
   Три звёздочки мигают по очереди - это анимация fadeIn ниже.
   ------------------------------------------------------------ */

.hero-ai {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(5 / var(--device-size) * 100vw);
  margin-top: calc(38 / var(--device-size) * 100vw);
  cursor: pointer;
}

@media (max-width: 767px) {
  .hero-ai { display: none; }
}

.hero-ai__title,
.hero-ai__hint {
  font-size: calc(16 / var(--device-size) * 100vw);
}

.hero-ai__title {
  font-family: Montserrat, serif;
  font-weight: 500;
  text-transform: uppercase;
}

/* Подсказка спрятана и не ловит мышь, пока не навели */
.hero-ai__hint {
  opacity: 0;
  font-weight: 400;
  pointer-events: none;
  transition: 0.3s ease-out;
}

@media (hover: hover) {
  .hero-ai:hover .hero-ai__hint {
    opacity: 1;
  }
}

.hero-ai__icon {
  color: #d41318;
}

.hero-ai__icon svg {
  display: block;
}

/* Три звёздочки мигают со сдвигом по времени - получается
   эффект «искрится». Цикл 5 секунд, сдвиги 0 / 0.7 / 1.4 с. */
.hero-ai__icon path:nth-child(1) { animation: fadeIn 5s 1.4s infinite; }
.hero-ai__icon path:nth-child(2) { animation: fadeIn 5s 0.7s infinite; }
.hero-ai__icon path:nth-child(3) { animation: fadeIn 5s infinite; }

/* Почти всё время видно, короткая вспышка гашения в конце цикла */
@keyframes fadeIn {
  0%, 80% { opacity: 1; }
  90%     { opacity: 0; }
  100%    { opacity: 1; }
}


/* ------------------------------------------------------------
   НИЖНЯЯ ЧАСТЬ ПЕРВОГО ЭКРАНА
   ------------------------------------------------------------ */

.hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .hero-footer {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: calc(20 / var(--device-size) * 100vw);
    margin-top: calc(32 / var(--device-size) * 100vw);
  }
}

.hero-footer__text {
  color: #8f8f8f;
  font-size: calc(24 / var(--device-size) * 100vw);
  letter-spacing: calc(-1.2 / var(--device-size) * 100vw);
  line-height: calc(29 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .hero-footer__text {
    font-size: calc(16 / var(--device-size) * 100vw);
    line-height: calc(20 / var(--device-size) * 100vw);
  }
}

.hero-footer__text b {
  color: #010101;
  font-weight: 500;
}

/* Красная кнопка в герое есть ТОЛЬКО на мобильном.
   На десктопе её роль играет кнопка в шапке. */
.hero-button {
  display: none;
}

@media (max-width: 767px) {
  .hero-button {
    display: block;
    margin-top: calc(20 / var(--device-size) * 100vw);
  }

  .hero-button .button-arrow {
    font-weight: 500;
  }
}