/* Вступительный ролик первого экрана.
   ---------------------------------------------------------------------------
   Женщина выходит из-за правого края пустой студии и встаёт ровно в ту позу,
   с которой начинается фоновая последовательность сайта. Играет ОДИН раз,
   сразу после прелоадера, и только на телефоне: ролик снят вертикальным.

   Последний кадр ролика — то же самое изображение, что и статичный кадр
   сайта, поэтому в конце ролик растворяется поверх уже открытого кадра:
   двоиться нечему, а разница в декодировании видео уходит плавно.

   Механизм скролл-скраба этот файл не трогает вообще. */

/* Ролик существует в разметке всегда, но показывается ТОЛЬКО пока идёт
   вступление. Иначе при любом пропуске (десктоп, отключённая анимация,
   запрет автовоспроизведения) на первом экране остаётся его постер — пустая
   студия поверх фигуры. Снятие класса intro-on убирает ролик и открывает
   статичный кадр в один пересчёт стилей, без промежуточного кадра. */
.stage__intro { display: none; }

@media (max-width: 860px) {
  html.intro-on .stage__intro,
  html.intro-fade .stage__intro {
    display: block;
    position: absolute;
    /* Выше статичного кадра (z-index 2) и холста. */
    z-index: 3;
    left: 50%;
    top: 50svh;
    /* Та же высота, что у статичного кадра (см. разбор в hero-variant.css):
       содержимое кадра — 1072 строки из 1552, отсюда 168 × 1072 / 1552.
       Ролик снят из центральной вертикальной вырезки 608 px из 1920, то есть
       при равной высоте и соотношении 9:16 его ширина получается ровно
       608/1920 ширины кадра. Совпадение выходит из арифметики, вручную
       ничего подгонять не нужно. */
    height: 116.041svh;
    /* Подложка на случай, если браузер ещё не нарисовал первый кадр видео:
       под роликом лежит та же пустая студия картинкой, и вместо возможной
       белой вспышки в этот момент видно ровно то же самое изображение. */
    background: url('hero-intro-first.png') center / 100% 100% no-repeat;
    width: auto;
    aspect-ratio: 9 / 16;
    max-width: none;
    object-fit: fill;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Маски здесь намеренно НЕТ.
       Сначала я гасил верх и низ ролика градиентом, повторяя радиальную маску
       статичного кадра. Но у кадра под этой маской лежит холст и закрывает
       её собой, а во время вступления холст спрятан — и вместо изображения
       в полосах сверху (над головой) и снизу (у ступней) проступал фон
       страницы с зерном. Это и выглядело как белый шум или фильтр.
       Ролик выше экрана (116svh против 100svh), поэтому без маски он
       закрывает кадр целиком, а его края остаются за пределами видимого. */
  }

  /* Пока идёт ролик, прячем ВСЕ слои фона, где есть та же женщина.

     Статичный кадр: его ноги доходят до 92% высоты и просвечивали бы сквозь
     угасающий низ ролика ещё до того, как она войдёт в кадр.

     Холст скролл-скраба: он выше статичного кадра (168svh против 116svh)
     и рисуется вообще без маски, поэтому из-под нижнего края ролика торчали
     стопы. Он же давал вспышку в начале: как только догружались первые кадры,
     движок рисовал первый кадр — её, уже стоящую в финальной позе.

     Гасим именно visibility: у неё нулевая длительность перехода, поэтому
     в конце вступления слои возвращаются мгновенно, без проявления. */
  html.intro-on .stage__first-frame,
  html.intro-on .stage__media,
  html.intro-on .stage__canvas { visibility: hidden; }

  /* Ролик уходит не подменой, а коротким растворением. Его последний кадр
     и статичный кадр — одно и то же изображение, поэтому двоиться тут нечему,
     зато любая разница в тоне (браузеры декодируют видео не совсем так же,
     как показывают PNG) превращается из ступеньки в плавный переход.
     Сам кадр и холст под роликом в этот момент уже открыты. */
  html.intro-fade .stage__intro {
    opacity: 0;
    transition: opacity .45s linear;
  }

  /* Сцена стоит на своём месте уже под прелоадером и не проявляется отдельным
     фейдом. Без этого между уходом прелоадера и приходом студии был просвет
     с голым фоном страницы — короткое моргание. Прелоадер непрозрачный,
     поэтому раньше времени ничего не видно. */
  html.intro-on .stage { opacity: 1; transition: none; }

  /* ---------- появление текста после вступления --------------------------- */

  /* Карточка выплывает целиком, а не только построчно: на телефоне у неё
     собственный стеклянный фон, и пока героиня не встала, его на экране быть
     не должно. Раньше во время ролика пустая карточка уже висела внизу. */
  .js .hero__copy {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .95s var(--e-soft), transform .95s var(--e-out);
  }

  body.hero-in .hero__copy { opacity: 1; transform: none; }

  /* Надпись садится чуть ниже плеч.
     Линия плеч в кадре — 0.2995 его высоты, полная ширина плеч набирается
     к 0.315. Кадр показан высотой 116.041svh с центром на 50svh, значит
     плечи приходятся на 26.7svh, низ плеч — на 28.5svh. 33svh — уже под
     ними, но ещё в плечевой зоне, а не «где-то на животе». */
  .hero__copy {
    top: 33svh;
    bottom: auto;
  }

  /* Порядок: сначала карточка, следом её строки. Инлайновые задержки
     (120 и 400 мс) считались под десктоп, где строк четыре; здесь их две,
     и пауза между ними выходила затянутой. */
  .js .hero__copy .ln { transition-delay: 120ms; }
  .js .hero__copy .hero__sub { transition-delay: 320ms; }

  /* Блоки подняты прямо под надпись.
     Карточка занимает 33..46svh, поэтому герой заканчивается на 52svh —
     следующий блок начинается сразу под ней и виден уже на первом экране.

     Герой стал ниже экрана, и сцена больше не залипает: надпись уезжает
     вместе с содержимым, а не стоит на месте. Это и требовалось — иначе
     блок физически не может подняться выше нижнего края, пока сцена держит
     надпись.

     Отсюда же и более раннее движение фигуры. Скраб держит первый кадр,
     пока не подойдёт заголовок формы пробного занятия (mobileVideoStart
     в app.js), а он теперь на 73svh выше — значит практика трогается
     раньше, ровно как просили. Сам механизм скраба не тронут. */
  .hero { height: 52vh; height: 52svh; }
  .hero + .sec--pane { margin-top: 0; }

  /* Стекло у блока «Пробное занятие» должно быть ОДНО и ровно такое же,
     как у «Занятий».

     Секция .mobile-booking сама по себе .sec--pane, то есть уже стеклянная,
     а форма внутри добавляла второй такой же слой поверх неё. Заливка
     и размытие складывались, и блок выходил плотнее и мутнее соседних.
     Стекло оставляем форме — у неё свои скругления и отступы, — а с секции
     снимаем. */
  .mobile-booking {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-booking .form--hero {
    border: 1px solid rgba(255, 255, 255, .55);
    background: var(--pane-tint);
    -webkit-backdrop-filter: blur(var(--pane-blur)) saturate(1.12);
    backdrop-filter: blur(var(--pane-blur)) saturate(1.12);
    box-shadow: 0 24px 64px -60px rgba(96, 74, 42, .3),
                inset 0 1px 0 rgba(255, 255, 255, .38);
  }
}

/* На тач-устройствах панели облегчены: заливка плотнее, размытие слабее —
   .sec--pane переопределён в style.css. Повторяем это и для формы, иначе
   на телефоне она осталась бы прозрачнее и мутнее «Занятий». */
@media (hover: none), (pointer: coarse) {
  .mobile-booking .form--hero {
    background: rgba(250, 246, 239, .64);
    -webkit-backdrop-filter: blur(3px) saturate(1.04);
    backdrop-filter: blur(3px) saturate(1.04);
  }
}