/* A route is prepared first, then its content replaces the previous frame. */
html[data-route-transition] #app > main { view-transition-name: route-content; }
html[data-route-transition] #app > .header { view-transition-name: route-header; }
#app.route-motion-ready .reveal { animation: none; }

::view-transition { pointer-events: none; }
::view-transition-group(root),
::view-transition-group(route-content),
::view-transition-group(route-header) { animation-duration: 380ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
/* The home page is much taller than products: never morph their heights. */
::view-transition-group(route-content) { animation: none; }
::view-transition-old(root) { animation: route-fade-out 180ms ease-out both; }
::view-transition-new(root) { animation: route-fade-in 260ms ease-out both; }
::view-transition-old(route-content) { animation: route-content-out 180ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(route-content) { animation: route-content-in 420ms cubic-bezier(.22, 1, .36, 1) both; }
::view-transition-old(route-header) { animation: route-fade-out 130ms ease-out both; }
::view-transition-new(route-header) { animation: route-fade-in 200ms ease-out both; }

@keyframes route-fade-out { to { opacity: 0; } }
@keyframes route-fade-in { from { opacity: 0; } }
@keyframes route-content-out { to { opacity: 0; transform: translateY(calc(var(--route-offset, 1) * -8px)); } }
@keyframes route-content-in { from { opacity: 0; transform: translateY(calc(var(--route-offset, 1) * 18px)); } }

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