/*
 * Keynote-style page transitions using the Cross-Document View Transitions
 * API. Activates on same-origin link clicks. Browsers that don't support it
 * just nav instantly — zero downside.
 *
 * The wipe: new page slides in from the right, old page slides out to the
 * left, with a subtle 80ms fade so the seam isn't jarring. ~420ms total.
 */
@view-transition {
  navigation: auto;
}

/* The default ::view-transition-old/new pair already does a cross-fade.
   These keyframes layer a horizontal slide on top so it reads as a wipe. */
@keyframes wc-slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-6%); opacity: 0; }
}
@keyframes wc-slide-in-right {
  from { transform: translateX(6%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

::view-transition-old(root) {
  animation: 360ms cubic-bezier(.4,0,.2,1) both wc-slide-out-left;
}
::view-transition-new(root) {
  animation: 420ms cubic-bezier(.4,0,.2,1) both wc-slide-in-right;
}

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: 120ms ease both;
    animation-name: none;
  }
}