/* ============ CROSS-PAGE VIEW TRANSITIONS ============
   same-origin navigations morph instead of cutting. three things keep their
   identity across the swap: the header logo, the page headline, and (journal
   only, wired in vt.js) the card image that becomes the article hero.
   everything else crossfades under a small vertical settle.
   browsers without support simply navigate as before. */
@view-transition{navigation:auto}

/* --- the page itself --- */
::view-transition-old(root){animation:vt-root-out .32s cubic-bezier(.3,0,.2,1) both}
::view-transition-new(root){animation:vt-root-in .38s cubic-bezier(.22,1,.36,1) both}
@keyframes vt-root-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-root-in{from{opacity:0;transform:translateY(10px)}}

/* --- the logo is one object, so it flies rather than refading --- */
header .logo,header .brand{view-transition-name:sitelogo}
::view-transition-group(sitelogo){animation-duration:.42s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(sitelogo),::view-transition-new(sitelogo){animation:none;mix-blend-mode:normal;height:100%;width:auto}

/* --- the headline of the page you left becomes the headline of the one you
       land on: the box travels and resizes, the words swap underneath it --- */
.vt-title{view-transition-name:pagetitle}
::view-transition-group(pagetitle){animation-duration:.52s;animation-timing-function:cubic-bezier(.19,1,.22,1)}
::view-transition-old(pagetitle),::view-transition-new(pagetitle){mix-blend-mode:normal;height:100%;width:100%}
::view-transition-old(pagetitle){animation:vt-out .16s linear both}
::view-transition-new(pagetitle){animation:vt-in .3s .12s cubic-bezier(.22,1,.36,1) both}

/* --- journal card image expands into the article hero, and back --- */
::view-transition-group(postmedia){animation-duration:.56s;animation-timing-function:cubic-bezier(.19,1,.22,1)}
::view-transition-old(postmedia),::view-transition-new(postmedia){
  mix-blend-mode:normal;height:100%;width:100%;object-fit:cover;object-position:center
}
::view-transition-old(postmedia){animation:vt-out .2s linear both}
::view-transition-new(postmedia){animation:vt-in .34s .1s linear both}

@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-group(sitelogo),::view-transition-group(pagetitle),::view-transition-group(postmedia),
  ::view-transition-old(pagetitle),::view-transition-new(pagetitle),
  ::view-transition-old(postmedia),::view-transition-new(postmedia){animation:none!important}
}