/**
 * Кинематографичный первый экран.
 * Всё здесь работает только когда на <body> висит класс .hero-cinematic —
 * его ставит js/hero-cinematic.js, если включён флаг heroCinematic
 * в js/flags.js. Выключили флаг — этот файл ни на что не влияет.
 *
 * Сценарий прокрутки: фото растворяется → под ним проступают световые пятна →
 * описание и кнопки уступают место надписи «Ознакомительный ролик»,
 * которая подъезжает вверх к имени → справа всплывает сам ролик.
 */

/* Экран получает запас по высоте: пока он «проезжает», успевает пройти
   вся сцена, а текст всё это время стоит на месте. */
.hero-cinematic .hero {
  min-height: 210vh;
  align-items: flex-start;
  overflow: visible;
  /* запас снизу: залипший блок отрывается заранее и уезжает вверх с отступом,
     а не упирается в край следующего раздела */
  padding-bottom: clamp(72px, 12vh, 160px);
}

/* Фото, затемнение и световые пятна прибиты к окну: кадр не «уезжает»
   вверх, а именно исчезает, открывая живой фон. */
.hero-cinematic .hero-media,
.hero-cinematic .hero-scrim,
.hero-cinematic .hero-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  will-change: opacity;
}
.hero-cinematic .hero-media { transform-origin: center 45%; }
.hero-cinematic .hero-media.is-gone,
.hero-cinematic .hero-scrim.is-gone { visibility: hidden; }

/* Световые пятна первого экрана: те же, что в разделах ниже, но их
   прозрачностью управляет прокрутка, а не появление в кадре. */
.hero-glow {
  z-index: -3;
  opacity: 0;
  transition: none;
  overflow: hidden;
}

/* Текст залипает по центру экрана, ролик встаёт справа от него. */
.hero-cinematic .hero-inner {
  /* растёт плавно вместе с окном; на 1900 px ≈ 360, на 2300 px ≈ 440 */
  --intro-video-w: clamp(220px, 22vw, min(480px, max(300px, 19vw)));
  --intro-gap: clamp(28px, 4vw, 64px);
  position: sticky;
  /* Значение считает js/hero-cinematic.js — так, чтобы текст встал по
     центру окна. Запасной вариант на случай, если скрипт не отработал. */
  top: var(--hero-sticky-top, calc(var(--header-h) + 6vh));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--intro-video-w);
  gap: var(--intro-gap);
  align-items: start;
}
/* Подпись, титры и метки кадров прибиты к окну вместе с фотографией:
   первый экран здесь вытянут на 210vh, и его «низ» уехал бы далеко вниз. */
.hero-cinematic .hero-credit { position: fixed; bottom: calc(26px + var(--ticker-h)); }
.hero-cinematic .hero-ticker { position: fixed; left: 0; right: 0; bottom: 0; }
.hero-cinematic .hero-frames { position: fixed; bottom: calc(52px + var(--ticker-h)); }

/* Блок-«мостик»: надпись и заголовок ролика подъезжают снизу вверх
   к тексту о Льве Майденко и занимают место описания. */
.hero-intro-bridge {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  max-width: 46ch;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
.hero-intro-bridge h2 {
  font-size: var(--fs-h3);
  margin: 10px 0 8px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
}
.hero-intro-sub { color: var(--bone-dim); font-size: var(--fs-base); line-height: 1.6; }
.hero-intro-cue {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper);
}
.hero-intro-cue::after { content: '→'; font-size: 14px; }

/* Стрелка от текста к ролику. Длину штриха задаёт JS: она «дорисовывается»
   по мере прокрутки, вместе с появлением ролика. */
/* Вне кинематографичного режима стрелки нет вовсе. */
.hero-intro-arrow { display: none; }

/* Стрелка привязана к тексту, а не к ролику.
   • По горизонтали — от правого края текстового блока плюс небольшой
     отступ: раньше она отсчитывалась от плитки и прилипала к ней, а слева
     висела в пустоте посреди полосы.
   • По вертикали — top не задан вовсе: у абсолютно позиционированного
     элемента без top остаётся то место, где он стоял бы в потоке, а в
     разметке он идёт сразу за строкой «Смотреть ролик». Двигается текст —
     двигается стрелка, без единой строки скрипта.
   • Ширина — от текста до плитки минус зазор; считает скрипт, потому что
     расстояние зависит от ширины колонок. Значение в CSS остаётся
     запасным, на случай если скрипт не отработал. */
.hero-cinematic .hero-intro-bridge { position: relative; }
.hero-cinematic .hero-intro-arrow {
  display: block;
  position: absolute;
  left: calc(100% + clamp(16px, 1.6vw, 44px));
  width: clamp(150px, 12vw, 300px);   /* запасное значение; точное ставит js */
  /* глобальное img, svg { max-width: 100% } иначе ужало бы стрелку */
  max-width: none;
  height: auto;
  transform: translateY(-42%);
  color: var(--copper);
  overflow: visible;
  pointer-events: none;
}

/* Ниже 1300 px между колонками места почти нет — стрелку убираем совсем,
   а не сжимаем в закорючку. */
@media (max-width: 1300px) {
  .hero-cinematic .hero-intro-arrow { display: none; }
}

.hero-intro-arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Ролик рядом с текстом. Размер плитке уточняет JS по пропорциям кадра. */
.hero-intro-video {
  width: var(--intro-video-w);
  opacity: 0;
  transform: translateY(38px);
  will-change: opacity, transform;
}
/* рамка, тень и покачивание плитки — в css/styles.css, блок «Плитка ознакомительного ролика» */

/* Отдельный раздел с роликом больше не нужен — он теперь часть первого экрана. */
.hero-cinematic #intro-video { display: none; }

/* Блок описания и кнопок не просто гаснет, а сжимается — иначе на его месте
   остаётся пустота, а надпись о ролике «зависает» посреди экрана. */
.hero-cinematic .hero-lead { overflow: hidden; will-change: height, opacity; }

/* Узкое окно (и телефон): ролик рядом с текстом уже не помещается, поэтому
   кинематографичный режим выключается целиком — первый экран и раздел
   «Ознакомительный ролик» снова живут отдельно, каждый со своим фоном. */
@media (max-width: 1024px) {
  .hero-cinematic .hero {
    min-height: min(760px, 100svh);
    align-items: center;
    overflow: hidden;
    padding-bottom: clamp(56px, 8vh, 96px);
  }
  .hero-cinematic .hero-media,
  .hero-cinematic .hero-scrim { position: absolute; opacity: 1 !important; transform: none !important; }
  .hero-cinematic .hero-glow { display: none; }
  .hero-cinematic .hero-inner {
    position: relative; top: auto;
    display: block;
  }
  .hero-cinematic .hero-credit { position: absolute; }
  /* Первый экран здесь обычной высоты, поэтому титры и метки кадров
     возвращаются к его низу: прибитые к окну, они уезжали на следующий
     раздел и просвечивали полосой. */
  .hero-cinematic .hero-ticker,
  .hero-cinematic .hero-frames { position: absolute; }
  .hero-cinematic .hero-lead { height: auto !important; opacity: 1 !important; overflow: visible; }
  .hero-cinematic .hero-intro-bridge,
  .hero-cinematic .hero-intro-video,
  .hero-cinematic .hero-intro-arrow { display: none; }
  .hero-cinematic #intro-video { display: block; }
}

/* Экономия движения: тот же «обычный» вид, что и в узком окне. */
@media (prefers-reduced-motion: reduce) {
  .hero-cinematic .hero {
    min-height: min(760px, 100svh);
    align-items: center;
    overflow: hidden;
    padding-bottom: clamp(56px, 8vh, 96px);
  }
  .hero-cinematic .hero-media,
  .hero-cinematic .hero-scrim { position: absolute; opacity: 1 !important; transform: none !important; }
  .hero-cinematic .hero-glow { display: none; }
  .hero-cinematic .hero-inner { position: relative; top: auto; display: block; }
  .hero-cinematic .hero-credit,
  .hero-cinematic .hero-ticker,
  .hero-cinematic .hero-frames { position: absolute; }
  .hero-cinematic .hero-lead { height: auto !important; opacity: 1 !important; overflow: visible; }
  .hero-cinematic .hero-intro-bridge,
  .hero-cinematic .hero-intro-video,
  .hero-cinematic .hero-intro-arrow { display: none; }
  .hero-cinematic #intro-video { display: block; }
}

/* Пересказ ролика в «мостике» первого экрана: тот же блок, что и в
   разделе, но плотнее — рядом стоит плитка с видео, и колонка уже.
   Тезисы идут в две колонки: в одну шесть строк не помещаются в экран,
   а первый экран прокруткой не растягивают. */
.hero-cinematic .hero-intro-bridge .intro-digest { margin-top: clamp(18px, 1.8vw, 26px); max-width: none; }
.hero-cinematic .hero-intro-bridge .intro-digest-summary { font-size: var(--fs-sm); max-width: 52ch; }
.hero-cinematic .hero-intro-bridge .intro-digest-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2vw, 36px);
  margin-top: 14px;
}
.hero-cinematic .hero-intro-bridge .intro-digest-points li {
  padding: 8px 0; font-size: var(--fs-sm);
  grid-template-columns: 28px 1fr; gap: 10px;
}
/* В сетке линейка сверху нужна каждой строке, а «последней» больше нет */
.hero-cinematic .hero-intro-bridge .intro-digest-points li:last-child { border-bottom: 0; }

/* Невысокое окно (ноутбук 13–14", ~760 px по высоте): «мостик» с тезисами
   не помещался и уходил за нижний край. Тезисы остаются в видео и в
   пересказе, а здесь — только короткий абзац. */
@media (max-height: 880px) {
  .hero-cinematic .hero-intro-bridge .intro-digest-points { display: none; }
}