html{background:var(--color-bg-page,#fefefe)}
html[data-theme=dark]{background:var(--color-bg-page,#0f1115)}
@view-transition{navigation:auto}
:root.page-navigation-incoming:not(.theme-transition){view-transition-name:none}
/* Keep the live destination opaque under the outgoing snapshot. In particular,
   a missing/dropped outgoing capture must not reveal a transparent destination.
   Theme toggles retain their own lifecycle and styles. */
:root:not(.theme-transition)::view-transition-group(root){animation:none}
:root:not(.theme-transition)::view-transition-old(root){animation:page-snapshot-exit 550ms cubic-bezier(.22,.68,.24,1) both;mix-blend-mode:normal;z-index:2}
:root:not(.theme-transition)::view-transition-new(root){animation:none;opacity:1;mix-blend-mode:normal;z-index:1}
@keyframes page-snapshot-exit{from{opacity:1}to{opacity:0}}
/* No transform/filter on the live body: fixed dock and landscape layers must
   remain attached to the viewport, even in browsers without snapshots. */
/* A viewport veil reproduces appearance over the page canvas without
   flattening the entire long document and its glass/canvas layers into an
   animated opacity surface. Content and fixed controls retain their layers. */
:root.page-arriving::after{content:"";position:fixed;inset:0;z-index:2147483646;background:var(--color-bg-page,#fefefe);pointer-events:none;animation:page-arrival-veil 550ms cubic-bezier(.22,.68,.24,1) both}
:root[data-theme=dark].page-arriving::after{background:var(--color-bg-page,#0f1115)}
/* Without an outgoing snapshot, keep the prepared destination visible from
   its first frame instead of fading in from an empty page. */
@keyframes page-arrival-veil{from{opacity:.65}to{opacity:0}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 :root.page-arriving::after{display:none;animation:none}
 :root::view-transition-old(root),:root::view-transition-new(root){animation:none}
}

/* Never expose parser-time empty images, untranslated copy or provisional
   corner geometry. On navigation the old snapshot remains visible above this. */
.page-preparing body{visibility:hidden}
:root.page-motion-preparing:not(.theme-transition)::view-transition-old(root){animation-play-state:paused}
/* #work is a programmatic reading/focus destination, not an interactive control.
   Links inside it retain their normal keyboard focus outlines. */
#work[tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:none}

:root.page-motion-preparing.page-arriving::after{animation-play-state:paused}

/* The return anchor identifies a card, while its link remains the keyboard stop. */
.case-card[id^="project-"]{scroll-margin-top:24px}
.case-card[id^="project-"]:focus{outline:none}
:root:not(.theme-transition)::view-transition{pointer-events:none}

/* Native cross-document navigation already crossfades the old snapshot over
   the prepared live destination. A second arrival veil darkened that same
   destination during the crossfade, causing a brightness dip between pages.
   Keep the veil for fallback navigation where no snapshot is available. */
:root.page-navigation-incoming.page-arriving:not(.theme-transition)::after{opacity:0;animation:none}