/* Wave 6: the move between pages.

   Turbo renders each Drive visit inside a view transition (the
   view-transition meta in the layout), and the browser does the same for a
   full navigation (the rule below). The old page fades out on the short
   exit, the new one settles in on the house curve, 220ms, a 4px rise. The
   back button runs the same move the other way, told by the direction the
   visit hook writes on the root. Rows that carry a view-transition-name
   (the avatar and the name on a roster row, added by the other half of
   this wave) fly on the same clock. */

::view-transition-group(*) {
  animation-duration: 220ms;
  animation-timing-function: var(--ease-out);
}

::view-transition-old(root) {
  animation: var(--dur-exit, 100ms) var(--ease-in) both wave6-page-out;
}

::view-transition-new(root) {
  animation: 220ms var(--ease-out) both wave6-page-in;
}

html[data-visit-direction="back"] ::view-transition-new(root) {
  animation-name: wave6-page-back;
}

@keyframes wave6-page-out {
  to { opacity: 0; }
}

@keyframes wave6-page-in {
  from { opacity: 0; transform: translateY(4px); }
}

@keyframes wave6-page-back {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Reduced motion: the pages still swap inside a transition so nothing
   flashes, but nothing moves and nothing fades over time. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0s;
  }
}