/* Движение. Анимируем только transform и opacity (у маленьких SVG ещё stroke-dashoffset).
   Уровни задаёт атрибут html[data-motion]: full | soft | off (см. motion.js). */

/* ---------- фон: медленное «дыхание» слоёв ---------- */
@keyframes drift-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(-12vmax, -9vmax, 0) scale(1.08); } }
html[data-motion="full"] .blob-a { animation: drift-a 70s ease-in-out infinite alternate; }
html[data-motion="full"] .blob-b { animation: drift-b 90s ease-in-out infinite alternate; }

/* ---------- появление элементов ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes cell-in { from { opacity: 0; transform: scale(.6); } }
.rise { animation: rise 220ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.wave { animation: cell-in var(--dur-med) var(--ease-out) both; animation-delay: calc(var(--w, 0) * 1ms); }

/* ---------- переходы между экранами (View Transitions API) ---------- */
/* Именуем только сам экран: отдельные снимки фона и панели навигации заметно роняют FPS на слабых устройствах. */
main { view-transition-name: screen; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(screen) { animation: vt-out 140ms var(--ease-out) both; }
::view-transition-new(screen) { animation: vt-in 240ms var(--ease-out) both; }

/* ---------- скрытая вкладка: анимации на паузе ---------- */
html[data-paused] *, html[data-paused] *::before, html[data-paused] *::after { animation-play-state: paused !important; }

/* ---------- мягкий режим: без фонового движения и частиц (частицы не создаются в JS) ---------- */
html[data-motion="soft"] .blob-a, html[data-motion="soft"] .blob-b { animation: none; }

/* ---------- без движения: только короткие плавные смены состояния ---------- */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important;
  transition-duration: 80ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* То же на уровне CSS на случай, если JS ещё не успел выставить атрибут. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 80ms !important; transition-delay: 0s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}