/* ============================================================
   ДВИЖЕНИЕ ПРИ ПРОКРУТКЕ — 26.08.2026
   Заказано владельцем: блоки появляются, переход по ссылкам
   плавный, вся страница едет с лёгкой инерцией, первый экран
   уезжает медленнее содержимого.

   Всё ниже включается двумя условиями сразу:
   1) на странице стоит класс psg-anim — его ставит короткая
      строчка в шапке страницы и снимает, если motion.js за две
      с половиной секунды не отозвался. Скрипта нет — сайт
      выглядит как раньше, ничего не спрятано;
   2) система не просит уменьшить анимации.

   ВАЖНО про порядок правил. Список «показать» повторяет форму
   списка «спрятать» и добавляет к каждому адресу пометку
   «показан». Короткое правило вида «.psg-anim main .is-in»
   здесь не годится: оно легче длинного правила со списком
   исключений и проигрывает ему — блок получает пометку, но
   остаётся невидимым. Так и было сломано 26.08 на 34 страницах.
   ============================================================ */

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

  /* ---------- 1. Появление блоков ----------
     Список закрытый и лежит в стилях, а не собирается скриптом:
     иначе блок успевает нарисоваться и только потом спрятаться —
     видно моргание.

     Ловим по устройству страницы, а не по именам: всё, что лежит
     прямо в разделе, и всё, что лежит в сетке. Сами сетки при этом
     исключены — иначе пряталось бы дважды, и сетка, и её начинка.
     Список имён в конце — для разметки без общей обёртки.

     Подсказки браузеру «готовься двигать» здесь намеренно нет:
     на сотне блоков разом она занимает память, а выигрыша не даёт —
     слой поднимается и так, на время перехода. */
  .psg-anim main section:not(.hero):not(.hero-direction) > .container > *:not(.cases-grid):not(.services-grid):not(.team-grid):not(.cta-grid):not(.about-grid):not(.contact-grid):not(.pains-grid):not(.postlude-grid):not(.tz-grid2):not(.g-3):not(.pf-gallery):not(.works-showcase):not(.ws-grid),
  .psg-anim main .cases-grid > *,
  .psg-anim main .services-grid > *,
  .psg-anim main .team-grid > *,
  .psg-anim main .cta-grid > *,
  .psg-anim main .about-grid > *,
  .psg-anim main .contact-grid > *,
  .psg-anim main .pains-grid > *,
  .psg-anim main .postlude-grid > *,
  .psg-anim main .tz-grid2 > *,
  .psg-anim main .g-3 > *,
  .psg-anim main .pf-gallery > *,
  .psg-anim main .works-showcase > *,
  .psg-anim main .ws-grid > *,
  .psg-anim main .section-head,
  .psg-anim main .service,
  .psg-anim main .person,
  .psg-anim main .case,
  .psg-anim main .stat,
  .psg-anim main .metric,
  .psg-anim main .process-step,
  .psg-anim main .cta-card,
  .psg-anim main .logo-cell,
  .psg-anim main .opt,
  .psg-anim main .tz-section,
  .psg-anim main .dir-row,
  .psg-anim main .contact-card {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .62s cubic-bezier(.22,.61,.36,1),
                transform .62s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--i, 0) * 65ms);
  }
  /* Пришёл в поле зрения — встал на место и больше не прячется */
  .psg-anim main section:not(.hero):not(.hero-direction) > .container > *.is-in:not(.cases-grid):not(.services-grid):not(.team-grid):not(.cta-grid):not(.about-grid):not(.contact-grid):not(.pains-grid):not(.postlude-grid):not(.tz-grid2):not(.g-3):not(.pf-gallery):not(.works-showcase):not(.ws-grid),
  .psg-anim main .cases-grid > *.is-in,
  .psg-anim main .services-grid > *.is-in,
  .psg-anim main .team-grid > *.is-in,
  .psg-anim main .cta-grid > *.is-in,
  .psg-anim main .about-grid > *.is-in,
  .psg-anim main .contact-grid > *.is-in,
  .psg-anim main .pains-grid > *.is-in,
  .psg-anim main .postlude-grid > *.is-in,
  .psg-anim main .tz-grid2 > *.is-in,
  .psg-anim main .g-3 > *.is-in,
  .psg-anim main .pf-gallery > *.is-in,
  .psg-anim main .works-showcase > *.is-in,
  .psg-anim main .ws-grid > *.is-in,
  .psg-anim main .section-head.is-in,
  .psg-anim main .service.is-in,
  .psg-anim main .person.is-in,
  .psg-anim main .case.is-in,
  .psg-anim main .stat.is-in,
  .psg-anim main .metric.is-in,
  .psg-anim main .process-step.is-in,
  .psg-anim main .cta-card.is-in,
  .psg-anim main .logo-cell.is-in,
  .psg-anim main .opt.is-in,
  .psg-anim main .tz-section.is-in,
  .psg-anim main .dir-row.is-in,
  .psg-anim main .contact-card.is-in {
    opacity: 1;
    transform: none;
  }

  /* Подъём под мышкой карточкам возвращается отдельно: их правило
     подъёма легче правила появления и проигрывало ему. Услуги
     в разделе «о компании» подъёма не имеют — так задумано. */
  .psg-anim main .service:hover.is-in,
  .psg-anim main .service:focus-within.is-in,
  .psg-anim main .case:hover.is-in,
  .psg-anim main .case:focus-within.is-in,
  .psg-anim main .cta-card:hover.is-in,
  .psg-anim main .cta-card:focus-within.is-in,
  .psg-anim main .contact-card:hover.is-in,
  .psg-anim main .contact-card:focus-within.is-in,
  .psg-anim main .opt:hover.is-in,
  .psg-anim main .opt:focus-within.is-in {
    transform: translateY(-3px);
  }
  .psg-anim main .about .service:hover.is-in,
  .psg-anim main .about .service:focus-within.is-in {
    transform: none;
  }
  .psg-anim main .opt.is-in { transition: opacity .62s cubic-bezier(.22,.61,.36,1),
                                          transform .62s cubic-bezier(.22,.61,.36,1),
                                          background-color .25s ease,
                                          border-color .25s ease; }

  /* ---------- 2. Первый экран уезжает медленнее ----------
     Двигаются не сами ячейки мозаики, а картинки внутри них:
     ячейка обрезает всё лишнее, поэтому съехать на соседний
     раздел или оставить дыру физически нечем. Запас на сдвиг
     даёт увеличение на 14 процентов — сдвиг не больше 6. */
  .psg-anim .grid .cell .frame img {
    transform: translate3d(0, calc(var(--psg-p, 0) * 6%), 0) scale(1.14);
  }
}

/* Система просит уменьшить анимации — не двигается ничего,
   даже если класс на странице стоит. */
@media (prefers-reduced-motion: reduce) {
  .psg-anim main section:not(.hero):not(.hero-direction) > .container > *:not(.cases-grid):not(.services-grid):not(.team-grid):not(.cta-grid):not(.about-grid):not(.contact-grid):not(.pains-grid):not(.postlude-grid):not(.tz-grid2):not(.g-3):not(.pf-gallery):not(.works-showcase):not(.ws-grid),
  .psg-anim main .cases-grid > *,
  .psg-anim main .services-grid > *,
  .psg-anim main .team-grid > *,
  .psg-anim main .cta-grid > *,
  .psg-anim main .about-grid > *,
  .psg-anim main .contact-grid > *,
  .psg-anim main .pains-grid > *,
  .psg-anim main .postlude-grid > *,
  .psg-anim main .tz-grid2 > *,
  .psg-anim main .g-3 > *,
  .psg-anim main .pf-gallery > *,
  .psg-anim main .works-showcase > *,
  .psg-anim main .ws-grid > *,
  .psg-anim main .section-head,
  .psg-anim main .service,
  .psg-anim main .person,
  .psg-anim main .case,
  .psg-anim main .stat,
  .psg-anim main .metric,
  .psg-anim main .process-step,
  .psg-anim main .cta-card,
  .psg-anim main .logo-cell,
  .psg-anim main .opt,
  .psg-anim main .tz-section,
  .psg-anim main .dir-row,
  .psg-anim main .contact-card,
  .psg-anim main section:not(.hero):not(.hero-direction) > .container > *.is-in:not(.cases-grid):not(.services-grid):not(.team-grid):not(.cta-grid):not(.about-grid):not(.contact-grid):not(.pains-grid):not(.postlude-grid):not(.tz-grid2):not(.g-3):not(.pf-gallery):not(.works-showcase):not(.ws-grid),
  .psg-anim main .cases-grid > *.is-in,
  .psg-anim main .services-grid > *.is-in,
  .psg-anim main .team-grid > *.is-in,
  .psg-anim main .cta-grid > *.is-in,
  .psg-anim main .about-grid > *.is-in,
  .psg-anim main .contact-grid > *.is-in,
  .psg-anim main .pains-grid > *.is-in,
  .psg-anim main .postlude-grid > *.is-in,
  .psg-anim main .tz-grid2 > *.is-in,
  .psg-anim main .g-3 > *.is-in,
  .psg-anim main .pf-gallery > *.is-in,
  .psg-anim main .works-showcase > *.is-in,
  .psg-anim main .ws-grid > *.is-in,
  .psg-anim main .section-head.is-in,
  .psg-anim main .service.is-in,
  .psg-anim main .person.is-in,
  .psg-anim main .case.is-in,
  .psg-anim main .stat.is-in,
  .psg-anim main .metric.is-in,
  .psg-anim main .process-step.is-in,
  .psg-anim main .cta-card.is-in,
  .psg-anim main .logo-cell.is-in,
  .psg-anim main .opt.is-in,
  .psg-anim main .tz-section.is-in,
  .psg-anim main .dir-row.is-in,
  .psg-anim main .contact-card.is-in {
    opacity: 1; transform: none; transition: none;
  }
}

/* На печать всё должно попасть целиком: лист не прокручивают,
   значит блок, который ждёт своей очереди, ушёл бы в пустоту. */
@media print {
  .psg-anim main section:not(.hero):not(.hero-direction) > .container > *:not(.cases-grid):not(.services-grid):not(.team-grid):not(.cta-grid):not(.about-grid):not(.contact-grid):not(.pains-grid):not(.postlude-grid):not(.tz-grid2):not(.g-3):not(.pf-gallery):not(.works-showcase):not(.ws-grid),
  .psg-anim main .cases-grid > *,
  .psg-anim main .services-grid > *,
  .psg-anim main .team-grid > *,
  .psg-anim main .cta-grid > *,
  .psg-anim main .about-grid > *,
  .psg-anim main .contact-grid > *,
  .psg-anim main .pains-grid > *,
  .psg-anim main .postlude-grid > *,
  .psg-anim main .tz-grid2 > *,
  .psg-anim main .g-3 > *,
  .psg-anim main .pf-gallery > *,
  .psg-anim main .works-showcase > *,
  .psg-anim main .ws-grid > *,
  .psg-anim main .section-head,
  .psg-anim main .service,
  .psg-anim main .person,
  .psg-anim main .case,
  .psg-anim main .stat,
  .psg-anim main .metric,
  .psg-anim main .process-step,
  .psg-anim main .cta-card,
  .psg-anim main .logo-cell,
  .psg-anim main .opt,
  .psg-anim main .tz-section,
  .psg-anim main .dir-row,
  .psg-anim main .contact-card,
  .psg-anim main section:not(.hero):not(.hero-direction) > .container > *.is-in:not(.cases-grid):not(.services-grid):not(.team-grid):not(.cta-grid):not(.about-grid):not(.contact-grid):not(.pains-grid):not(.postlude-grid):not(.tz-grid2):not(.g-3):not(.pf-gallery):not(.works-showcase):not(.ws-grid),
  .psg-anim main .cases-grid > *.is-in,
  .psg-anim main .services-grid > *.is-in,
  .psg-anim main .team-grid > *.is-in,
  .psg-anim main .cta-grid > *.is-in,
  .psg-anim main .about-grid > *.is-in,
  .psg-anim main .contact-grid > *.is-in,
  .psg-anim main .pains-grid > *.is-in,
  .psg-anim main .postlude-grid > *.is-in,
  .psg-anim main .tz-grid2 > *.is-in,
  .psg-anim main .g-3 > *.is-in,
  .psg-anim main .pf-gallery > *.is-in,
  .psg-anim main .works-showcase > *.is-in,
  .psg-anim main .ws-grid > *.is-in,
  .psg-anim main .section-head.is-in,
  .psg-anim main .service.is-in,
  .psg-anim main .person.is-in,
  .psg-anim main .case.is-in,
  .psg-anim main .stat.is-in,
  .psg-anim main .metric.is-in,
  .psg-anim main .process-step.is-in,
  .psg-anim main .cta-card.is-in,
  .psg-anim main .logo-cell.is-in,
  .psg-anim main .opt.is-in,
  .psg-anim main .tz-section.is-in,
  .psg-anim main .dir-row.is-in,
  .psg-anim main .contact-card.is-in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}