/* Направленные межстраничные view-transitions: «смахивание» за шевроном.
   Направление задаётся html[data-vt] на принимающей странице
   (scripts/track-transitions.js), без него — дефолтный мягкий кроссфейд. */

@view-transition {
  navigation: auto;
}

html[data-vt='right']::view-transition-old(root) {
  animation: vt-sweep-out-right 560ms cubic-bezier(0.45, 0, 0.55, 1) both;
}

html[data-vt='right']::view-transition-new(root) {
  animation: vt-sweep-in-left 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

html[data-vt='left']::view-transition-old(root) {
  animation: vt-sweep-out-left 560ms cubic-bezier(0.45, 0, 0.55, 1) both;
}

html[data-vt='left']::view-transition-new(root) {
  animation: vt-sweep-in-right 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes vt-sweep-out-right {
  to {
    transform: translateX(52vw);
    opacity: 0;
  }
}

@keyframes vt-sweep-in-left {
  from {
    transform: translateX(-52vw);
    opacity: 0;
  }
}

@keyframes vt-sweep-out-left {
  to {
    transform: translateX(-52vw);
    opacity: 0;
  }
}

@keyframes vt-sweep-in-right {
  from {
    transform: translateX(52vw);
    opacity: 0;
  }
}

/* Именованные элементы (заголовок, hero, карточка лидера) морфятся
   между страницами отдельными слоями — чуть дольше и мягче полотна */
::view-transition-group(track-title),
::view-transition-group(track-hero),
::view-transition-group(track-leader) {
  animation-duration: 640ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}