/* Page transitions between the home page and the legal pages.
   Browsers with cross-document View Transitions: the old page blurs and settles back, the new one comes into focus,
   the TEAL logo stays put. Other browsers: a plain fade (see transitions.js). */
@view-transition { navigation: auto; }
.nav-logo { view-transition-name: teal-logo; }
::view-transition-old(root) { animation: pt-out .42s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: pt-in .75s cubic-bezier(.16, 1, .3, 1) .06s both; }
::view-transition-group(teal-logo) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
@keyframes pt-out { to { opacity: 0; filter: blur(8px); transform: scale(.985); } }
@keyframes pt-in { from { opacity: 0; filter: blur(8px); transform: scale(1.012); } }

/* fallback: opacity only (a transform or filter on <body> would unpin the fixed nav and footer) */
html.pt-enter body { animation: pt-fade-in .6s cubic-bezier(.16, 1, .3, 1) both; }
html.pt-leave body { animation: pt-fade-out .34s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes pt-fade-in { from { opacity: 0; } }
@keyframes pt-fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01s !important; animation-delay: 0s !important; }
  html.pt-enter body, html.pt-leave body { animation: none; }
}