/*
  24-motion.css — v41.52 View Transitions.

  Only the screen area animates. The root group is switched off deliberately:
  left on, every modal, toast, sticky header and the bottom nav would cross-fade
  along with the page, which reads as the whole app blinking.
*/

/* The name is only assigned when motion is wanted. With reduced motion the
   screen has no transition name, so there is nothing for the API to animate
   even if it were somehow invoked. */
@media (prefers-reduced-motion: no-preference) {
  .screen.active { view-transition-name: eternal-screen; }
  .topbar { view-transition-name: eternal-topbar; }
  .bottom-nav { view-transition-name: eternal-nav; }
}

/* Chrome cross-fades the root by default. Off. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* The chrome holds still while the content moves under it. */
::view-transition-old(eternal-topbar),
::view-transition-new(eternal-topbar),
::view-transition-old(eternal-nav),
::view-transition-new(eternal-nav) { animation: none; mix-blend-mode: normal; }

/* Short. A navigation that takes a quarter of a second to arrive feels slower
   than one that snaps, however pretty it is. */
::view-transition-old(eternal-screen) {
  animation: 120ms cubic-bezier(.4, 0, 1, 1) both eternal-screen-out;
}
::view-transition-new(eternal-screen) {
  animation: 170ms cubic-bezier(0, 0, .2, 1) both eternal-screen-in;
}

@keyframes eternal-screen-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}
@keyframes eternal-screen-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Belt and braces: if a future change assigns the name outside the media
   query above, this still stops the animation dead. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none; }
}