/*
 * Переходы между страницами (View Transitions, межстраничные).
 * Открытие кейса: обложка из списка раскрывается в центр страницы кейса, фон перетекает в цвет кейса.
 * Закрытие — в обратном порядке. В браузерах без поддержки переход просто мгновенный.
 */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.7s;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.7s;
  animation-timing-function: ease;
}

/* Обложка — общий элемент двух страниц */
::view-transition-group(case-cover) {
  animation-duration: 0.85s;
  animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
  overflow: clip;
}
::view-transition-image-pair(case-cover) {
  isolation: auto;
}
::view-transition-old(case-cover),
::view-transition-new(case-cover) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

/* Кнопка закрытия кейса: при закрытии уезжает вниз за край экрана, при открытии появляется сама (case.css) */
::view-transition-old(case-close) {
  animation: case-close-out 0.45s cubic-bezier(0.5, 0, 0.8, 0.4) both;
}
::view-transition-new(case-close) {
  animation: none;
  opacity: 0;
}
@keyframes case-close-out {
  to { transform: translateY(110px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01s;
  }
}