/* =========================================================================
   Движение: проявления при прокрутке, вход первого экрана, переходы между страницами.
   Спокойно и медленно, без аттракционов.

   Как включается:
   - в <head> каждой страницы маленький скрипт ставит на <html> класс .m-on;
     без него (нет JS) всё видно сразу и ничего не прячется;
   - js/motion.js следит за [data-m] и [data-m-stagger] и ставит .is-in, когда блок въезжает в экран;
   - если motion.js не загрузился, через 2,5 с .m-on снимается и всё показывается.
   - У кого в системе «уменьшить движение» — всё стоит на месте (прячущие правила только под no-preference).

   Значения data-m:
     up     — подъём с проявлением (по умолчанию)
     fade   — только проявление
     words  — заголовок проявляется по словам (слова не сдвигаются, строки стоят ровно)
     img    — фото проявляется как отпечаток: из размытости и бледности в цвет, чуть «садясь» из увеличения
     rule   — линия прорисовывается слева направо
     build  — схема-пирамида собирается снизу вверх (motion.js раздаёт задержки по высоте)
     draw   — иконка прорисовывается линией
     seal   — печать в подвале «ставится» с лёгким поворотом
   data-m-stagger — дети контейнера поднимаются по очереди (data-m-rev — снизу вверх)
   ========================================================================= */

:root {
  --m-out: cubic-bezier(.16, 1, .3, 1);       /* мягкое торможение в конце */
  --m-curtain: cubic-bezier(.77, 0, .18, 1);  /* прорисовка линий: разгон и торможение */
  --m-step: 90ms;                             /* шаг очереди */
  interpolate-size: allow-keywords;           /* плавное раскрытие вопросов (где поддерживается) */
}

/* ---------- Переходы между страницами (Chrome, Edge, Safari 18.2+; где нет — обычный переход) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: m-page-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: m-page-in .6s var(--m-out) .06s both; }
@keyframes m-page-out { to { opacity: 0; translate: 0 -10px; } }
@keyframes m-page-in { from { opacity: 0; translate: 0 18px; } }

@media (prefers-reduced-motion: no-preference) {

  /* ================= Проявления при прокрутке ================= */
  .m-on [data-m],
  .m-on [data-m-stagger] > * {
    transition:
      opacity 1s var(--m-out),
      translate 1.1s var(--m-out),
      scale 1.1s var(--m-out),
      rotate 1.1s var(--m-out);
    transition-delay: var(--md, 0ms);
  }
  .m-on [data-m-stagger] > * { transition-delay: calc(var(--mi, 0) * var(--m-step) + var(--md, 0ms)); }

  .m-on [data-m="up"]:not(.is-in),
  .m-on [data-m-stagger]:not(.is-in) > * { opacity: 0; translate: 0 28px; }
  .m-on [data-m="fade"]:not(.is-in) { opacity: 0; }

  /* заголовок по словам: до разрезки прячется целиком; дальше слова проступают по очереди на своих местах
     (строчные span'ы — переносы и строки не меняются), а весь блок чуть поднимается одним куском */
  .m-on [data-m="words"]:not(.m-split) { opacity: 0; }
  .m-on [data-m="words"] { transition: translate 1.4s var(--m-out); }
  .m-on [data-m="words"]:not(.is-in) { translate: 0 14px; }
  .mw { transition: opacity 1.1s var(--m-out); transition-delay: var(--wd, 0ms); }   /* без blur: Safari режет размытие строчного span по краю строки */
  .m-on [data-m="words"]:not(.is-in) .mw { opacity: 0; }

  /* фото проявляется как отпечаток: рамка проступает, картинка из размытости и бледности приходит в цвет */
  .m-on [data-m="img"] { transition: opacity 1.3s var(--m-out), translate 1.5s var(--m-out); transition-delay: var(--md, 0ms); }
  .m-on [data-m="img"]:not(.is-in) { opacity: 0; translate: 0 18px; }
  .m-on [data-m="img"] img { transition: filter 2.2s var(--m-out), scale 2.6s var(--m-out); transition-delay: var(--md, 0ms); }
  .m-on [data-m="img"]:not(.is-in) img { filter: blur(14px) saturate(.3) brightness(1.12); scale: 1.06; }
  .m-on .ph--band[data-m="img"] img { transition-property: filter; }   /* масштаб ленты ведёт прокрутка (motion.js) */

  .m-on [data-m="rule"] { transform-origin: 0 50%; }
  .m-on [data-m="rule"]:not(.is-in) { scale: 0 1; }
  .m-on [data-m="rule"] { transition-duration: 1.4s; }

  /* схема: каждая деталь со своей задержкой (--pd), контур прорисовывается */
  .m-on [data-m="build"] :is(polygon, rect, line, text, path, .pyr-band) {
    transition: opacity .7s var(--m-out), translate .9s var(--m-out);
    transition-delay: var(--pd, 0ms);
  }
  .m-on [data-m="build"]:not(.is-in) :is(polygon, rect, line, text, path):not(.m-stroke),
  .m-on [data-m="build"]:not(.is-in) .pyr-band { opacity: 0; translate: 0 14px; }
  .m-on [data-m="build"] .m-stroke { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--m-curtain) .1s; }
  .m-on [data-m="build"]:not(.is-in) .m-stroke { stroke-dashoffset: 1; }

  .m-on [data-m="draw"] :is(path, rect, circle, line, polyline, ellipse) {
    stroke-dasharray: 1; stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.6s var(--m-curtain);
    transition-delay: calc(var(--md, 0ms) + 250ms);
  }
  .m-on [data-m="draw"]:not(.is-in) :is(path, rect, circle, line, polyline, ellipse) { stroke-dashoffset: 1; }

  .m-on [data-m="seal"]:not(.is-in) { opacity: 0; rotate: -14deg; scale: .9; }
  .m-on [data-m="seal"] { transition-duration: 1.6s; }

  /* ================= Вход первого экрана (чистый CSS — без вспышки до скрипта) ================= */
  @keyframes m-rise { from { opacity: 0; translate: 0 26px; } }
  @keyframes m-fade { from { opacity: 0; } }
  @keyframes m-drop { from { opacity: 0; translate: 0 -14px; } }
  @keyframes m-settle { from { opacity: 0; scale: 1.08; } }
  @keyframes m-develop { from { filter: blur(14px) saturate(.3) brightness(1.12); scale: 1.06; } }
  @keyframes m-name { from { opacity: 0; translate: 0 .55em; clip-path: inset(0 -5% 100% -5%); } to { opacity: 1; translate: 0 0; clip-path: inset(-40% -5% -40% -5%); } }

  .m-on .site-header .bar { animation: m-drop .9s var(--m-out) .1s both; }
  .m-vt .site-header .bar { animation: none; }   /* при переходе со страницы на страницу шапка остаётся на месте */

  /* главная: фото «садится», текст поднимается по очереди, имя выходит из-под линии */
  .m-on .hero-img { animation: m-settle 2.6s var(--m-out) both; }
  .m-on .hero-lead > * { animation: m-rise 1.1s var(--m-out) both; }
  .m-on .hero-lead > :nth-child(1) { animation-delay: .35s; }
  .m-on .hero-lead > :nth-child(2) { animation-delay: .47s; }
  .m-on .hero-lead > :nth-child(3) { animation-delay: .59s; }
  .m-on .hero-lead > :nth-child(4) { animation-delay: .71s; }
  .m-on .hero-giant .word { display: inline-block; animation: m-name 1.5s var(--m-out) .55s backwards; }   /* backwards: после входа обрезка снимается */
  .m-on .hero-links { animation: m-fade 1.2s var(--m-out) 1.1s both; }

  /* шапки подстраниц и статей */
  .m-on .det-back { animation: m-fade .9s var(--m-out) .15s both; }
  .m-on :is(.svc-mast-head, .stati-mast-head, .mat-mast-head, .art-mast, .cover-text) > * { animation: m-rise 1.1s var(--m-out) both; }
  .m-on :is(.svc-mast-head, .stati-mast-head, .mat-mast-head, .art-mast, .cover-text) > :nth-child(1) { animation-delay: .2s; }
  .m-on :is(.svc-mast-head, .stati-mast-head, .mat-mast-head, .art-mast, .cover-text) > :nth-child(2) { animation-delay: .32s; }
  .m-on :is(.svc-mast-head, .stati-mast-head, .mat-mast-head, .art-mast, .cover-text) > :nth-child(3) { animation-delay: .44s; }
  .m-on :is(.svc-mast-head, .stati-mast-head, .mat-mast-head, .art-mast, .cover-text) > :nth-child(n+4) { animation-delay: .56s; }
  .m-on .cover-portrait .ph { animation: m-rise 1.4s var(--m-out) .3s both; }
  .m-on .cover-portrait .ph img { animation: m-develop 2.4s var(--m-out) .3s both; }

  /* ================= Мелочи ================= */
  /* мобильное меню: пункты выходят по очереди */
  .mm-nav a, .mm-foot { transition: opacity .5s var(--m-out), translate .7s var(--m-out), color var(--t-fast) var(--ease); }
  body:not(.menu-open) .mm-nav a, body:not(.menu-open) .mm-foot { opacity: 0; translate: 0 16px; transition-duration: .2s; }
  body.menu-open .mm-nav a:nth-child(1) { transition-delay: .08s; }
  body.menu-open .mm-nav a:nth-child(2) { transition-delay: .14s; }
  body.menu-open .mm-nav a:nth-child(3) { transition-delay: .2s; }
  body.menu-open .mm-nav a:nth-child(4) { transition-delay: .26s; }
  body.menu-open .mm-nav a:nth-child(5) { transition-delay: .32s; }
  body.menu-open .mm-nav a:nth-child(n+6) { transition-delay: .38s; }
  body.menu-open .mm-foot { transition-delay: .42s; }

  /* вопросы раскрываются плавно — анимацию высоты ведёт motion.js (работает и в Safari) */

  /* фото в ссылках-карточках чуть приближаются под курсором */
  @media (hover: hover) {
    a .ph img, a [data-m="img"] img { transition: scale 1.2s var(--m-out); }
    a:hover .ph img, a:hover [data-m="img"].is-in img { scale: 1.035; }
  }
}

/* полоска прочитанного в статьях (motion.js создаёт её только на страницах статей) */
.m-progress {
  position: fixed; left: 0; top: 0; z-index: 60; inline-size: 100%; block-size: 2px;
  background: var(--accent); transform-origin: 0 50%; scale: var(--p, 0) 1; pointer-events: none;
  view-transition-name: m-progress;
}