/* Сайт Никиты Лушникова — движение: переход между страницами, появление первого экрана,
   появление блоков при прокрутке, пара «до и после», отклик кнопок и плиток, шапка.
   Подключается после site.css на всех страницах; работает вместе с assets/js/motion.js.
   Набор задаётся в <html data-mv="calm|bold">: calm — «спокойный» (он же без атрибута), bold — «заметнее».
   Всё лежит внутри условия «движение не уменьшено»: у кого в телефоне или компьютере включено
   «уменьшить движение», страница показывается сразу, без анимации. Без скрипта весь текст виден. */

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

  /* ── Настройки набора: меняются в одном месте ── */
  :root {
    --mv-rise: 12px;       /* на сколько блок поднимается при появлении */
    --mv-dur: .45s;        /* сколько длится появление блока */
    --mv-step: 45ms;       /* пауза между соседними блоками в очереди */
    --mv-zoom: 1.035;      /* с какого приближения фото возвращается к обычному */
    --mv-zoom-dur: 1.2s;
    --mv-count: 1.6s;      /* за сколько встаёт последняя цифра числа (барабан) */
    --mv-ease: cubic-bezier(.22, .61, .36, 1);   /* плавная остановка, без отскока */
    --mv-ease-io: cubic-bezier(.65, 0, .35, 1);
  }
  html[data-mv="bold"] {
    --mv-rise: 26px;
    --mv-dur: .65s;
    --mv-step: 80ms;
    --mv-zoom: 1.08;
    --mv-zoom-dur: 1.8s;
    --mv-count: 2.4s;
  }

  /* Анимации первого экрана. Блоки ниже экрана поднимает motion.js, теми же числами из настроек. */
  @keyframes mv-rise-l { from { opacity: 0; translate: 0 var(--mv-rise); } }
  @keyframes mv-fade-l { from { opacity: 0; } }
  @keyframes mv-zoom-l { from { scale: var(--mv-zoom); } }
  @keyframes mv-pop-l { from { opacity: 0; scale: .6; } }
  @keyframes mv-wipe-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes mv-line-l { from { clip-path: inset(-200% 105% -200% -5%); } to { clip-path: inset(-200% -5% -200% -5%); } }
  @keyframes mv-arrow-l { from { clip-path: inset(-60% -10% -60% 110%); } to { clip-path: inset(-60% -10% -60% -10%); } }

  /* ── 1. Переход между страницами ──
     Браузер сам перетекает со старой страницы на новую (Chrome, Яндекс Браузер, Safari с 18.2).
     Шапка названа отдельно, поэтому стоит на месте. В остальных браузерах — короткое затухание из motion.js. */
  @view-transition { navigation: auto; }
  .header { view-transition-name: mv-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: ease; }

  /* «Заметнее»: старая страница уходит вверх, новая только проявляется. Поднимать её целиком нельзя:
     блоки первого экрана поднимаются сами, и вышло бы два появления подряд. */
  @keyframes mv-page-out { to { opacity: 0; translate: 0 -18px; } }
  html[data-mv="bold"]::view-transition-old(root) { animation: mv-page-out .22s cubic-bezier(.4, 0, 1, 1) both; mix-blend-mode: normal; }
  html[data-mv="bold"]::view-transition-new(root) { animation: mv-fade-l .3s ease .1s both; mix-blend-mode: normal; }
  /* «Заметнее»: заголовок нажатой плитки перелетает в заголовок новой страницы (плитку помечает motion.js). */
  html[data-mv="bold"] main h1 { view-transition-name: mv-title; }
  html[data-mv="bold"]::view-transition-group(mv-title) { animation-duration: .42s; animation-timing-function: var(--mv-ease-io); }
  html[data-mv="bold"]::view-transition-old(mv-title),
  html[data-mv="bold"]::view-transition-new(mv-title) { height: 100%; object-fit: contain; object-position: 0 0; }

  .mv-leave main, .mv-leave .footer { opacity: 0; transition: opacity .14s ease; }

  /* ── 2. Первый экран: текст по очереди, фото чуть приближается ──
     Только стили, скрипт не нужен: текст начинает проявляться сразу и читается раньше полсекунды. */
  :is(.home-hero__text, .vd-hero__text, .rz-head__text) > * {
    animation: mv-rise-l var(--mv-dur) var(--mv-ease) calc(var(--mv-n, 0) * var(--mv-step)) backwards;
  }
  :is(.home-hero__text, .vd-hero__text, .rz-head__text) > :nth-child(2) { --mv-n: 1; }
  :is(.home-hero__text, .vd-hero__text, .rz-head__text) > :nth-child(3) { --mv-n: 2; }
  :is(.home-hero__text, .vd-hero__text, .rz-head__text) > :nth-child(4) { --mv-n: 3; }
  :is(.home-hero__text, .vd-hero__text, .rz-head__text) > :nth-child(5) { --mv-n: 4; }
  :is(.home-hero__text, .vd-hero__text, .rz-head__text) > :nth-child(n+6) { --mv-n: 5; }

  .home-hero__mask img, .rz-pic__main img { animation: mv-zoom-l var(--mv-zoom-dur) var(--mv-ease) backwards; }
  html[data-mv="bold"] :is(.home-hero__pic, .rz-pic) { animation: mv-fade-l .6s ease backwards; }
  .home-hero__say { animation: mv-rise-l var(--mv-dur) var(--mv-ease) .5s backwards; }
  /* Синяя черта под словом «жизни» рисуется слева направо после заголовка. */
  .uline svg { animation: mv-line-l .55s var(--mv-ease-io) .35s backwards; }
  html[data-mv="bold"] .uline svg { animation-duration: .8s; animation-delay: .5s; }
  /* «Ты тоже можешь»: в наборе «заметнее» надпись появляется последней, стрелка рисуется к лицам. */
  html[data-mv="bold"] .hand { animation: mv-fade-l .45s ease .8s backwards; }
  html[data-mv="bold"] .hand svg { animation: mv-arrow-l .5s var(--mv-ease-io) 1.1s backwards; }

  /* Полоса фактов и плитки под первым экраном: на компьютере видны сразу, поэтому тоже встают по очереди. */
  .home-facts, .vd-facts { animation: mv-rise-l var(--mv-dur) var(--mv-ease) calc(5 * var(--mv-step)) backwards; }
  .home-tiles > .tile { animation: mv-rise-l var(--mv-dur) var(--mv-ease) calc((6 + var(--mv-n, 0)) * var(--mv-step)) backwards; }
  .home-tiles > .tile:nth-child(2) { --mv-n: 1; }
  .home-tiles > .tile:nth-child(3) { --mv-n: 2; }
  .home-tiles > .tile:nth-child(4) { --mv-n: 3; }

  /* «До и после» на первом экране «Второго дыхания»: сначала «до», следом «после». */
  .vd-hero__pic .ba > * { animation: mv-rise-l var(--mv-dur) var(--mv-ease) calc(2 * var(--mv-step)) backwards; }
  .vd-hero__pic .ba > .ba__ph--now { animation-delay: calc(2 * var(--mv-step) + .2s); }
  .vd-hero__pic .ba > .ba__cap { animation-delay: calc(2 * var(--mv-step) + .3s); }
  .vd-hero__pic .ba > .ba__cap--now { animation-delay: calc(2 * var(--mv-step) + .45s); }
  .vd-hero__pic .ba__arr { animation: mv-pop-l .35s var(--mv-ease) calc(2 * var(--mv-step) + .5s) backwards; }
  .vd-hero__pic .ba-note { animation: mv-fade-l var(--mv-dur) ease calc(2 * var(--mv-step) + .55s) backwards; }
  /* «Заметнее»: фото «после» открывается шторкой слева направо. */
  html[data-mv="bold"] .vd-hero__pic .ba__ph--now .ba__im img { animation: mv-wipe-l .85s var(--mv-ease-io) calc(2 * var(--mv-step) + .35s) backwards; }
  html[data-mv="bold"] .vd-hero__pic .ba__arr { animation-delay: calc(2 * var(--mv-step) + .95s); }
  html[data-mv="bold"] .vd-hero__pic .ba > .ba__cap--now { animation-delay: calc(2 * var(--mv-step) + .9s); }

  /* ── 3. Блоки при прокрутке ──
     Класс mv-r ставит motion.js только тем блокам, что целиком ниже экрана, и снимает, когда до блока долистали.
     Само появление делает скрипт. Свойство animation здесь не трогаем: иначе у блока, который оживает
     ещё и на первом экране, анимация из раздела 2 запустилась бы второй раз. */
  .mv-r { opacity: 0; }
  /* Пара «до и после»: рамка стоит, прячем только фото, подписи и стрелку. */
  .ba.mv-r { opacity: 1; }
  .ba.mv-r > *, .ba.mv-r .ba__arr { opacity: 0; }

  /* Цифры-барабан (ставит motion.js): у каждой цифры своё окошко, в нём снизу вверх едет лента цифр.
     Ширину окошка держит невидимая готовая цифра, поэтому строка не дрожит и в конце ничего не сдвигается.
     Поля с отрицательным отступом расширяют окошко, не меняя вёрстку: цифра у края проявляется, а не обрезается. */
  span.mv-n { white-space: nowrap; }
  /* Шрифт берём у самого числа. Без этого правило сайта вида «.блок span { font-size: … }»
     перекрасит и уменьшит цифры в окошках (так было на «Помощи», в плашке «6 направлений»). */
  span.mv-n, span.mv-d, span.mv-d__g, span.mv-d__s, span.mv-d__s > span {
    font: inherit; letter-spacing: inherit; color: inherit; text-transform: none;
  }
  span.mv-d {
    display: inline-block; position: relative;
    padding: .16em .2em; margin: -.16em -.2em;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 .24em, #000 calc(100% - .24em), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 .24em, #000 calc(100% - .24em), transparent);
  }
  span.mv-d__g { visibility: hidden; }
  span.mv-d__s { position: absolute; top: .16em; left: 0; right: 0; text-align: center; will-change: transform; }
  span.mv-d__s > span { display: block; padding-bottom: .38em; }   /* зазор между цифрами на ленте: в окошке видно одну цифру, а не две половинки */

  /* ── 4. Отклик кнопок и плиток ── */
  .btn, .tile, .scard, a.card, .round, .burger { -webkit-tap-highlight-color: transparent; }
  .btn { transition: background-color .15s ease, box-shadow .2s ease, translate .2s var(--mv-ease), scale .12s ease; }
  .btn > .ico:last-child { transition: translate .2s var(--mv-ease); }
  .tile, .scard, a.card { transition: box-shadow .25s ease, translate .25s var(--mv-ease), scale .15s ease; }
  .tile__img img, .scard__pic img { transition: scale .6s var(--mv-ease); }
  .round, .burger { transition: box-shadow .15s ease, scale .12s ease; }

  .btn:active { scale: .97; }
  .tile:active, .scard:active, a.card:active { scale: .985; }
  .round:active, .burger:active { scale: .93; }

  @media (hover: hover) {
    .btn:hover { translate: 0 -1px; }
    .btn:hover > .ico:last-child { translate: 3px 0; }
    .tile:hover, .scard:hover, a.card:hover { translate: 0 -3px; box-shadow: 0 2px 4px rgba(13, 27, 46, .06), 0 18px 40px rgba(23, 99, 246, .16); }
    .tile:hover .tile__img img, .scard:hover .scard__pic img { scale: 1.05; }
  }

  /* ── 5. Шапка: после начала прокрутки становится ниже и плотнее ──
     Класс is-stuck ставит motion.js. Отступ снизу возвращает забранные 10px, поэтому страница не дёргается. */
  .header { transition: box-shadow .25s ease, margin-bottom .25s var(--mv-ease); }
  .header__row { transition: min-height .25s var(--mv-ease); }
  .logo__mark { display: inline-block; transform-origin: 0 50%; transition: scale .25s var(--mv-ease); }
  .header.is-stuck { margin-bottom: 10px; box-shadow: 0 1px 2px rgba(13, 27, 46, .06), 0 10px 28px rgba(13, 27, 46, .12); }
  .header.is-stuck .header__row { min-height: calc(var(--header-h) - 10px); }
  .header.is-stuck .logo__mark { scale: .88; }

  /* Меню на телефоне: раскрывается мягко, пункты встают по одному. */
  @keyframes mv-menu { from { opacity: 0; translate: 0 -8px; } }
  .nav.is-open { animation: mv-menu .22s var(--mv-ease) backwards; }
  .nav.is-open .nav__list > li { animation: mv-menu .28s var(--mv-ease) calc(var(--mv-n, 0) * 28ms + 40ms) backwards; }
  .nav.is-open .nav__list > li:nth-child(2) { --mv-n: 1; }
  .nav.is-open .nav__list > li:nth-child(3) { --mv-n: 2; }
  .nav.is-open .nav__list > li:nth-child(4) { --mv-n: 3; }
  .nav.is-open .nav__list > li:nth-child(5) { --mv-n: 4; }
  .nav.is-open .nav__list > li:nth-child(6) { --mv-n: 5; }
  .nav.is-open .nav__list > li:nth-child(n+7) { --mv-n: 6; }
}

@media print { .mv-r, .ba.mv-r > *, .ba.mv-r .ba__arr { opacity: 1 !important; } }