/* Cross-document transitions preserve ordinary navigation and browser history. */
@view-transition { navigation: auto; }

header { view-transition-name: site-header; }
::view-transition-group(root) { animation-duration: 420ms; }
::view-transition-old(root) {
  animation: page-depart 180ms cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: page-arrive 420ms cubic-bezier(.16, 1, .3, 1) both;
}
::view-transition-group(site-header),
::view-transition-image-pair(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none !important;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none !important;
  backdrop-filter: none !important;
}
::view-transition-group(site-header) { z-index: 2; }
/* Hold the outgoing header until the new page has finished arriving. */
::view-transition-old(site-header) { display: block; z-index: 2; }
::view-transition-new(site-header) { visibility: hidden; }
@keyframes page-depart { to { opacity: 0; } }
@keyframes page-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  header { view-transition-name: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 1ms !important;
    transform: none !important;
  }
}

/* Only the selected navigation surface travels; labels stay in the header. */
::view-transition-group(nav-selection) {
  z-index: 3;
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
::view-transition-old(nav-selection) { display: none; }
::view-transition-new(nav-selection) { animation: none; opacity: 1; mix-blend-mode: normal; }

header .lm-header-inner nav a:first-of-type { view-transition-name: nav-work; }
header .lm-header-inner nav a:last-of-type { view-transition-name: nav-about; }
::view-transition-group(nav-work), ::view-transition-group(nav-about) { z-index: 4; animation: none; }
::view-transition-old(nav-work), ::view-transition-old(nav-about) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-new(nav-work), ::view-transition-new(nav-about) { visibility: hidden; }
@media(prefers-reduced-motion:reduce) {
  header .lm-header-inner nav a { view-transition-name: none; }
}