@property --ui-y{syntax:"<length>";inherits:false;initial-value:0px}
@property --ui-scale{syntax:"<number>";inherits:false;initial-value:1}
@property --ui-opacity{syntax:"<number>";inherits:false;initial-value:1}
html.ui-motion-ready body .ui-surface{transform:translate(var(--ui-anchor-x,0px),var(--ui-y,0px)) scale(var(--ui-scale,1))!important;opacity:var(--ui-opacity,1)!important;transition:none!important;animation:none!important}
html.ui-motion-ready body .ui-surface.ui-is-exiting{visibility:visible!important;pointer-events:none!important}
html.ui-motion-ready body .contact-options.ui-surface{transform-origin:85% 100%}
html.ui-motion-ready body .about-top-nav details>div.ui-surface{transform-origin:85% 0%}
html.ui-motion-ready body .case-drawer-panel.ui-surface{transform-origin:50% 100%}
html.ui-motion-ready .case-drawer{transition:visibility 0s linear .4s!important}
html.ui-motion-ready .case-drawer.is-open{transition-delay:0s!important}
@media(max-width:760px){html.ui-motion-ready body .contact-options.ui-surface{transform-origin:50% 100%}}
@media(min-width:761px){.hero .hero-sticker{margin-top:-37px!important}}
@media(prefers-reduced-motion:reduce){html.ui-motion-ready body .ui-surface{transition:none!important;animation:none!important}}

html.ui-motion-ready .ui-size-morph{overflow:clip!important;box-sizing:border-box}
html.ui-motion-ready .ui-size-morph>:is(a,button,.email-copy-confirmation){min-width:var(--ui-content-width);box-sizing:border-box}
html.ui-motion-ready body .case-drawer .case-drawer-panel.ui-surface,html.ui-motion-ready body .case-drawer.is-open .case-drawer-panel.ui-surface{transform:translate(var(--ui-anchor-x,0px),var(--ui-y,0px)) scale(var(--ui-scale,1))!important;transition:none!important;opacity:var(--ui-opacity,1)!important}

/* Keep the same rendered dock across full-page navigation. No startup hide/show. */
@view-transition{navigation:auto}
.app-nav{view-transition-name:portfolio-dock}
body.nav-before-reel .app-nav{view-transition-name:none}
::view-transition-group(portfolio-dock),::view-transition-old(portfolio-dock),::view-transition-new(portfolio-dock){animation:none!important;mix-blend-mode:normal}
::view-transition-old(root),::view-transition-new(root){animation:none!important}
html[data-drawer-view=true] .app-nav{display:none!important}
html.reel-entry-boot .home-page .work-reel{translate:0 120px!important}

/* Depart below the viewport; the destination reveals from the same edge. */
html.dock-leaving body[data-nav-mode=bottom] .app-nav,
html.dock-arriving body[data-nav-mode=bottom] .app-nav{translate:var(--toast-shift,0px) calc(100% + 64px)!important;pointer-events:none!important}
html.dock-leaving body[data-nav-mode=bottom] .app-nav{transition:translate .32s cubic-bezier(.4,0,.7,.2)!important}
html.dock-arriving body[data-nav-mode=bottom] .app-nav{transition:none!important}
.app-nav{view-transition-name:none}
@media(prefers-reduced-motion:reduce){html.dock-leaving body[data-nav-mode=bottom] .app-nav,html.dock-arriving body[data-nav-mode=bottom] .app-nav{translate:var(--toast-shift,0px) 0!important}}

/* Persist the dock between interior pages; only home changes its visibility. */
.app-nav{view-transition-name:portfolio-dock}
body.nav-before-reel .app-nav,html.dock-arriving .app-nav,html.dock-leaving .app-nav{view-transition-name:none}

/* Selection is a separate goo layer, so labels stay crisp. */
.app-nav .nav-primary.has-dock-chip{position:relative;isolation:isolate}
.app-nav .dock-selection{position:absolute;inset:0;pointer-events:none;z-index:-1;filter:url(#dock-goo)}
.app-nav .dock-selection[hidden]{display:none}
.app-nav .dock-selection>svg{position:absolute}
.app-nav .dock-chip,.app-nav .dock-drop{position:absolute;border-radius:999px;background:#414147}
.app-nav .dock-drop{opacity:0}
html body[data-nav-mode=bottom] .app-nav .has-dock-chip a.is-current{background:transparent!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){.app-nav .dock-selection{filter:none}}