/* ══════════════════════════════════════════════════════
   Cross-document View Transitions
   Включает: общий cross-fade + hero-morph карточек
   Требует: view-transition-name на фото карточки (JS)
            и на hero-блоке детальной страницы (JS)
══════════════════════════════════════════════════════ */

@view-transition {
  navigation: auto;
}

/* Root cross-fade — короче, чтобы hero-morph был в центре внимания */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease;
}

/* Все именованные группы (hero-изображения) — плавный morph */
::view-transition-group(*) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Изображение-источник (старая страница) плавно меркнет */
::view-transition-old(*):not(::view-transition-old(root)) {
  animation-name: vt-fade-out;
}

/* Изображение-цель (новая страница) появляется */
::view-transition-new(*):not(::view-transition-new(root)) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-group(*) {
    animation-duration: 0.01ms !important;
  }
}