/* KZM motion.css (набор движения kz10). Подключать в <head> после style.css.
   Все скрытые состояния действуют только под html.js (ставит строчка в <head>, в ?shot она не ставится)
   и только при prefers-reduced-motion: no-preference. Без скрипта страница целиком видна. */
/* :where() даёт нулевую специфичность: значения из tokens.css дизайнера всегда главнее */
:where(:root) {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --m-rise: 24px;
}

/* ---------- 1. до старта скрипта: прячем цели, страховка показывает их через 3 с ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.m-ready) :is([data-m~="rise"], [data-m~="text"], [data-m~="title"], [data-m~="lines"], [data-m~="chars"], [data-m~="img"], [data-m~="img-scale"], [data-m~="count"], [data-m~="draw"], [data-m-load], [data-m~="group"] > *) {
    opacity: 0;
    animation: m-failsafe 1ms linear 3s forwards;
  }
}
@keyframes m-failsafe { to { opacity: 1; } }
/* первый экран не ждёт медленную сеть дольше 1.2 с (LCP): страховка для data-m-load срабатывает раньше */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.m-ready) [data-m-load] { animation-delay: 1.2s; }
}

/* ---------- 2. состояния появления (reveal.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .m-hide { opacity: 0; }
  .m-hide.m-up { transform: translate3d(0, var(--m-rise), 0); }
  .m-hide.m-zoom { transform: scale(1.06); }
  .m-hide.m-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .m-hide.m-zoom.m-in { transition: opacity 900ms var(--ease-out), transform 1400ms var(--ease-soft); }
  /* шторка на картинке: рамка открывается от края, снимок внутри оседает с 1.12 */
  .m-shut { clip-path: inset(0 0 100% 0); }
  .m-shut[data-m-from="bottom"] { clip-path: inset(100% 0 0 0); }
  .m-shut[data-m-from="left"] { clip-path: inset(0 100% 0 0); }
  .m-shut[data-m-from="right"] { clip-path: inset(0 0 0 100%); }
  .m-shut.m-in { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
  .m-shut:not(.m-noscale) :is(img, video) { transform: scale(1.12); }
  .m-shut.m-in:not(.m-noscale) :is(img, video) { transform: none; transition: transform 1500ms var(--ease-soft); }
  /* рисование линий SVG */
  .m-draw :is(path, line, polyline, polygon, circle, ellipse, rect) { transition: stroke-dashoffset 1400ms var(--ease-in-out); }
}
@media (prefers-reduced-motion: reduce) {
  .m-hide { opacity: 0; }
  .m-hide.m-in { opacity: 1; transition: opacity 500ms ease; }
}
/* маски строк SplitText: запас сверху для Й, Ё и казахских знаков, снизу для выносных */
.m-line-mask { padding: 0.12em 0 0.1em; margin: -0.12em 0 -0.1em; }
.m-word, .m-char { display: inline-block; }

/* ---------- 3. обратная связь контролов ---------- */
.m-press, [data-m~="magnetic"] { transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.m-press:active { transform: scale(0.97); }
.m-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .m-link:hover { text-decoration-color: currentColor; }
}
:focus-visible { transition: outline-offset var(--t-press) var(--ease-out); }

/* ---------- 4. бегущая строка (marquee.js) ---------- */
[data-m~="marquee"] { overflow: hidden; white-space: nowrap; }
.m-marquee__track { display: inline-flex; flex-wrap: nowrap; will-change: transform; }
.m-marquee__track > * { flex: none; }

/* ---------- 5. закреплённый сюжет (pin-story.js) ---------- */
[data-m~="pin-story"] { position: relative; }
[data-m~="pin-story"] [data-m-frames] { position: relative; }
@media (min-width: 761px) {
  [data-m~="pin-story"] [data-m-frames] { position: sticky; top: var(--m-pin-top, 12vh); }
}
[data-m~="pin-story"] [data-m-frame] { margin: 0; }
.js [data-m~="pin-story"] [data-m-frames] [data-m-frame] ~ [data-m-frame] { position: absolute; inset: 0; }
.js [data-m~="pin-story"] [data-m-frames] [data-m-frame] { opacity: 0; transition: opacity 700ms var(--ease-out); }
.js [data-m~="pin-story"] [data-m-frames] [data-m-frame].is-on { opacity: 1; }
.js [data-m~="pin-story"] [data-m-frames] [data-m-frame]:first-child:not(.m-off) { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-m~="pin-story"] [data-m-frames] [data-m-frame] :is(img, video) { transform: scale(1.06); transition: transform 1600ms var(--ease-soft); }
  .js [data-m~="pin-story"] [data-m-frames] [data-m-frame].is-on :is(img, video) { transform: none; }
}

[data-m~="pin-story"] [data-m-step] { min-width: 0; }
.m-ps-inline [data-m-frames] { display: none; }
.m-ps-inline [data-m-step] > [data-m-frame] { display: block; position: relative; width: 100%; max-width: 100%; height: auto; min-height: 0; margin: 0 0 20px; opacity: 1; }
.m-ps-inline [data-m-step] > [data-m-frame] :is(img, video) { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; transform: none; }

/* ---------- 6. горизонтальная лента (hscroll.js) ---------- */
[data-m~="hscroll"] [data-m-track] { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
[data-m~="hscroll"] [data-m-track] > * { flex: none; scroll-snap-align: start; }
.m-hs-on [data-m-sticky] { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.m-hs-on [data-m-track] { overflow: visible; will-change: transform; }
@media (max-width: 760px) {
  [data-m~="hscroll"]:not([data-m-mobile="swipe"]) [data-m-track] { flex-direction: column; overflow: visible; }
}

/* ---------- 7. курсор-подпись (cursor.js) ---------- */
.m-cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--m-cursor-bg, var(--accent, #111)); color: var(--m-cursor-ink, #fff); font-size: 14px; line-height: 1.1; text-align: center; opacity: 0; transform: translate3d(-200px, -200px, 0) scale(0.6); transition: opacity var(--t-ui) ease; }
.m-cursor.is-on { opacity: 1; }
.m-cursor__label { padding: 0 10px; }

/* ---------- 8. след из картинок (image-trail.js) ---------- */
[data-m~="trail"] { position: relative; }
.m-trail-img { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; object-fit: cover; will-change: transform, opacity; }

/* ---------- 9. смена снимков (crossfade.js) и медленный наезд ---------- */
[data-m~="crossfade"] { position: relative; overflow: hidden; }
[data-m~="crossfade"] > :is(img, picture, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-m~="crossfade"] > :is(img, picture, video) ~ :is(img, picture, video) { position: absolute; inset: 0; opacity: 0; }
.m-xf-on > :is(img, picture, video) { transition: opacity 1600ms ease; }
.m-xf-on > .is-on { opacity: 1 !important; }
.m-xf-on > .is-off { opacity: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-m~="kenburns"] { animation: m-kenburns 22s var(--ease-in-out) infinite alternate; animation-play-state: var(--m-play, running); transform-origin: 60% 40%; }
}
@keyframes m-kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }

/* ---------- 10. вступление (loader.js) ---------- */
html.m-intro::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--m-loader-bg, #111); animation: m-intro-off 1ms linear 2.4s forwards; }
@keyframes m-intro-off { to { visibility: hidden; opacity: 0; } }
.m-loader { position: fixed; inset: 0; z-index: 101; display: grid; place-items: center; background: var(--m-loader-bg, #111); color: var(--m-loader-ink, #fff); clip-path: inset(0 0 0 0); pointer-events: none; }
.m-loader__word { font: inherit; font-family: var(--m-loader-font, inherit); font-size: var(--m-loader-size, 12vw); line-height: 1; letter-spacing: -0.03em; overflow: hidden; padding: 0.12em 0.04em 0.1em; white-space: nowrap; }
.m-loader__ch { display: inline-block; transform: translate3d(0, 110%, 0); }

/* ---------- 11. переменный шрифт (varfont.js) ---------- */
.m-vf-ch { display: inline-block; white-space: pre; }

/* ---------- 12. мягкая прокрутка (smooth.js, только при <html data-m-smooth>) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- 13. общие отклики живой вещи и интерфейса ---------- */
/* аккордеон: data-m="acc" на контейнере <details> — ответ проявляется при открытии */
@media (prefers-reduced-motion: no-preference) {
  [data-m~="acc"] details[open] > summary ~ * { animation: m-open 280ms var(--ease-out) both; }
}
@keyframes m-open { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }
/* вкладки: класс m-tab — толстое подчёркивание 4px вырастает у выбранной (aria-selected / aria-pressed / .is-on) */
.m-tab { position: relative; }
.m-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-ui) var(--ease-out); }
.m-tab[aria-selected="true"]::after, .m-tab[aria-pressed="true"]::after, .m-tab.is-on::after { transform: scaleX(1); }
/* бегунок по шкале: data-m="runner" (двигайте transform или left, движение плавное) */
[data-m~="runner"] { transition: transform 320ms var(--ease-out), left 320ms var(--ease-out); }
/* поле, меняющее цвет по выбору: data-m="chapter" */
[data-m~="chapter"] { transition: background-color 400ms ease, color 400ms ease; }
/* масштаб по значению (рост силуэта по весу и т. п.): data-m="scale" */
[data-m~="scale"] { transition: transform 300ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  [data-m~="runner"], [data-m~="scale"], .m-tab::after { transition-duration: 1ms; }
}

/* ---------- 14. перекидное табло (flap.js): ячейка из двух половинок и откидного листка ---------- */
.m-flap { position: relative; display: inline-block; height: 1.15em; line-height: 1.15em; vertical-align: bottom; text-align: center; perspective: 6em; }
.m-flap__h { position: absolute; inset: 0; display: block; text-align: center; backface-visibility: hidden; background: var(--m-flap-bg, transparent); }
.m-flap__t { clip-path: inset(0 -1em 50% -1em); }
.m-flap__b { clip-path: inset(50% -1em 0 -1em); }
.m-flap__leaf { transform-origin: 50% 50%; z-index: 1; }
/* ячейки вёрстки (data-cell): размер и плашку задаёт класс ячейки, половинки наследуют её фон и центрируют знак */
.m-flap--fixed { height: auto; line-height: inherit; }
.m-flap--fixed .m-flap__h { display: grid; place-items: center; background: inherit; }
.m-flap--fixed::before, .m-flap--fixed::after { z-index: 3; }

/* ===================== движение сайта ===================== */
/* gravity-yoga: состояния сценария сайта (только под html.js и без reduce; в ?shot класса js нет) */
@media (prefers-reduced-motion: no-preference) {
  /* слово в гамаке скрыто до старта скрипта (страховка показывает его через 3 с) */
  .js:not(.m-ready) [data-m~="sling"] .sling__word { opacity: 0; animation: m-failsafe 1ms linear 3s forwards; }

  /* «ткань опускается»: свёрнутая к верху маска с тем же числом точек, что и --clip-sag */
  .js:not(.m-ready) [data-m~="sag"], html.js .m-sagdrop {
    clip-path: polygon(0 0, 100% 0, 100% 0, 95% 0, 90% 0, 85% 0, 80% 0, 75% 0, 70% 0, 65% 0, 60% 0, 55% 0, 50% 0, 45% 0, 40% 0, 35% 0, 30% 0, 25% 0, 20% 0, 15% 0, 10% 0, 5% 0, 0% 0);
  }
  .js:not(.m-ready) [data-m~="sag"] { animation: gy-sag-failsafe 1ms linear 3s forwards; }
  html.js .m-sagdrop.m-in { clip-path: var(--clip-sag); transition: clip-path 1200ms var(--ease-in-out); }
  html.js .m-sagdrop > img { transform: translate3d(0, -5%, 0) scale(1.06); }
  html.js .m-sagdrop.m-in > img { transform: none; transition: transform 1500ms var(--ease-soft); }

  /* талон контактов ложится, слегка доворачиваясь */
  .m-ticket { opacity: 0; transform: translate3d(0, 48px, 0) rotate(-2.5deg); }
  .m-ticket.m-in { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 1000ms var(--ease-out); }

  /* картотека правил: ответ проявляется при открытии */
  [data-m~="cards"] details[open] > summary ~ * { animation: gy-open 280ms var(--ease-out) both; }
}
@keyframes gy-sag-failsafe { to { clip-path: var(--clip-sag); } }
@keyframes gy-open { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }

/* слоты-гамаки и чипы: нажатие (без скрипта тоже) */
[data-m~="slot"] { transition: transform var(--t-press) var(--ease-out); }
[data-m~="slot"]:active { transform: scale(0.96); }
[data-m~="slot"]:focus-visible { outline-offset: 4px; }