/* Движение. Только transform и opacity, кривая бренда, всё гасится prefers-reduced-motion.
   Подключается после components.css и переопределяет длительности из base.css. */

:root { --t-nav: 280ms; }                    /* переход между главами: 240–320 мс, без пружин */

.chapter {
  transition: opacity var(--t-nav) var(--ease), transform var(--t-nav) var(--ease), visibility 0s linear var(--t-nav);
}
.chapter.is-current {
  transition: opacity var(--t-nav) var(--ease), transform var(--t-nav) var(--ease), visibility 0s;
}
.screen, .viewer { animation-duration: var(--t-nav); }

/* Просмотрщик: возврат на место после отпускания пальца и двойной тап — плавно; во время жеста — вслед за пальцем */
.viewer__stage > img { touch-action: none; }
.viewer__stage > img.is-anim { transition: transform 260ms var(--ease); }
.viewer { transition: background-color 200ms var(--ease); }

/* Волна подсветки на пузырях первого экрана (доска S0-intro): 6 с, шаг задержки 0,4 с по кругу (--d у каждого пузыря).
   Пузыри сидят на своих местах и не двигаются: меняются только яркость и чуть масштаб. Включает .is-live. */
@keyframes glow {
  0%   { opacity: 0.28; transform: scale(1); }
  6%   { opacity: 1;    transform: scale(1.06); }
  22%  { opacity: 0.28; transform: scale(1); }
  100% { opacity: 0.28; transform: scale(1); }
}
.bubbles.is-live .glow {
  animation: glow 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  animation-delay: var(--d, 0s);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .bubbles.is-live .glow { animation: none; will-change: auto; }
  .glow { opacity: 0.6; }                    /* без движения подсветка просто горит ровно, как на доске */
  .viewer__stage > img.is-anim { transition: none; }
}