/* A quiet, staged handoff. The header is a separate, stationary layer. */
@view-transition { navigation: auto; }
.project-page { animation: none; }
.header { view-transition-name: yrgs-header; }
::view-transition-group(root) { animation-duration: 680ms; }
::view-transition-old(root) { animation: page-dissolve-out 680ms linear both; }
::view-transition-new(root) { animation: page-dissolve-in 680ms linear both; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: plus-lighter; }
::view-transition-group(yrgs-header) {
  animation: none; mix-blend-mode: difference; z-index: 2;
}
::view-transition-image-pair(yrgs-header) { isolation: auto; }
::view-transition-old(yrgs-header) { display: none; }
::view-transition-new(yrgs-header) { animation: none; mix-blend-mode: normal; }
@keyframes page-dissolve-out {
  0% { opacity: 1; }
  18% { opacity: .65; }
  42%, 100% { opacity: 0; }
}
@keyframes page-dissolve-in {
  0%, 24% { opacity: 0; }
  46% { opacity: .26; }
  72% { opacity: .8; }
  100% { opacity: 1; }
}
html[data-navigation-mode="fallback"]::after {
  content: ''; position: fixed; inset: 0; z-index: 19;
  background: #fff; opacity: 0; pointer-events: none;
  transition: opacity 420ms cubic-bezier(.4,0,.2,1);
}
html[data-navigation-mode="fallback"].page-veiled::after { opacity: 1; }
html[data-navigation-mode="fallback"].page-departing::after { pointer-events: all; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html[data-navigation-mode="fallback"]::after { transition: none; }
}