/**
 * Cross-document View Transitions.
 * Вертикальный wipe сверху вниз; цвет шторки = hero целевой страницы
 * (без sepia/«желтизны»).
 *
 * Типы to-orange|to-dark|to-gray|to-light выставляет page-transitions.js
 * на pageswap (куда едем) и pagereveal (куда приехали).
 */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

:root {
  --vt-wash: #ffffff;
}

html[data-vt='orange'] {
  --vt-wash: #ff5001;
}
html[data-vt='dark'] {
  --vt-wash: #121212;
}
html[data-vt='gray'] {
  --vt-wash: #f7f7f8;
}
html[data-vt='light'] {
  --vt-wash: #ffffff;
}

/* На уходе старой страницы — цвет УЖЕ целевой (types с pageswap). */
html:active-view-transition-type(to-orange) {
  --vt-wash: #ff5001;
}
html:active-view-transition-type(to-dark) {
  --vt-wash: #121212;
}
html:active-view-transition-type(to-gray) {
  --vt-wash: #f7f7f8;
}
html:active-view-transition-type(to-light) {
  --vt-wash: #ffffff;
}

::view-transition-group(root) {
  background: var(--vt-wash);
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  object-fit: cover;
  overflow: clip;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Старая уезжает вниз */
::view-transition-old(root) {
  animation-name: vt-out-down;
}

/* Новая приезжает сверху */
::view-transition-new(root) {
  animation-name: vt-in-down;
}

@keyframes vt-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(32%);
  }
}

@keyframes vt-in-down {
  0% {
    opacity: 0;
    transform: translateY(-32%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}