/* Состояния сцен. Статичный вид (без JS, reduced-motion) = конечное состояние каждой сцены.
   Переменные --on, --f, --rd, --o ставит GSAP. */

/* до готовности скриптов первый экран скрыт, чтобы не мигать; через 4 с без скриптов html теряет класс motion */
html.motion:not(.ready) [data-hero],
html.motion:not(.ready) .scene__stage { opacity: 0; }
html.motion:not(.ready) h1[data-split] { visibility: hidden; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.05em 0.12em; margin: 0 -0.05em -0.12em; }
.w > span { display: inline-block; will-change: transform; }

/* ноутбук: стопка листов разбора и сканирующая полоса */
.paper { visibility: hidden; }
.paper[data-i="0"] { visibility: visible; }
.st-a, .st-b { grid-area: 1 / 1; text-align: right; }
.st-a { opacity: calc(1 - var(--rd, 1)); }
.st-b { opacity: var(--rd, 1); }
.scan { position: absolute; left: -4px; right: -4px; top: 0; height: 40px; border-radius: var(--r-2); background: linear-gradient(rgb(75 68 224 / 0%), rgb(75 68 224 / 12%) 55%, rgb(75 68 224 / 0%)); opacity: 0; pointer-events: none; }

/* роли: слои переписки */
.chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; visibility: hidden; opacity: 0; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; }
.chat.is-active { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); }
.chat__in { display: flex; flex-direction: column; gap: 12px; flex: none; padding: 14px 16px 8px; }
.is-scrub .chat { display: block; transition: none; }
.is-scrub .detail { transition: none; }
.army img { opacity: calc(0.3 + 0.7 * var(--on, 1)); transform: scale(calc(0.92 + 0.08 * var(--on, 1))); transform-origin: 50% 60%; }
@media (min-width: 900px) { .phone__body { height: clamp(520px, calc(100svh - 150px), 640px); } }

/* низкие окна (ноутбуки 720–800 px): убираем второстепенное, чтобы сцена целиком помещалась */
@media (min-width: 900px) and (max-height: 820px) {
  .scene__stage { padding: calc(var(--nav-h) + 20px) 0 24px; }
  .split__copy { gap: 16px; }
  .split__copy .lead { font-size: 16.5px; }
  .step { padding: 11px 0; }
  .step__x { font-size: 14px; }
  .h2 { font-size: clamp(30px, 3.6vw, 46px); }
}
@media (min-width: 900px) and (max-height: 799px) {
  .ruler { display: none; }
  .army, .lead--roles { display: none; }
  .role { min-height: 46px; }
  .phone--t .chips { display: none; }
}