/* Animated page changes on the public site (cross-document view transitions).
   Browsers without support (e.g. Firefox) just change page normally. Admin pages don't load this. */

@view-transition { navigation: auto; }

/* The logo and the person's photo move between pages instead of sliding with everything else */
.brand-name .wordmark, .mini-brand .wordmark { view-transition-name: site-logo; }
.profile-photo { view-transition-name: person-photo; }
/* (the tapped team card's photo gets the same name from transitions.js) */

::view-transition-group(*) { animation-duration: 340ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 340ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* Into a profile: the new page slides in from the right over the old one */
html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: vt-out-left; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: vt-in-right; }
/* Back to the team: the reverse */
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-right; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-left; }

/* If the photo has no card to shrink back into, it leaves with the rest of the page */
html:active-view-transition-type(back)::view-transition-old(person-photo):only-child { animation-name: vt-out-right; }

@keyframes vt-in-right { from { transform: translateX(100%); } }
@keyframes vt-out-left { to { transform: translateX(-25%); opacity: 0; } }
@keyframes vt-in-left { from { transform: translateX(-25%); opacity: 0; } }
@keyframes vt-out-right { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}