/* Real page navigation, with a drawer entrance below the existing chrome. */
@view-transition { navigation: auto; }

body > header, .home-nav { view-transition-name: site-header; }
.home-masthead { view-transition-name: site-masthead; }

::view-transition { background: var(--paper, #fff); }
::view-transition-group(root) { animation: none; z-index: 0; }
::view-transition-image-pair(root) {
  isolation: isolate;
  /* Clip both pages at the actual bottom of the destination navigation. */
  clip-path: inset(var(--page-drawer-top, var(--header-height, 76px)) 0 0);
}
::view-transition-old(root), ::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: none;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
  z-index: 2;
  animation: page-drawer-in 480ms cubic-bezier(.22, 1, .36, 1) both;
}
html[data-page-direction="back"]::view-transition-old(root) {
  z-index: 2;
  animation: page-drawer-out 380ms cubic-bezier(.4, 0, .2, 1) both;
}
html[data-page-direction="back"]::view-transition-new(root) { z-index: 1; animation: none; }

/* Navigation and the homepage masthead never travel with the page drawer. */
::view-transition-group(site-header), ::view-transition-group(site-masthead) {
  animation: none;
  z-index: 3;
}
::view-transition-group(site-masthead) {
  z-index: 2;
  /* On a restored, scrolled homepage the sticky navigation hides the masthead. */
  clip-path: inset(0 0 max(0px, calc(100% - var(--page-masthead-visible, 0px))) 0);
}
::view-transition-old(site-header), ::view-transition-old(site-masthead) { display: none; }
::view-transition-new(site-header), ::view-transition-new(site-masthead) {
  animation: none;
  mix-blend-mode: normal;
}
@keyframes page-drawer-in {
  from { transform: translateY(100vh); }
  to { transform: translateY(0); }
}
@keyframes page-drawer-out {
  from { transform: translateY(0); }
  to { transform: translateY(100vh); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}