/* Cross document view transitions between steps. Progressive enhancement,
   every step works as a plain link with no transition on browsers that do
   not support this yet. Direction comes from a class set by js/phase-nav.js
   before it navigates, read back on the next page before first paint.
   Horizontal, navigation is left to right, see phase-nav.js. */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--transition-duration);
    animation-timing-function: var(--transition-easing);
  }

  ::view-transition-new(root) {
    animation-name: yfs-slide-in-right;
  }

  ::view-transition-old(root) {
    animation-name: yfs-slide-out-left;
  }

  html.dir-back::view-transition-new(root) {
    animation-name: yfs-slide-in-left;
  }

  html.dir-back::view-transition-old(root) {
    animation-name: yfs-slide-out-right;
  }

  @keyframes yfs-slide-in-right {
    from { transform: translateX(64px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  @keyframes yfs-slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-64px); opacity: 0; }
  }

  @keyframes yfs-slide-in-left {
    from { transform: translateX(-64px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  @keyframes yfs-slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(64px); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}