/* motion-kit v0.3 · kit.css — токены движения, классы скрытия, структура сцен, reduced-ветки.
   Классы на <html> (ставит inline-скрипт в <head>, env.js держит их актуальными):
     .js        — скрипты есть;          .intro    — идёт вход С1 (скролл заблокирован ≤2,5 с);
     .k-motion  — js и движение можно;   .k-reduced — prefers-reduced-motion или ?reduced=1;
     .k-focus   — открыт фокус С6.
   Всё, что прячет контент до анимации, стоит только под .k-motion: без JS и при reduced текст и кадры видны. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-reveal: 1.2s;
  --t-ui: 0.22s;
}

.k-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- маски строк/слов/букв (SplitText и запасной путь) ---------- */
.k-line-mask, .k-word-mask { padding-top: .12em; margin-top: -.12em; padding-bottom: .12em; margin-bottom: -.12em; }
/* Pulcinella 06.10: блок на время разбиения на строки (main.js revealLines ставит k-lines) — колонкой flex: поля масок не схлопываются
   ни между собой, ни с полями блока, разбитый текст ровно той же высоты, что обычный (было +.12em на строку → прыжок при снятии) */
.k-lines { display: flex; flex-direction: column; }
/* Pulcinella 06.10: маска буквы (статус «Cerrado ahora», sheet-over) — по верху строки: в Safari/WebKit inline-block с overflow: clip
   встаёт базовой линией на нижний край, строка выше на 6 px (46 px шрифт), при снятии разбиения текст ниже прыгал. В Chrome без изменений */
.k-char-mask { vertical-align: top; }
.k-word { position: relative; }

/* ---------- slot.js ---------- */
.k-slot { display: inline-flex; font-variant-numeric: lining-nums tabular-nums; }
.k-slot__c { position: relative; display: inline-block; overflow: clip; overflow-clip-margin: 0; padding-top: .06em; margin-top: -.06em; }
.k-slot__d { display: inline-block; white-space: pre; }
.k-slot__d.is-out { position: absolute; left: 0; top: .06em; }

/* ---------- подчёркивание-проявление (рецепт 7b) ---------- */
.k-ul { position: relative; text-decoration: none; }
.k-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .k-ul:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
.k-ul:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: none) { .k-ul::after { transform: scaleX(1); } }

/* ---------- С1 вход ---------- */
#intro { display: none; }
html.intro { overflow: hidden; }
html.intro #intro { display: block; position: fixed; inset: 0; z-index: 60; }
html.intro .stage__sticky { z-index: 61; background: transparent; }
/* v1.0 (копия ресторана): вход — растворение листа (intro-fade.js); герой под листом в конечном виде с первой отрисовки.
   Правила старого входа (окно clip-path, скрытый текст героя и шапки) сняты: см. notas.md «v1.0 вход» */
.intro__f { position: absolute; left: 50%; top: 50%; margin: 0; overflow: hidden; clip-path: inset(50%); }
.intro__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v0.2, LCP: первый кадр стопки виден с первой отрисовки (без клипа, крупно 1,35 — модуль доводит до 1).
   Chrome не считает LCP картинку на весь экран (постер героя) и картинку, впервые нарисованную с клипом 0:
   без этого LCP становился H1 в конце входа (4,8 с на mobile-slow). Заодно занавес не пустой, пока грузится JS. */
html.intro .intro__f:first-of-type { clip-path: none; }
html.intro .intro__f:first-of-type img { transform: scale(1.35); }

/* ---------- С3 сцена героя (sticky вместо pin-spacer) ---------- */
html.k-motion .stage { position: relative; height: calc(100vh + var(--stage-extra, 120vh)); height: calc(100svh + var(--stage-extra, 120svh)); }
@media (max-width: 899px) { html.k-motion .stage { height: calc(100svh + var(--stage-extra, 80svh)); } }
html.k-motion .stage__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
html.k-motion .stage .hero { position: absolute; inset: 0; }
/* строка над медиа (z 3 > медиа z 2): слова не уходят под летящий кадр; клики проходят к кнопкам героя */
html.k-motion .slotline { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
html.k-motion .slotline .slot img { display: none; }            /* в слот прилетает живое медиа; v0.3: display, не visibility — ленивый постер не грузится */
/* начальное «спрятано» у слов (gsap.set) и плашки «LUZ» (immediateRender) ставит сам модуль: CSS-transform здесь
   смешался бы с yPercent GSAP и оставил слова под маской */

/* ---------- С4 манифест ---------- */
.k-plate { position: absolute; z-index: -1; left: -.08em; right: -.36em; top: .02em; bottom: -.04em; background: var(--brand, #424B2C); transform-origin: 0 50%; }
.k-plate.is-last { right: -.08em; }
html.k-motion .manifest__t.is-split [data-invert] { background: none; color: inherit; }
html.k-motion .manifest__t.is-split [data-invert].is-inv { color: var(--paper, #F7F5F0); }

/* ---------- С5 Historias ---------- */
html.k-motion .hs { height: calc(var(--n, 4) * 100vh); height: calc(var(--n, 4) * 100svh); position: relative; }
html.k-motion .hs__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
html.k-motion .hs__item { position: absolute; inset: 0; }
html.k-motion .hs__item > figure { visibility: hidden; }
html.k-motion .hs__item:first-child > figure { visibility: visible; }
html.k-motion .hs__plate--static { display: none; }
.hs__plate--live { display: none; }
html.k-motion .hs__plate--live { display: block; }
.hs__title { display: grid; overflow: clip; padding: .12em 0 .14em; margin: -.12em 0 -.14em; font-kerning: none; }
.hs__title > .hs__t { grid-area: 1 / 1; }
.hs__meta { display: grid; }
.hs__meta > .hs__mlayer { grid-area: 1 / 1; }
.hs__nav { position: relative; }
.hs__ind { position: absolute; left: 0; bottom: 0; width: 100px; height: 1px; background: currentColor; transform-origin: 0 50%; list-style: none; pointer-events: none; }

/* ---------- С6 фокус ---------- */
html.k-focus .capsule { visibility: hidden; }
::view-transition-group(foco) { animation-duration: .8s; animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ---------- С9 wordmark ---------- */
.wm { overflow: clip; padding-top: .12em; font-kerning: none; }
.wm__t { display: inline-block; white-space: nowrap; font-size: var(--wm-size, 12vw); }

/* ---------- reduced: никаких сдвигов, только мгновенные/прозрачностные смены ---------- */
html.k-reduced .k-ul::after { transition: none; }
html.k-reduced *, html.k-reduced *::before, html.k-reduced *::after { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}