@view-transition { navigation: auto; }

:root { --gp-page-travel: 22px; --gp-page-blur: 6px; view-transition-name: none; }
.gp-navbar { view-transition-name: gp-header; }
.gp-main { view-transition-name: gp-content; }
.gp-footer { view-transition-name: gp-footer; }

::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 0s; }
::view-transition-group(gp-header) { z-index: 2; }
::view-transition-image-pair(gp-header) { isolation: auto; }
::view-transition-old(gp-header) { display: none; }
::view-transition-new(gp-header) { animation: none; mix-blend-mode: normal; }
::view-transition-old(gp-content),
::view-transition-new(gp-content) { transform-origin: 50% 28vh; mix-blend-mode: normal; }
::view-transition-old(gp-content) { animation: gp-depth-out 220ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(gp-content) { animation: gp-depth-in 480ms cubic-bezier(.16,1,.3,1) both; }
::view-transition-old(gp-footer) { animation: gp-footer-out 180ms ease-out both; }
::view-transition-new(gp-footer) { animation: gp-footer-in 360ms ease-out both; }

@keyframes gp-depth-out {
  to { opacity: 0; transform: translateY(calc(var(--gp-page-travel) * -.5)) scale(.985); filter: blur(var(--gp-page-blur)); }
}
@keyframes gp-depth-in {
  from { opacity: 0; transform: translateY(var(--gp-page-travel)) scale(1.018); filter: blur(var(--gp-page-blur)); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes gp-footer-out { to { opacity: 0; } }
@keyframes gp-footer-in { from { opacity: 0; } }

@media (max-width: 760px) {
  :root { --gp-page-travel: 14px; --gp-page-blur: 3px; }
  ::view-transition-new(gp-content) { animation-duration: 420ms; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}