/* The seam wipe — sanctioned amendment to the motion doctrine.

   On cross-document navigation, the incoming page is revealed by the 2px
   Arc seam sweeping across the viewport: the fields trading at a boundary,
   performed between pages. Same budget as the flip: 400ms ease-in-out.
   The wipe and the mark's shift-change flip are the site's only motion —
   the shift change itself still snaps polarity while the mark rotates
   (nothing here runs document.startViewTransition, so these pseudo rules
   apply to navigations only).

   Fallbacks are the pre-amendment behavior: browsers without View
   Transitions, file:// opens, and prefers-reduced-motion all get instant
   navigation. */

@view-transition {
  navigation: auto;
}

/* The traveling seam. Rests just offscreen so steady-state pages keep
   exactly one visible seam; promoted to its own transition group so it
   can sweep the viewport. The group also paints its own Arc background,
   so the line renders even if the offscreen element is not snapshotted. */
.vt-seam {
  position: fixed;
  top: 0;
  left: -2px;
  width: var(--seam);
  height: 100vh;
  background: var(--arc);
  z-index: 999;
  pointer-events: none;
  view-transition-name: seam;
}

/* the outgoing page holds still beneath; the incoming page is revealed
   left-to-right, its clip edge riding just behind the seam */
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: vt-reveal-x var(--flip-duration) var(--flip-ease) both;
}
::view-transition-group(seam) {
  background: var(--arc);
  animation: vt-sweep-x var(--flip-duration) var(--flip-ease) both;
}

@keyframes vt-reveal-x {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes vt-sweep-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 4px)); }
}
@keyframes vt-reveal-y {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes vt-sweep-y {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(100vh + 4px)); }
}

/* stacked splits are horizontal, so the wipe turns vertical with them */
@media (max-width: 860px) {
  .vt-seam {
    top: -2px;
    left: 0;
    width: 100vw;
    height: var(--seam);
  }
  ::view-transition-new(root) { animation-name: vt-reveal-y; }
  ::view-transition-group(seam) { animation-name: vt-sweep-y; }
}

/* reduced motion: instant swap, exactly as production behaves */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}