/* Same soft deceleration as the hero, without replaying its greeting. */
@view-transition { navigation: auto; }
:root { --page-distance:10px; --page-arrival:480ms; --page-ease:cubic-bezier(.16,1,.3,1); }
::view-transition-old(root) { animation:page-dissolve 240ms ease-out both; mix-blend-mode:normal; }
::view-transition-new(root) { animation:page-appear var(--page-arrival) var(--page-ease) both; mix-blend-mode:normal; }
::view-transition-group(root) { animation-duration:var(--page-arrival); }
@keyframes page-dissolve { to { opacity:0; } }
@keyframes page-appear { from { opacity:0; transform:translateY(var(--page-distance)); } to { opacity:1; transform:none; } }

/* Fallback for browsers without cross-document View Transitions. */
.page-leaving body { opacity:.16; transition:opacity 170ms ease-out; }
.page-leaving .navigation-sheet { opacity:.16; transition:opacity 170ms ease-out; }
.page-leaving .navigation-sheet::backdrop { opacity:0; transition:opacity 170ms ease-out; }
.page-arriving body { animation:page-fallback-appear var(--page-arrival) var(--page-ease) both; }
.page-arriving main { animation:page-fallback-rise var(--page-arrival) var(--page-ease) both; }
@keyframes page-fallback-appear { from { opacity:.16; } to { opacity:1; } }
@keyframes page-fallback-rise { from { transform:translateY(var(--page-distance)); } to { transform:none; } }
@media(max-width:760px) { :root { --page-distance:6px; --page-arrival:420ms; } }
@media(prefers-reduced-motion:reduce) {
 @view-transition { navigation:none; }
 ::view-transition-old(root),::view-transition-new(root),::view-transition-group(root) { animation:none; }
 .page-arriving body,.page-arriving main { animation:none; }
 .page-leaving body,.page-leaving .navigation-sheet,.page-leaving .navigation-sheet::backdrop { opacity:1; transition:none; }
}