/* Каскадное появление — сайт. Тот же приём и тот же ритм, что в Telegram-магазине
   (static/region-reveal.css): блоки и карточки проявляются мягкой волной сверху вниз,
   вместо того чтобы выскакивать рывком по мере загрузки данных.

   Здесь это ЧИСТЫЙ CSS без единой строки JS: браузер запускает анимацию в момент, когда
   элемент появляется в разметке. Полки сайта наполняются по мере прокрутки, карточка
   товара — после догрузки деталей, поэтому каждая часть заходит своей волной именно
   тогда, когда её нарисовали. Размечать что-либо в html и js не нужно. */
@keyframes timRevealUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Заголовок полки и карточки в ленте. Ритм чуть быстрее, чем у блоков: карточек много,
   и длинная волна читалась бы как торможение. */
.shelf__head,
.shelf__row > *,
.section-grid > *,
.detail > * {
  animation: timRevealUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.shelf__row > *:nth-child(1),
.section-grid > *:nth-child(1) { animation-delay: 0.03s; }
.shelf__row > *:nth-child(2),
.section-grid > *:nth-child(2) { animation-delay: 0.06s; }
.shelf__row > *:nth-child(3),
.section-grid > *:nth-child(3) { animation-delay: 0.09s; }
.shelf__row > *:nth-child(4),
.section-grid > *:nth-child(4) { animation-delay: 0.12s; }
.shelf__row > *:nth-child(5),
.section-grid > *:nth-child(5) { animation-delay: 0.15s; }
.shelf__row > *:nth-child(6),
.section-grid > *:nth-child(6) { animation-delay: 0.18s; }
/* Дальше карточки уже за краем экрана — нарастающая задержка им не нужна. */
.shelf__row > *:nth-child(n+7),
.section-grid > *:nth-child(n+7) { animation-delay: 0.2s; }

/* Карточка товара: обложка, цена, издания, состав, скриншоты — той же волной, что полки
   (в Telegram так же). Издания и скриншоты приезжают отдельным запросом и без этого
   «выпрыгивали» на готовой странице. */
.detail > *:nth-child(1) { animation-delay: 0s; }
.detail > *:nth-child(2) { animation-delay: 0.045s; }
.detail > *:nth-child(3) { animation-delay: 0.09s; }
.detail > *:nth-child(4) { animation-delay: 0.135s; }
.detail > *:nth-child(5) { animation-delay: 0.18s; }
.detail > *:nth-child(n+6) { animation-delay: 0.22s; }

/* Системная настройка «уменьшить движение» — уважаем (доступность). */
@media (prefers-reduced-motion: reduce) {
  .shelf__head,
  .shelf__row > *,
  .section-grid > *,
  .detail > * { animation: none; }
}