/* Page transitions: native cross-document View Transitions.
   Unsupported browsers just load pages normally. */
@view-transition { navigation: auto; }

html { background: #fff; } /* no white/flash mismatch between pages */

/* Header stays put while the page content changes under it */
.navbar-2 { view-transition-name: site-header; }

/* Content: quick fade out, soft rise-and-fade in */
::view-transition-old(root) { animation: edmh-out 180ms ease-in both; }
::view-transition-new(root) { animation: edmh-in 340ms cubic-bezier(.2,.7,.2,1) 60ms both; }
@keyframes edmh-out { to { opacity: 0; } }
@keyframes edmh-in  { from { opacity: 0; transform: translateY(10px); } }

/* Stylist card -> portfolio headshot morph */
::view-transition-group(stylist) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}