/* One transition name per page; both header and footer contain .brand. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-group(site-header){animation-duration:.2s}
::view-transition-old(root){animation:page-out .18s ease both}
::view-transition-new(root){animation:page-in .22s ease both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}