/* The frame stays; only the view's content and material change. */
@view-transition{navigation:auto}
html #home header{height:10svh;padding:0 calc(6% + 24px);display:flex;align-items:center}
html .about-header{height:10svh;min-height:0;padding-block:0}
/* Scope every override: project hero handoffs keep their own shared assets. */
html[data-site-transition] :is(.project-heading,.hero-copy,.actions-panel,.case-image,.hero-art,.project-asset-grid,.hero-asset-grid){view-transition-name:none!important}
html[data-site-transition] [data-continuity="left"]{view-transition-name:site-left}
html[data-site-transition] [data-continuity="right"]{view-transition-name:site-right}
html[data-site-transition] [data-continuity="top"]{view-transition-name:site-top}
html[data-site-transition] [data-continuity="bottom"]{view-transition-name:site-bottom}
html[data-site-transition] [data-continuity="mark"]{view-transition-name:site-mark}
html[data-site-transition] [data-continuity="end"]{view-transition-name:site-end}
html[data-site-transition] [data-continuity="nav"]{view-transition-name:site-nav}
html[data-site-transition]::view-transition-group(*){animation-duration:280ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
html[data-site-transition]::view-transition-group(root){z-index:0}
html[data-site-transition]::view-transition-old(root){animation:site-content-out 160ms ease-out both;mix-blend-mode:normal}
html[data-site-transition]::view-transition-new(root){animation:site-content-in 280ms cubic-bezier(.16,1,.3,1) both;mix-blend-mode:normal}
html[data-site-transition]::view-transition-group(site-left),html[data-site-transition]::view-transition-group(site-right),html[data-site-transition]::view-transition-group(site-top),html[data-site-transition]::view-transition-group(site-bottom),html[data-site-transition]::view-transition-group(site-mark),html[data-site-transition]::view-transition-group(site-end),html[data-site-transition]::view-transition-group(site-nav){z-index:5}
/* Identical old/new frame pixels do not dissolve or re-draw. */
html[data-site-transition]::view-transition-old(site-left),html[data-site-transition]::view-transition-old(site-right),html[data-site-transition]::view-transition-old(site-top),html[data-site-transition]::view-transition-old(site-bottom),html[data-site-transition]::view-transition-old(site-mark),html[data-site-transition]::view-transition-old(site-end),html[data-site-transition]::view-transition-old(site-nav){animation:none;opacity:1;mix-blend-mode:normal}
html[data-site-transition]::view-transition-new(site-left),html[data-site-transition]::view-transition-new(site-right),html[data-site-transition]::view-transition-new(site-top),html[data-site-transition]::view-transition-new(site-bottom),html[data-site-transition]::view-transition-new(site-mark),html[data-site-transition]::view-transition-new(site-end),html[data-site-transition]::view-transition-new(site-nav){animation:none;opacity:0;mix-blend-mode:normal}
/* When a frame piece exists on just one side, it enters/exits with that content. */
html[data-site-transition]::view-transition-image-pair(site-bottom):only-child{isolation:isolate}
@keyframes site-content-out{from{opacity:1}to{opacity:0}}
@keyframes site-content-in{from{opacity:0}to{opacity:1}}
@media(max-width:600px){html #home header{padding-inline:calc(6% + 14px)}html .about-header{padding-right:calc(6% + 14px)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}html[data-site-transition]::view-transition-group(*){animation-duration:1ms!important}}
html[data-site-transition]::view-transition{background:#f6f1e8}
html[data-site-transition]::view-transition-old(*):only-child{animation:site-content-out 160ms ease-out both}
html[data-site-transition]::view-transition-new(*):only-child{animation:site-content-in 280ms cubic-bezier(.16,1,.3,1) both;opacity:1}
html[data-site-transition]::view-transition{pointer-events:none}
html .about-header-rule{bottom:-1px}
html .intersection-diamond--header{top:100%}

/* Work begins its own drawing sooner; route and close continuity keep their timing. */
html[data-site-transition="work-opening"]::view-transition-group(*){animation-duration:320ms}
html[data-site-transition="work-opening"]::view-transition-old(root){animation-duration:200ms}
html[data-site-transition="work-opening"]::view-transition-new(root){animation-duration:320ms}