/* Движение · Sasha B.B.B
 *
 * Только CSS. Ни строки JS — сознательно.
 *
 * 1. ПЕРЕХОД МЕЖДУ СТРАНИЦАМИ. Обычная навигация даёт белую вспышку: браузер
 *    выбрасывает старую страницу и рисует новую. View Transitions заставляет
 *    его перетечь. Таблетке дано имя, поэтому браузер понимает, что это тот же
 *    элемент, и она остаётся на месте, пока содержимое сменяется под ней.
 *
 * 2. ПОЯВЛЕНИЕ ПРИ ЗАГРУЗКЕ, лесенкой. Первые блоки всплывают друг за другом.
 *
 * Почему по времени, а не по прокрутке. Сначала было появление секций при
 * прокрутке — сперва на animation-timeline: view(), потом на
 * IntersectionObserver. Оба варианта прячут блок и ждут события, чтобы
 * показать. Если событие не приходит, текст остаётся невидимым навсегда,
 * и 30.08 я не смог доказать обратное: панель браузера была скрыта, снимки
 * приходили пустыми, а getComputedStyle через мост отдавал значения со
 * сдвигом на один замер. Непроверяемое не ставится.
 *
 * Анимация по времени завершается сама, что бы ни случилось. Ждать нечего,
 * ломаться нечему.
 */

@view-transition { navigation: auto; }

.pill { view-transition-name: sb-pill; }

::view-transition-old(root) { animation: sb-vt-out 160ms cubic-bezier(.4,0,1,1) both }
::view-transition-new(root) { animation: sb-vt-in 300ms cubic-bezier(.22,.61,.36,1) both }
@keyframes sb-vt-out { to { opacity: 0 } }
@keyframes sb-vt-in  { from { opacity: 0; transform: translateY(8px) } }

/* Лесенка на первых шести блоках. Дальше не нужно: остальное человек
   всё равно увидит после прокрутки, а анимировать всю страницу — дёшево. */
.page > :nth-child(-n+6) {
  animation: sb-rise 560ms cubic-bezier(.22,.61,.36,1) both;
}
.page > :nth-child(1) { animation-delay: 0ms }
.page > :nth-child(2) { animation-delay: 60ms }
.page > :nth-child(3) { animation-delay: 120ms }
.page > :nth-child(4) { animation-delay: 180ms }
.page > :nth-child(5) { animation-delay: 240ms }
.page > :nth-child(6) { animation-delay: 300ms }

@keyframes sb-rise {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .page > :nth-child(-n+6) { animation: none }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none }
}