/* 5187 — лёгкая стеклянная подпись и спокойный первый кадр */
.stage__first-frame { display: none; }


@media (max-width: 860px) {
  /* Одного короткого жеста достаточно, чтобы перейти от первого экрана к
     содержанию. Базовые 165svh давали лишние пол-экрана пустой прокрутки. */
  .hero { height: 125vh; height: 125svh; }

  /* Исходный кадр из полного набора лежит точно поверх canvas. Пока посетитель
     не дошёл до формы пробного занятия, фон остаётся резким и неподвижным. */
  .stage__first-frame {
    display: block;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50svh;
    width: auto;
    /* Кадр последовательности — 1920×1552, и холст показан во всю его высоту
       (168svh). Но содержимое внутри кадра занимает НЕ 1080 строк, а 1072:
       сборщик делает scale=1920:1072 и потом pad=1920:1552:0:240
       (см. _build/build-frames.ps1). PNG — тот же кадр до этого сжатия,
       1920×1080, поэтому его надо показывать на высоте, которую занимают
       именно 1072 строки: 168 × 1072 / 1552 = 116.041.

       Прежнее значение 116.907 считалось от 1080 строк и было завышено
       на 0,75%. Из-за этого PNG и холст расходились тем сильнее, чем дальше
       от центра кадра, и у стоп — почти у нижнего края экрана, где маска
       PNG уже прозрачная и холст просвечивает, — расхождение доходило
       до ~7 px. Это и читалось как двоение пальцев ног. */
    height: 116.041svh;
    max-width: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    transform: translate(-50%, -50%);
    -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 70%, transparent 100%);
    mask-image: radial-gradient(50% 50% at 50% 50%, #000 70%, transparent 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .74s var(--e-soft), visibility 0s linear 0s;
    pointer-events: none;
  }

  .stage__first-frame.is-past-trial {
    opacity: 0;
    visibility: hidden;
    transition: opacity .74s var(--e-soft), visibility 0s linear .74s;
  }

  .hero__copy {
    display: block;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: max(86px, calc(env(safe-area-inset-bottom, 0px) + 78px));
    width: auto;
    padding: 20px 18px 19px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 26px;
    background: rgba(250,246,239,.58);
    -webkit-backdrop-filter: blur(7px) saturate(1.08);
    backdrop-filter: blur(7px) saturate(1.08);
    box-shadow: 0 20px 50px -34px rgba(66,47,25,.42), inset 0 1px 0 rgba(255,255,255,.55);
    text-align: center;
    pointer-events: none;
    will-change: auto;
  }

  body.hero-in .hero__copy { transform: none; opacity: 1; }
  .hero__desc { display: none; }
  .hero__copy .eyebrow {
    margin-bottom: 0;
    color: #8E6630;
    font-size: clamp(11px, 3.2vw, 13px);
    line-height: 1.5;
    letter-spacing: .2em;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }
  .hero__title { display: none; }
  .hero__sub {
    margin-top: 14px;
    color: #332A20;
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.45;
    letter-spacing: .13em;
    font-weight: 700;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  /* Подсказка «Листайте» с рукой убрана целиком: после вступления зритель
     и так понимает, что дальше листать, а лишний элемент спорил с текстом,
     который теперь выплывает у плеч. */

  .mobile-booking .hero__form-copy h2 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(17px, 5.6vw, 24px);
    letter-spacing: -.025em;
  }
}