/* Page to page: the header and sidebar stay still (same markup on every page, see
   scripts/build-shell.mjs) and only the page card cross-fades. */
@view-transition{navigation:auto}
:root{view-transition-name:none;--source-page-radius:0px}
::view-transition,::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){pointer-events:none}
/* Capture the frame itself: a lifted child snapshot loses its parent's clipping. */
.content-shell,#landing-main,body>main{view-transition-name:source-page}
.site-header{view-transition-name:source-header}
.desktop-sidebar{view-transition-name:source-navigation}
::view-transition-old(source-header),::view-transition-new(source-header),
::view-transition-old(source-navigation),::view-transition-new(source-navigation){animation:none;mix-blend-mode:normal}
:root:has(.content-shell){--source-page-radius:var(--surface-radius) var(--surface-radius) 0 0}
:root:has(#landing-main){--source-page-radius:28px 28px 0 0}
@media(min-width:1024px){:root:has(.content-shell){--source-page-radius:28px}}
@media(max-width:760px){:root:has(#landing-main){--source-page-radius:26px 26px 0 0}}
::view-transition-group(*){animation-duration:0s}
::view-transition-group(source-page){border-radius:var(--source-page-radius);overflow:clip;background:var(--bg,#fff)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* The group paints the page colour, so the old page can leave before the new one arrives (no ghosting). */
::view-transition-old(source-page){animation:source-page-out .12s ease-in both;mix-blend-mode:normal}
@keyframes source-page-out{to{opacity:0}}
::view-transition-new(source-page){animation:source-page-in .26s cubic-bezier(.2,.8,.2,1) .06s both;mix-blend-mode:normal}
@keyframes source-page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(source-page),::view-transition-new(source-page){animation:none}
}
