/* scenes.css — раскладка сцен под движение (PLAN.md §3). Всё только под html.k-motion / html.intro:
   без JS и при reduced действует конечный вид из sections.css (герой, под ним статичная строка с постером, серии списком). */

/* ---------- С1 вход ---------- */
#intro { background: var(--brand); color: var(--paper); }
.intro__name { position: absolute; top: 0; left: var(--gut); font: 500 20px/1 var(--serif); height: var(--bar); display: flex; align-items: center; }
@media (min-width: 900px) { .intro__name { top: 20px; height: 44px; } }
.intro__f, .intro__rect { width: round(56vw, 2px); height: round(74.6vw, 2px); }
.intro__f { transform: translate(-50%, -50%); }
.intro__rect { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
@media (min-width: 900px) { .intro__f, .intro__rect { width: 300px; height: 400px; } }
.intro__count { position: absolute; right: var(--gut); bottom: 24px; font: 500 clamp(4rem, 2rem + 8vw, 9rem)/1 var(--sans); }
@media (min-width: 900px) { .intro__count { bottom: 40px; } }

/* ---------- С2/С3 герой + строка-окошко ---------- */
html:not(.k-motion) .stage__sticky { display: flex; flex-direction: column; }
html:not(.k-motion) .slotline { order: 2; }
html.k-motion .slotline__p { width: 100%; }
/* v0.9 первый переход без лага (замер в окне Chrome, notas.md «v0.9 первый переход»):
   1) видео героя не отдаётся в аппаратный оверлей DirectComposition. В оверлее Chrome держит цепочку кадров видео размером
      с его место на экране и на КАЖДОМ кадре уменьшения пересоздаёт её (SwapChainPresenter::ReallocateSwapChain, Present в GPU
      12–50 мс вместо ≤1) — кадры пропадали на каждом переходе, в headless этого пути нет вовсе. Фильтр без видимого эффекта
      переводит видео в обычную композицию (масштаб — дешёвая отрисовка текстуры).
   2) всё, что двигает переход, — постоянные слои с загрузки: иначе GSAP (force3D auto) создаёт слои в первом кадре хода
      и растрирует крупный текст (растр 23–31 мс в GPU = кадр 50 мс в начале перехода). */
/* v2.0: только с мышью/тачпадом (это обход оверлея DirectComposition Chrome на Windows). На телефоне фильтр — лишний проход
   отрисовки видео на каждом кадре (Android-эмулятор: notas.md «v2.0 телефон») */
@media not (hover: none) { html.k-motion .hero__inner video { filter: brightness(1); } }
/* v2.0 телефон: обрезка героя в окошко без clip-path (hero-slot.js rectClip) — обёртки обрезки во весь кадр */
.hero__crop, .hero__cropin { position: absolute; inset: 0; }
.hero__crop { overflow: hidden; background: #2b2a24; }   /* фон медиа (sections.css) — внутри обрезки */
.hero__media.k-rect { background: none; }
/* v2.0: постоянные слои героя — только с мышью/тачпадом (ПК, DirectComposition). На телефоне большие постоянные слои на iOS давали
   чёрные неотрисованные плитки и рывки (iPhone Дениса, 05.10); там слои создаёт GSAP на время перехода */
/* v1.0 бюджет слоёв: при слайдах — только пока герой рядом (html.k-near-hero ставит main.js по слайду, после конца хода) */
@media (hover: hover) { :is(html.k-motion:not(.k-slides), html.k-near-hero) :is(.hero__media, .hero__crop, .hero__cropin, .hero__inner, .hero__title, .hero__sub, .hero__price, .hero__cta, .hero__pause, .slotline .w, .inv__bg) { will-change: transform; } }
@media (hover: hover) { :is(html.k-motion:not(.k-slides), html.k-near-hero) .hero__shade { will-change: opacity; } }

/* ---------- С4 манифест: без пустой паузы после окошка (было 18vh сверху, на телефоне 20vh снизу) ---------- */
html.k-motion:not(.k-slides) .manifest { padding-top: 8vh; }
@media (max-width: 899px) { html.k-motion:not(.k-slides) .manifest { padding-bottom: 10vh; } }

/* ---------- С8 цены: растёт слой-заливка (plate-grow layer), секция сама прозрачная — текст не перерисовывается на скролле ---------- */
html.k-motion .precios { position: relative; background: transparent; }
html.k-motion .precios__plate { position: absolute; inset: 0; background: var(--brand); }
html.k-motion .precios > .wrap { position: relative; }

/* ---------- С5 Historias: кадр на весь экран + плашка ---------- */
/* v0.7: путь на серию 75 % экрана (v0.6 — 35 %: щелчок 100 px = треть серии, PageDown проходил две; до v0.6 — 75 %).
   Высота = (n × 0,75 + 1) экрана: сцена 4 экрана */
html.k-motion .hs { height: calc((var(--n, 4) * .75 + 1) * 100vh); height: calc((var(--n, 4) * .75 + 1) * calc(100 * var(--vu, 1svh))); }
html.k-motion .hs__item { margin: 0; }
html.k-motion .hs__main { position: absolute; inset: 0; height: auto; }
html.k-motion:not(.k-slides) .hs__item > figure { will-change: opacity; }   /* v0.7: кадры серий — постоянные слои (наплыв без пересборки слоёв) */
html.k-motion .hs__plate--live { position: absolute; z-index: 5; left: var(--gut); right: var(--gut); bottom: calc(80px + env(safe-area-inset-bottom)); padding: 20px 22px; }
html.k-motion .hs__plate--live .hs__title { font-size: 40px; }
@media (min-width: 900px) {
  html.k-motion .hs__item { display: block; }
  html.k-motion .hs__main { right: 40%; }
  html.k-motion .hs__side { position: absolute; top: 0; bottom: 0; right: 0; width: 40%; height: auto; }
  html.k-motion .hs__plate--live { left: 60%; right: auto; bottom: auto; top: 58%; width: 560px; translate: -50% 0; padding: 28px 32px; }   /* translate, не transform: transform плашки ведёт GSAP (уход при выходе) */
  html.k-motion .hs__plate--live .hs__title { font-size: var(--fs-plate); }
}