/* ==========================================================================
   ViewChat — видео-интро главной страницы (первый экран перед 3D-hero)

   Изолированный слой: вся композиция живёт внутри .vc-video-hero.
   Единственное исключение — блок «Шапка поверх видео» в конце файла: он
   ограничен body.vc-hero-page, то есть действует только на главной.

   Пути к видео и постерам задаются в index.html на самой секции
   (data-video-desktop / data-video-mobile / data-video-mobile-media и
   <picture> постера). Здесь — только геометрия, кадрирование и цвет.
   ========================================================================== */

.vc-video-hero {
  /* --- Токены оформления ------------------------------------------------ */
  /* Тёмный тил + коралл — язык бренда ViewChat, не палитра референса. */
  --vcv-deep: #05161a;
  --vcv-coral: #f2565c;
  --vcv-coral-light: #ff6d73;

  /* Высота шапки этого экрана. Тем же значением JS сдвигает верхнюю границу
     наблюдателя, который переключает тему шапки. */
  --vcv-header: 92px;
  /* Свободная полоса у нижнего края: контент не прижимается к границе секции.
     Раньше тем же значением задавалась высота белого фейда — слоя больше нет,
     осталась только эта воздушная зона, поэтому токен переименован. */
  --vcv-bottom-space: clamp(90px, 13vh, 170px);
  /* Та же сетка, что у панелей 3D-hero, — колонки двух экранов совпадают. */
  --vcv-gutter: max(6vw, calc(50vw - 620px));
  /* Кадрирование под object-fit: cover. Десктоп и мобильный — раздельно.

     По вертикали десктоп прижат к НИЖНЕЙ кромке кадра, и это не вкусовое
     решение. Ролик горизонтальный 1920x1080, секция — во всю высоту экрана,
     поэтому как только пропорции окна становятся шире 16:9 (а это обычное
     окно на мониторе 1920x1080: вьюпорт там около 1920x950), cover
     масштабирует ролик ПО ШИРИНЕ и лишнюю высоту срезает. Внизу кадра
     живут вшитые в ролик цифры счётчика (исходные y 970..1027), и прежнее
     значение 46% — то есть чуть выше центра — срезало именно их: на
     1920x950 на 35 px, на 1600x800 на 25 px, на 2560x1000 на 191 px.
     Выглядело это как будто следующая секция наезжает на первый экран,
     хотя наложения нет вовсе (см. z-index ниже).

     100% = нижняя кромка ролика всегда совпадает с нижней границей секции,
     то есть счётчик виден целиком при любой ширине окна. На пропорциях
     16:9 и УЖЕ (1440x900, 1920x1080) вертикального запаса нет вообще —
     cover там масштабирует по высоте, — поэтому на этих размерах значение
     не меняет ровно ничего: кадр там и был, и остался полным по вертикали.
     Ни layout, ни текст, ни CTA object-position не двигает в принципе. */
  --vcv-object-position: 50% 100%;

  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  /* 100svh: мобильная адресная строка не «дёргает» первый экран.
     Первым идёт vh — фолбэк для браузеров без svh. */
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  /* Фон до готовности постера: тёмный тил, а не чёрная вспышка. */
  background: var(--vcv-deep);
  color: #fff;
}

/* --- Слой медиа: постер и видео ----------------------------------------- */
/* Область медиа зарезервирована с первой отрисовки (inset: 0 внутри секции
   фиксированной высоты), поэтому появление видео не двигает layout. */

.vc-video-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Медиа и все декоративные слои не перехватывают клики и фокус. */
  pointer-events: none;
}

.vc-video-hero__poster,
.vc-video-hero__poster img,
.vc-video-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--vcv-object-position);
}

/* Постер остаётся под видео всегда: при загрузке, при паузе, при отказе
   автоплея и в режимах без видео. Пустого места не бывает. */
.vc-video-hero__poster {
  z-index: 0;
}

/* Никаких filter / mix-blend-mode / brightness: цвет ролика отдаётся как есть.
   Единственная динамика — короткое проявление вместо постера. */
.vc-video-hero__video {
  z-index: 1;
  opacity: 0;
  background: transparent;
  /* 240ms: подмена заметна как смена «живости», а не как вспышка. Постер под
     видео — тот же кадр 0 ролика, поэтому переход визуально бесшовный. */
  transition: opacity 240ms ease-out;
}

/* Класс ставит JS после первого реально декодированного кадра (loadeddata),
   а не по таймеру — см. viewchat-video-hero.js. */
.vc-video-hero.is-video-ready .vc-video-hero__video {
  opacity: 1;
}

/* --- Затемнение и скрим -------------------------------------------------- */

/* Общий тинт — только минимальная страховка читаемости, не цветокоррекция.
   0.14 практически не сдвигает палитру: нейтральные серые, белки глаз и
   тёмно-зелёные области кадра остаются такими же, как в исходном ролике. */
.vc-video-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 22, 26, 0.14);
}

/* Направленный скрим. Ровно два градиента — оба локальные:
   1) верхняя полоса — лёгкая подложка под светлую шапку;
   2) левый клин — только за текстовым блоком, к центру уходит в прозрачность.
   Нижнего уплотнения нет: правая половина кадра (лицо) не затемняется вообще.

   Клин держит плотность до 34% ширины (там заканчиваются глифы заголовка) и
   только потом уходит в ноль. Если гасить его сразу от левого края, правая
   часть колонки текста остаётся почти без подложки: на светлых участках
   halftone-кадра белый текст там терял контраст.

   Замер на кадре 0 нового ролика, 1440x900: тинт 0.14 + клин 0.54 на полностью
   белом пикселе дают фон rgb(104,114,117) — 4.9:1 с белым. Медиана по зоне
   текста ~10:1; на самых светлых точках halftone контраст опускается до ~1.9:1
   (см. отчёт: это предел при капе 0.54, поднимать кап без запроса не стал). */
.vc-video-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      180deg,
      rgba(5, 22, 26, 0.38) 0,
      rgba(5, 22, 26, 0.16) 110px,
      rgba(5, 22, 26, 0) 230px
    ),
    linear-gradient(
      96deg,
      rgba(5, 22, 26, 0.54) 0%,
      rgba(5, 22, 26, 0.5) 22%,
      rgba(5, 22, 26, 0.44) 34%,
      rgba(5, 22, 26, 0.28) 44%,
      rgba(5, 22, 26, 0.1) 52%,
      rgba(5, 22, 26, 0) 58%
    );
}

/* --- Переход в светлый 3D-hero ------------------------------------------- */
/* Отдельного слоя перехода нет намеренно. Прежний .vc-video-hero__fade уходил
   в белый #fffdfc и давал серо-белую дымку у нижней границы кадра: она гасила
   контраст ролика и читалась как тень. Граница секций теперь чистая — тёмное
   видео просто заканчивается там, где начинается светлый 3D-hero. Свободную
   полосу под контентом держит --vcv-bottom-space, а не градиент. */

/* --- Контент -------------------------------------------------------------- */

.vc-video-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Сверху — гарантированный зазор под шапкой даже на низких экранах,
     снизу — свободная полоса плюс собственный отступ. Значения те же, что были
     при фейде: удаление слоя не сдвинуло ни заголовок, ни CTA. */
  padding:
    calc(var(--vcv-header) + 24px)
    6vw
    calc(var(--vcv-bottom-space) + clamp(24px, 4vh, 56px))
    var(--vcv-gutter);
}

/* Правая и центральная части кадра свободны — там живёт сам ролик. */
.vc-video-hero__content {
  max-width: min(620px, 52vw);
}

.vc-video-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Мелкий текст — держим чистый белый, полупрозрачный не проходит AA
     на самых светлых кадрах. */
  color: #fff;
  text-shadow: 0 1px 14px rgba(5, 22, 26, 0.6);
}

.vc-video-hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vcv-coral);
  box-shadow: 0 0 0 4px rgba(242, 86, 92, 0.22);
}

/* Тень — страховка контраста на самых светлых кадрах, а не декор. */
.vc-video-hero__title {
  margin: 0 0 18px;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 28px rgba(5, 22, 26, 0.55);
}

.vc-video-hero__text {
  margin: 0;
  max-width: 30em;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 18px rgba(5, 22, 26, 0.5);
}

/* --- CTA ------------------------------------------------------------------ */

.vc-video-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: clamp(26px, 3.4vh, 40px);
}

.vc-video-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Минимальная цель нажатия — 44×44 px и больше. */
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 36px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

/* Главное действие — установка приложения. */
.vc-video-hero__btn--primary {
  background: linear-gradient(180deg, var(--vcv-coral-light) 0%, var(--vcv-coral) 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(242, 86, 92, 0.32);
}

.vc-video-hero__btn--primary:hover,
.vc-video-hero__btn--primary:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(242, 86, 92, 0.42);
}

/* Вторичное действие заметно тише главного: контурная кнопка со стрелкой. */
.vc-video-hero__btn--ghost {
  padding: 0 24px;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 500;
}

.vc-video-hero__btn--ghost:hover,
.vc-video-hero__btn--ghost:focus-visible {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.vc-video-hero__arrow {
  display: inline-block;
  transition: transform 220ms ease;
}

.vc-video-hero__btn--ghost:hover .vc-video-hero__arrow {
  transform: translateX(4px);
}

/* Фокус виден поверх любого кадра ролика. */
.vc-video-hero__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --- Мобильная композиция ------------------------------------------------- */

@media (max-width: 991.98px) {
  .vc-video-hero {
    --vcv-header: 80px;
    --vcv-gutter: 24px;
    --vcv-bottom-space: clamp(72px, 10vh, 120px);
    /* Портретный кадр: сюжет держим чуть выше центра. */
    --vcv-object-position: 50% 42%;
    min-height: 520px;
  }

  /* Вертикальная композиция: текст стоит внизу, поэтому локальный градиент
     работает снизу вверх, а не слева направо. Плотность — та же, что у
     десктопного клина (максимум 0.54), и к 72% высоты он уже прозрачный:
     верхние две трети портретного кадра остаются нетронутыми. */
  .vc-video-hero__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(5, 22, 26, 0.38) 0,
        rgba(5, 22, 26, 0.14) 100px,
        rgba(5, 22, 26, 0) 210px
      ),
      linear-gradient(
        0deg,
        rgba(5, 22, 26, 0.54) 0%,
        rgba(5, 22, 26, 0.5) 20%,
        rgba(5, 22, 26, 0.4) 32%,
        rgba(5, 22, 26, 0.22) 46%,
        rgba(5, 22, 26, 0.06) 60%,
        rgba(5, 22, 26, 0) 70%
      );
  }

  /* Нижний отступ поднимает CTA над плавающим виджетом AI-чата. */
  .vc-video-hero__inner {
    padding:
      calc(var(--vcv-header) + 16px)
      var(--vcv-gutter)
      calc(var(--vcv-bottom-space) + clamp(46px, 8vh, 76px));
  }

  .vc-video-hero__content {
    max-width: none;
  }

  .vc-video-hero__title {
    font-size: clamp(2.05rem, 8.4vw, 2.9rem);
    margin-bottom: 14px;
  }

  .vc-video-hero__text {
    font-size: 1rem;
    line-height: 1.55;
  }

  .vc-video-hero__cta {
    margin-top: 24px;
    gap: 12px;
  }
}

/* Узкие экраны: кнопки в столбик — тап-цели остаются крупными. */
@media (max-width: 575.98px) {
  .vc-video-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .vc-video-hero__btn {
    width: 100%;
  }
}

/* --- Первый экран на телефонах: центрированный copy в нижней трети кадра ---
   Мобильный кадр портретный, и левое выравнивание десктопа читалось на нём
   как обрезанная десктопная композиция: блок висел высоко и держался за левый
   край. Здесь copy собирается в одну вертикальную колонку по центру и
   опускается в нижнюю треть: верхние ~53 % высоты остаются чистым кадром,
   заголовок начинается сразу под ними и становится единственным входом в
   композицию, а описание и пара CTA идут за ним плотной группой.

   Eyebrow на этой ширине выключен целиком: короткая строка над заголовком
   отнимала у кадра воздух и спорила с ним за первый взгляд.

   Граница — тот же 767.98px, что и у мобильного ролика
   (data-video-mobile-media в index.html). Планшет и десктоп (>= 768px) сюда
   не попадают и остаются без изменений. */

@media (max-width: 767.98px) {
  /* Eyebrow убран целиком. display: none снимает и строку, и её собственный
     нижний отступ, поэтому под ней не остаётся пустого зазора: следующий за
     ней заголовок — первый элемент колонки. Разметка и i18n-ключ на месте,
     на планшете и десктопе строка работает как раньше. */
  .vc-video-hero__eyebrow {
    display: none;
  }

  /* Секция выравнивает .__inner по своему низу, поэтому посадку всего блока
     задаёт одно значение — нижний отступ, и оно отвечает сразу за две вещи.
     145px измерены, а не выведены: высота копи-блока на телефонах почти не
     зависит от высоты экрана (заголовок в строку, описание в три, пара CTA
     — вместе 258px), поэтому одна фиксированная величина держит старт
     заголовка на 52.3 % высоты кадра при 390x844 и на 55.8 % при 412x915 —
     обе внутри целевого коридора 52-56 %. Она же задаёт зазор до низа
     секции: 145px против порога 110px, а сам виджет AI-чата поднимается от
     низа вьюпорта только на 68px, так что под кнопками остаётся 77px
     чистого воздуха. Проценты нарочно не используются: при них короткий
     экран уводил бы заголовок вверх, а длинный — вниз из коридора. */
  .vc-video-hero__inner {
    display: flex;
    justify-content: center;
    padding:
      calc(var(--vcv-header) + 16px)
      var(--vcv-gutter)
      145px;
  }

  /* Весь copy — единый вертикальный блок по центру. Ширина колонки та же. */
  .vc-video-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  /* Заголовок — единственный акцент экрана, поэтому под ним зазор минимальный:
     описание должно читаться его продолжением, а не отдельным блоком. */
  .vc-video-hero__title {
    margin-bottom: 12px;
  }

  /* Описание спокойнее заголовка: колонка чуть уже контентной, поэтому
     text-wrap: balance складывает его в три ровные строки, а не в рваный флаг.
     Размер, цвет и line-height не меняются — компактность здесь геометрическая,
     а не типографская. */
  .vc-video-hero__text {
    max-width: 21em;
    margin-inline: auto;
    text-wrap: balance;
  }

  /* Обе CTA — одна вертикальная группа во всю ширину контентной колонки.
     Зазор между кнопками заметно меньше отступа от описания: пара читается
     единым элементом, а не двумя отдельными кнопками. */
  .vc-video-hero__cta {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 22px;
  }

  .vc-video-hero__btn {
    width: 100%;
  }
}

/* Низкие экраны в альбомной ориентации: весь контент обязан поместиться
   в первый экран целиком, поэтому ужимаем отступы и убираем абзац. */
@media (max-height: 560px) and (orientation: landscape) {
  .vc-video-hero {
    --vcv-bottom-space: 56px;
    min-height: 0;
  }

  .vc-video-hero__inner {
    padding:
      calc(var(--vcv-header) + 8px)
      var(--vcv-gutter)
      calc(var(--vcv-bottom-space) + 16px);
  }

  .vc-video-hero__eyebrow {
    margin-bottom: 10px;
  }

  .vc-video-hero__title {
    font-size: clamp(1.7rem, 4.4vw, 2.4rem);
    margin-bottom: 10px;
  }

  .vc-video-hero__text {
    display: none;
  }

  .vc-video-hero__cta {
    margin-top: 16px;
  }

  .vc-video-hero__btn {
    min-height: 46px;
    padding: 0 22px;
  }
}

/* Короткий альбом на телефоне: вертикальная пара кнопок во всю ширину здесь
   упиралась бы в плавающий виджет AI-чата, поэтому в этом единственном случае
   CTA возвращаются в строку — по центру, как и весь остальной copy.
   Условие max-width обязательно: без него правило сдвинуло бы кнопки и на
   коротких альбомных десктопах (>= 768px), где композиция не меняется. */
@media (max-width: 767.98px) and (max-height: 560px) and (orientation: landscape) {
  .vc-video-hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .vc-video-hero__btn {
    width: auto;
  }
}

/* --- Уважение к настройкам пользователя ----------------------------------- */
/* Видео при reduce не декодируется вовсе (см. viewchat-video-hero.js) —
   здесь снимаем оставшиеся переходы, чтобы не осталось «мигания». */

@media (prefers-reduced-motion: reduce) {
  .vc-video-hero__video,
  .vc-video-hero__btn,
  .vc-video-hero__arrow {
    transition: none;
  }

  .vc-video-hero__btn--primary:hover,
  .vc-video-hero__btn--primary:focus-visible {
    transform: none;
  }

  .vc-video-hero__btn--ghost:hover .vc-video-hero__arrow {
    transform: none;
  }
}

/* ==========================================================================
   Шапка поверх видео (только главная, только десктоп)

   Верх главной больше не светлый 3D-hero, а тёмное видео, поэтому в верхнем
   положении шапка прозрачная и светлая. Состояние — пересечение двух условий:

   — .vc-over-video ставит viewchat-video-hero.js, пока секция видео реально
     перекрывает полосу шапки. Состояние выводится из геометрии секции
     (IntersectionObserver), а не из порога прокрутки в пикселях;
   — .wsmainfull:not(.scroll) — штатное «верхнее» состояние шапки шаблона.
     Как только шаблон переводит шапку в закреплённую белую полосу, мы не
     мешаем: контент первого экрана уходит под непрозрачную полосу, а не
     наезжает на прозрачную навигацию, и текст меню остаётся тёмным.

   Эти же правила отменяют тёмную трактовку верхнего состояния из
   viewchat-hero.css — она была написана, когда первым экраном был светлый
   3D-hero. Мобильную шапку (сплошная белая полоса) не трогаем: контраст
   на ней и так корректный.
   ========================================================================== */

@media (min-width: 992px) {
  body.vc-hero-page #header .wsmenu > .wsmenu-list > li > a.h-link,
  body.vc-hero-page #header .lang-btn--desktop .lang-btn__label {
    transition: color 280ms ease;
  }

  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) .wsmenu > .wsmenu-list > li > a.h-link {
    color: #fff;
  }

  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) .wsmenu > .wsmenu-list > li > a.h-link:hover {
    color: var(--vcv-coral, #f2565c);
  }

  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) .lang-btn--desktop .lang-btn__label {
    color: #fff !important;
  }

  /* Иконку языка не трогаем: i18n.js подставляет туда флаг активного языка
     (см. syncLangButtonIcons), он одинаково читается и на светлом, и на
     тёмном. Перекрашивать его фильтром нельзя. */

  /* Логотип переключается инлайновым стилем из desktop-logo-on-scroll.js —
     перебиваем через !important и более точный селектор. */
  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) a.logo-white {
    display: inline-block !important;
  }

  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) a.logo-black {
    display: none !important;
  }
}