/* Progressive enhancement: unsupported browsers use ordinary document navigation. */
@view-transition { navigation: auto; }

/* The masthead is a shared, stationary object; only the composition beneath changes. */
.site-header { view-transition-name: site-masthead; }
.secondary-title { view-transition-name: page-heading; }

::view-transition { pointer-events: none; }
::view-transition-group(*) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.22,.68,.16,1);
}
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) {
  animation: page-leave 140ms cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: page-resolve 280ms 40ms cubic-bezier(.16,1,.3,1) both;
}

/* Do not crossfade two copies of small navigation text or move the fixed masthead. */
::view-transition-group(site-masthead) {
  animation: none;
  z-index: 10;
}
::view-transition-old(site-masthead) { display: none; }
::view-transition-new(site-masthead) { animation: none; }

/* A title resolves independently from the supporting information, without stretching
   between two differently sized words or translating the entire page like a slide. */
::view-transition-group(page-heading) { animation: none; }
::view-transition-old(page-heading),
::view-transition-new(page-heading) {
  height: 100%;
  object-fit: contain;
  object-position: left top;
  mix-blend-mode: normal;
}
::view-transition-old(page-heading) { animation: page-leave 120ms ease-in both; }
::view-transition-new(page-heading) {
  animation: heading-resolve 320ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes page-leave {
  to { opacity: 0; }
}
@keyframes page-resolve {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes heading-resolve {
  from { opacity: 0; clip-path: inset(0 0 16% 0); transform: translateY(6px); }
  to { opacity: 1; clip-path: inset(0); transform: translateY(0); }
}

html[data-motion="reduced"]::view-transition-group(*),
html[data-motion="reduced"]::view-transition-old(*),
html[data-motion="reduced"]::view-transition-new(*) {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Embedded-browser fallback: the existing page exits for 100ms, then the next real
   document enters for 220ms. The fixed navigation never participates in this fade. */
html[data-page-transition="leaving"] main,
html[data-page-transition="leaving"] footer {
  opacity: 0;
  transition: opacity 100ms ease-in;
}
html[data-page-transition="entering"] main,
html[data-page-transition="entering"] footer {
  animation: page-enter-fallback 220ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes page-enter-fallback {
  from { opacity: 0; }
  to { opacity: 1; }
}
html[data-motion="reduced"][data-page-transition] main,
html[data-motion="reduced"][data-page-transition] footer {
  opacity: 1;
  filter: none;
  transition: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-page-transition] main,
  html[data-page-transition] footer {
    opacity: 1;
    filter: none;
    transition: none;
    animation: none;
  }
}