/*! nss-motion-lane1.css — NSS-1 lane P0: глобальная пауза декоративной анимации.
 *  Работает ТОЛЬКО при html[data-nss-motion="paused"] (ставит nss-motion-lane1.js).
 *  Без JS файл инертен: ни одного правила, скрывающего или меняющего контент.
 *  Пауза затрагивает animation-play-state; transition-duration НЕ обнуляется —
 *  короткие функциональные переходы (hover, focus, FAQ, меню) остаются рабочими.
 *  Одноразовые входные анимации (reveal, ripple, тосты) НЕ замораживаются,
 *  чтобы контент не мог застыть в промежуточном состоянии (ТЗ §8.5).
 *  :not(#_) — искусственный рост специфичности до (1,1,1)/(1,2,1), чтобы
 *  перебивать существующие !important-шортканды вида
 *  .nss-system-visual.nss-scene-running .nss-system-visual__core{animation:…!important}.
 */

/* 1. Пауза всех CSS-анимаций (включая ::before/::after) в состоянии паузы. */
html[data-nss-motion="paused"] *:not(#_),
html[data-nss-motion="paused"] *:not(#_)::before,
html[data-nss-motion="paused"] *:not(#_)::after {
  animation-play-state: paused !important;
}

/* 2. Разрешённый список: короткие одноразовые/функциональные анимации
      остаются running (специфичность выше п.1, ниже по файлу). Это конечные
      анимации входа/отклика (<0.65s, не автодвижение >5s по WCAG 2.2.2),
      а заморозка любой из них раскрыла бы контент в кадре opacity:0.
      Покрытие: anim.js reveal + ripple + тосты/алерты; mp-anim.js reveal;
      hero-вход mainpage (mp-rise); FAQ <details>; квиз; nss-modern-enter;
      fade загруженных картинок; cro-fab pop-in. */
html[data-nss-motion="paused"] .an-js [data-an].an-in:not(#_),
html[data-nss-motion="paused"] .an-ripple__ink:not(#_),
html[data-nss-motion="paused"] img.an-loaded:not(#_),
html[data-nss-motion="paused"] .cro-fab.is-on:not(#_),
html[data-nss-motion="paused"] .an-toast:not(#_),
html[data-nss-motion="paused"] .v-form-note:not(#_),
html[data-nss-motion="paused"] [role="alert"]:not(#_),
html[data-nss-motion="paused"] details[open].mp-faq__item .mp-faq__a:not(#_),
html[data-nss-motion="paused"] details[open][data-an-acc] > *:not(summary):not(#_),
html[data-nss-motion="paused"] .mp .mp-reveal.mp-in:not(#_),
html[data-nss-motion="paused"] .mp .mp-pop.mp-in:not(#_),
html[data-nss-motion="paused"] .mp-hero__copy > *:not(#_),
html[data-nss-motion="paused"] .mp-hero__panel:not(#_),
html[data-nss-motion="paused"] .mp-hero__stats:not(#_),
html[data-nss-motion="paused"] .quiz__step:not(#_),
html[data-nss-motion="paused"] .nss-modern-enter:not(#_) {
  animation-play-state: running !important;
}

/* 3. Кнопка управления «Приостановить/Продолжить анимацию».
      Нижний левый угол; z-index 900 — ниже шапки (1000), десктоп-меню (1001),
      consent-баннера (10000), мобильной панели .pt-nav (11010) и модалок. */
.nss-mbtn-l1 {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border: 1px solid #c9d6ea;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #142842;
  font: 700 13px/1.25 "PT Sans", Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 31, 58, 0.14);
}

.nss-mbtn-l1:hover {
  border-color: #2854c5;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(11, 31, 58, 0.2);
}

.nss-mbtn-l1:focus-visible {
  outline: 3px solid #2854c5;
  outline-offset: 2px;
}

/* 4. Глиф состояния рисуется CSS-ом, без внешних ассетов и без анимации:
      не нажато — знак «пауза» (две полосы), нажато — «плей» (треугольник). */
.nss-mbtn-l1::before {
  content: "";
  flex: none;
  width: 10px;
  height: 12px;
  background: linear-gradient(90deg,
    currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}

.nss-mbtn-l1[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  background: none;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* 5. Мобильный (<1024px): поднимаем кнопку над нижней sticky-CTA плашкой
      .sticky-cta (bottom ~10px, высота ~72px + close-кнопка) — тот же паттерн
      отступа, что .cro-fab (84–88px) и .nsw-btn (96px). Кнопка не порождает
      горизонтальный overflow (max-width + перенос строки). */
@media (max-width: 1023px) {
  .nss-mbtn-l1 {
    left: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
    font-size: 12px;
    padding: 9px 12px;
  }
}

@media (max-width: 359px) {
  .nss-mbtn-l1 { font-size: 11px; gap: 7px; }
}