/* Soft page changes (transitionRender in app.js). The page content cross-fades with a small
   lift; the header, bottom toolbar and its bubbles are named so they hold still on top. */
.site-header { view-transition-name:site-header; }
.x-dock { view-transition-name:x-dock; }
.dock-bubbles { view-transition-name:dock-bubbles; }
/* Normal blending: the new page fades in over the held old one, so there is no dark dip. */
::view-transition-old(root),::view-transition-new(root) { mix-blend-mode:normal; }
::view-transition-old(root) { animation:page-out .36s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation:page-in .36s cubic-bezier(.2,.8,.2,1) both; }
::view-transition-group(site-header),::view-transition-group(x-dock) { animation-duration:.3s; z-index:2; }
::view-transition-group(dock-bubbles) { z-index:3; }
::view-transition-old(dock-bubbles) { display:none; }
::view-transition-new(dock-bubbles) { animation:none; }
@keyframes page-out { to { transform:translateY(-8px) scale(.99); filter:brightness(.8); } }
@keyframes page-in { from { opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce) { ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; } }