/* Каркас домашних тестов (docs/design/SELFTESTS.md): общие анимированные компоненты инструкции —
   подключается ТОЛЬКО на страницах тестов-плагинов (не на 5 прежних тестах — их страницы байт-в-байт).
   Цвета — только var(--…), без #hex и rgb() (stylelint проекта). */
@layer pages {
  /* «шаги» — компактный список иконка+подпись (loader.steps_html) */
  .anim-steps { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin: 14px 0; padding: 0 }
  .anim-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; text-align: center }
  .anim-step-ic {
    width: 48px; height: 48px; border-radius: 50%; background: var(--iris-soft); color: var(--iris-ink);
    display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box;
    animation: anim-step-pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s);
  }
  .anim-step-ic svg { width: 100%; height: 100% }
  .anim-step-cap { font-size: 12.5px; color: var(--ink-2) }
  @keyframes anim-step-pulse {
    0%, 100% { transform: scale(1); box-shadow: var(--shadow-inner-highlight) }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px var(--iris-soft) }
  }

  /* «сцены» — крупные анимированные иллюстрации (loader.scene_html): по ширине колонки текста на
     десктопе (макс. 280px), во всю ширину на телефоне; картинки идут рядами, оборачиваются сами. */
  .scenes { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 }
  .scene { flex: 1 1 260px; max-width: 280px; margin: 0; display: flex; flex-direction: column; gap: 8px }
  .scene-svg { width: 100%; height: auto; display: block; color: var(--ink); background: var(--paper);
               border: 1px solid var(--line); border-radius: 14px; box-sizing: border-box }
  .scene figcaption { font-size: 13px; color: var(--ink-2); text-align: center }
  @media (max-width: 640px) { .scene { flex-basis: 100%; max-width: none } }

  /* статичный кадр без анимации — системная настройка «меньше анимации» (шаги и сцены разом).
     !important обязателен: anim-шаги/сцены (illus/*.svg) объявляют свою @keyframes-анимацию в
     собственном <style> ВНУТРИ svg, который в документе идёт позже этого файла — при равной
     специфичности без !important победил бы порядок в документе, не reduced-motion. */
  @media (prefers-reduced-motion: reduce) {
    .anim-step-ic, .scene-svg * { animation: none !important } /* stylelint-disable-line declaration-no-important -- см. комментарий выше */
  }
}
/* статичный кадр — тема «для слабовидящих» (вне @layer — сильнее по порядку, как остальные правила
   темы в engine/pagekit/tokens.py; тот же !important-паттерн, что и там). */
:root[data-theme="low-vision"] .anim-step-ic,
:root[data-theme="low-vision"] .scene-svg * { animation: none !important } /* stylelint-disable-line declaration-no-important -- как в engine/pagekit/tokens.py: должно перебить анимацию, заданную внутри самого SVG (illus/*.svg) */

/* Мушки и вспышки — своя разметка сверх общих .stest/.vrow/.btn/.callout (static/style.css).
   Цвета — только var(--…) (stylelint проекта). */
@layer pages {
  .floaters-ans { flex-wrap: wrap }
  .floaters-ans [data-ans][aria-pressed="true"] { background: var(--iris); color: var(--btn-ink); border-color: var(--iris) }

  /* полноэкранное светлое поле для наблюдения за мушками — поверх всей страницы */
  .floaters-field {
    position: fixed; inset: 0; z-index: 90; background: var(--paper);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 14px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    touch-action: none;
  }
  .floaters-field-inner { position: absolute; inset: 0 }
  .floaters-field-hint { margin: 0; font-size: 14px; color: var(--ink-2); text-align: center; background: var(--paper); padding: 4px 10px; border-radius: 10px }

  /* одна мушка: внешний слой — параллакс от JS (--px/--py теста), внутренний — своё медленное дрожание */
  .floater {
    position: absolute; left: var(--fx0, 50%); top: var(--fy0, 50%);
    transform: translate(calc(var(--px, 0) * var(--depth, .2) * 60px), calc(var(--py, 0) * var(--depth, .2) * 60px));
  }
  .floater i {
    display: block; width: 7px; height: 16px; border-radius: 50%; background: var(--ink); opacity: .45;
    animation: floater-wobble 6s ease-in-out infinite;
  }
  .floater:nth-child(2) i { animation-delay: -1.5s; width: 5px; height: 10px }
  .floater:nth-child(3) i { animation-delay: -3s; width: 9px; height: 20px; opacity: .35 }
  .floater:nth-child(4) i { animation-delay: -4.2s; width: 4px; height: 8px }
  @keyframes floater-wobble {
    0%, 100% { transform: translate(0, 0) rotate(0deg) }
    50% { transform: translate(6px, 10px) rotate(8deg) }
  }
  @media (prefers-reduced-motion: reduce) {
    .floater i { animation: none !important } /* stylelint-disable-line declaration-no-important -- см. _shared/anim.css: тот же паттерн против @keyframes внутри */
  }
}
:root[data-theme="low-vision"] .floater i { animation: none !important } /* stylelint-disable-line declaration-no-important -- как в _shared/anim.css */