/* A restrained horizontal page stack, sharing the brand header across pages. */
@view-transition { navigation: auto; }
:root { --page-entry-x:5vw; --page-exit-x:-3vw; }
:root[data-navigation-direction="back"] { --page-entry-x:-5vw; --page-exit-x:3vw; }
.topbar,.blog-header { view-transition-name:brand-header; }
.app-arrival .page-loader { display:none !important; }
.app-arrival body.is-loading { overflow:visible; }
@media(prefers-reduced-motion:no-preference) {
  ::view-transition-old(root) { animation:page-stack-out 280ms cubic-bezier(.4,0,.2,1) both; }
  ::view-transition-new(root) { animation:page-stack-in 420ms cubic-bezier(.22,1,.36,1) both; }
  ::view-transition-old(brand-header),::view-transition-new(brand-header) { animation:header-crossfade 220ms ease both; }
  .app-arrival:not(.native-page-motion) body { animation:page-stack-in 420ms cubic-bezier(.22,1,.36,1) both; }
  .app-departure:not(.native-page-motion) body { animation:page-stack-out 240ms cubic-bezier(.4,0,.2,1) both; pointer-events:none; }
}
@keyframes page-stack-in { from { opacity:0; transform:translateX(var(--page-entry-x)); } to { opacity:1; transform:translateX(0); } }
@keyframes page-stack-out { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(var(--page-exit-x)); } }
@keyframes header-crossfade { from { opacity:.85; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root),::view-transition-old(brand-header),::view-transition-new(brand-header) { animation:none; }
}

.app-departure .topbar-menu-panel,.app-departure .blog-nav.is-open { visibility:hidden; }
.app-departure body.menu-open main { transform:none; transition:none; }