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

/* ---------- С1 вход ---------- */
#intro { background: var(--paper); }
/* v1.0: лист входа — над шапкой (70), точками (65) и капсулой; свой слой с первой отрисовки (will-change), чтобы растворение
   шло в композиторе без растра на старте. Герой под ним уже в конечном виде (без клипа и скрытого текста) */
html.intro #intro, html.intro #intro .r-wm { will-change: opacity; }
html.intro #intro { z-index: 80; }

/* ---------- С2/С3 герой: reduced — не липнет, лист идёт следом ---------- */
html.k-reduced .r-hero { position: relative; }

/* ---------- С5 Fuego (v0.9: раскладка под html.k-slides — одинаково с движением, в lite и при reduced): один экран 100svh, тёмный блок во всю ширину, столб по центру; раскрытие один раз (fire-column.js, mode enter) ---------- */
html.k-slides .r-fuego { height: 100vh; height: var(--sh); min-height: 560px; padding: 0; }   /* v2.0: --sh = высота контейнера слайдов (оболочка телефона) */
html.k-slides .r-fuego__sticky { position: relative; height: 100%; overflow: clip; }
html.k-slides .r-fuego__block { position: absolute; inset: 0; display: block; padding: 0; border-radius: 0; }
html.k-slides .r-fuego__col { position: absolute; top: 0; height: 100%; aspect-ratio: auto; left: 0; right: 0; }
html.k-slides .r-fuego__txt { position: absolute; inset: 0; padding: 0; display: block; pointer-events: none; }
html.k-slides .r-fuego__l, html.k-slides .r-fuego__p { position: absolute; }
/* телефон: столб на весь экран, строки стопкой внизу поверх затемнения .75 → 0 на 420 px */
@media (max-width: 899px) {
  html.k-slides .r-fuego__shade { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgb(23 18 14 / .78) 0, rgb(23 18 14 / .68) 260px, rgb(23 18 14 / .6) 480px, rgb(23 18 14 / .3) 580px, transparent 660px); }   /* v2.0: не темнее затемнения героя на ПК (было .84/.78/.64) */
  html.k-slides .r-fuego__txt { z-index: 3; inset: auto calc(var(--gut) + 52px) calc(96px + env(safe-area-inset-bottom)) var(--gut); display: flex; flex-direction: column; gap: 4px; }
  html.k-slides .r-fuego__l, html.k-slides .r-fuego__p { position: static; }
  html.k-slides .r-fuego__p { margin-top: 12px; }
  html.k-slides .r-fuego__pause { top: auto; right: var(--gut); bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* ролик телефона 540×960: растяжение не больше ×1,35 (729 × 1296 px); шире (планшет 730–899 px) столб по центру, по бокам carbon */
  html.k-slides .r-fuego__col { bottom: 0; margin: auto; max-width: 729px; max-height: 1296px; }
}
/* ПК: столб 56,25svh × 100svh по центру; строки по бокам, ширина до свободного поля */
@media (min-width: 900px) {
  /* ширина столба не больше 34vw: на 900–1100 px при 56,25svh строкам по бокам оставалось ≈130 px и «Después,» резалось краем */
  html.k-slides .r-fuego__block { --colw: min(56.25svh, 34vw); }
  /* от 1200 px столб не меньше 36vw (≥33 % площади экрана: 1440×900 → 518 px, 1920×1080 → 691 px) и не шире 729 px */
  @media (min-width: 1200px) { html.k-slides .r-fuego__txt .r-fuego__l--2, html.k-slides .r-fuego__p { right: max(4vw, 64px); }   /* справа — колонка точек */
    html.k-slides .r-fuego__block { --colw: min(max(56.25svh, 36vw), 729px); } }
  html.k-slides .r-fuego__col { left: calc(50% - var(--colw) / 2); right: auto; width: var(--colw); max-height: none; }   /* 88vh — только статичный блок */
  html.k-slides .r-fuego__txt { --side: calc(50% - var(--colw) / 2 - 4vw - 32px); }
  html.k-slides .r-fuego__l { width: min(30vw, var(--side)); }
  html.k-slides .r-fuego__l--1 { left: 4vw; top: calc(var(--hdr) + 9svh); }
  html.k-slides .r-fuego__l--2 { right: 4vw; top: 42svh; text-align: right; }
  html.k-slides .r-fuego__l--3 { left: 4vw; bottom: 14svh; }
  html.k-slides .r-fuego__p { right: 4vw; bottom: 14svh; width: min(26vw, var(--side)); margin: 0; text-align: right; }
  html.k-slides .r-fuego__pause { top: auto; right: auto; left: calc(50% + var(--colw) / 2 - 60px); bottom: 24px; }
}