/* Native document navigation keeps history, links and unsaved-form checks intact. */
@view-transition{navigation:auto}
:root{--surface-in:24px;--surface-out:-10px}
:root[data-surface-direction="back"]{--surface-in:-18px;--surface-out:10px}
.header.preview-gnb{view-transition-name:surface-header}
::view-transition{pointer-events:none}
::view-transition-group(root){animation-duration:460ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:surface-leave 190ms cubic-bezier(.4,0,1,1) both;mix-blend-mode:normal}
::view-transition-new(root){animation:surface-reveal 440ms 55ms cubic-bezier(.22,1,.36,1) both;mix-blend-mode:normal}
::view-transition-group(surface-header){animation-duration:0s;z-index:2}
::view-transition-old(surface-header){display:none}
::view-transition-new(surface-header){animation:none;mix-blend-mode:normal}
/* Opacity only: entrance must not change sticky/fixed positioning or scroll geometry. */
.surface-entry #main{animation:surface-arrive 460ms cubic-bezier(.2,.7,.3,1) backwards}
@keyframes surface-leave{to{opacity:0;transform:translateY(var(--surface-out))}}
@keyframes surface-reveal{from{opacity:0;transform:translateY(var(--surface-in))}to{opacity:1;transform:translateY(0)}}
@keyframes surface-arrive{from{opacity:.15}to{opacity:1}}
/* Original Brand curtain: close to the center, then unfold the next project. */
:root[data-surface-transition="portfolio"]::view-transition{background:#102e27}
:root[data-surface-transition="portfolio"]::view-transition-group(root){animation:none}
:root[data-surface-transition="portfolio"]::view-transition-image-pair(root){isolation:isolate}
:root[data-surface-transition="portfolio"]::view-transition-old(root),
:root[data-surface-transition="portfolio"]::view-transition-new(root){opacity:1;transform-origin:50% 50%;backface-visibility:hidden}
:root[data-surface-transition="portfolio"]::view-transition-old(root){animation:surface-portfolio-depart 340ms cubic-bezier(.7,0,.3,1) both;z-index:2}
:root[data-surface-transition="portfolio"]::view-transition-new(root){animation:surface-portfolio-arrive 540ms cubic-bezier(.16,1,.3,1) 340ms both;z-index:1}
:root[data-surface-transition="portfolio"]::view-transition-group(surface-header){z-index:3}
@keyframes surface-portfolio-depart{from{clip-path:inset(0);transform:scale(1)}to{clip-path:inset(0 50%);transform:scale(.96)}}
@keyframes surface-portfolio-arrive{from{clip-path:inset(0 50%);transform:scale(1.06)}to{clip-path:inset(0);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .surface-entry #main{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}