/* Motion changes state, never the portfolio's page geometry or content. */
.aui-theme-host{display:contents}
.multipage>.nav.wrap .aui-theme-button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:10px;flex-shrink:0;border-radius:8px}
.aui-theme-button [data-slot=theme-toggler-button-icon]{width:22px;height:22px}
.aui-theme-button svg{display:block;width:22px;height:22px;pointer-events:none}
.aui-theme-button:disabled{cursor:wait}
@media(min-width:1600px){.multipage>.nav.wrap .aui-theme-button{width:48px;min-width:48px;height:48px}}
.aui-enabled .aui-selection-group{position:relative}
.aui-enabled .aui-selection{position:absolute;height:2px;background:var(--accent);transform-origin:left center;pointer-events:none;z-index:1}
.aui-enabled .aui-selection-group>button[aria-pressed=true],.aui-enabled .aui-selection-group>button[aria-selected=true]{border-bottom-color:transparent}
.aui-enabled .vx-refresh-in{animation:none}
.aui-enabled button:not([data-animate-ui]){transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out,scale 120ms ease-out}
.aui-enabled button:not([data-animate-ui]):active{scale:.985}
.aui-enabled a.button>svg,.aui-enabled a.text-link>svg,.aui-enabled .external-arrow{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover){
 .aui-enabled a.button:hover>svg,.aui-enabled a.text-link:hover>svg{transform:translateX(3px)}
 .aui-enabled a:hover .external-arrow{transform:translate(2px,-2px)}
}
.aui-enabled dialog[open]::backdrop{animation:aui-backdrop 200ms ease-out}
@keyframes aui-backdrop{from{background-color:transparent}}
.aui-enabled.reduced *,.aui-enabled.reduced *::before,.aui-enabled.reduced *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.aui-enabled.reduced button:active,.aui-enabled.reduced a:hover svg{scale:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .aui-enabled *,.aui-enabled *::before,.aui-enabled *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .aui-enabled button:active,.aui-enabled a:hover svg{scale:1;transform:none}
}

/* Official Animate UI Slide: 60px / 400ms entry, 200ms exit, ease.out / ease.leave.
   The native cross-document type keeps these rules completely separate from theme wipes. */
@view-transition{navigation:auto;types:page-navigation}
body.multipage>.nav{view-transition-name:portfolio-header}
:root:active-view-transition-type(page-navigation)::view-transition{background:var(--bg)}
:root:active-view-transition-type(page-navigation)::view-transition-old(root){animation:aui-page-out 200ms cubic-bezier(0,0,.58,1) both;mix-blend-mode:normal}
:root:active-view-transition-type(page-navigation)::view-transition-new(root){animation:aui-page-in 400ms cubic-bezier(.23,1,.32,1) both;mix-blend-mode:normal}
:root:active-view-transition-type(page-navigation):active-view-transition-type(portfolio-back)::view-transition-old(root){animation-name:aui-page-back-out}
:root:active-view-transition-type(page-navigation):active-view-transition-type(portfolio-back)::view-transition-new(root){animation-name:aui-page-back-in}
:root:active-view-transition-type(page-navigation)::view-transition-group(portfolio-header){animation-duration:0s;z-index:2}
:root:active-view-transition-type(page-navigation)::view-transition-old(portfolio-header){display:none}
:root:active-view-transition-type(page-navigation)::view-transition-new(portfolio-header){animation:none;mix-blend-mode:normal}
@keyframes aui-page-out{to{opacity:0;transform:translateX(-60px)}}
@keyframes aui-page-in{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes aui-page-back-out{to{opacity:0;transform:translateX(60px)}}
@keyframes aui-page-back-in{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
.aui-enabled.reduced::view-transition-group(*),.aui-enabled.reduced::view-transition-new(*),.aui-enabled.reduced::view-transition-old(*){animation:none!important}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-new(*),::view-transition-old(*){animation:none!important}}

/* Only the carousel viewport clips travelling panels; the page keeps its natural flow. */
.aui-project-host,.aui-project-tabs,.aui-project-panel{min-width:0}
.aui-project-tabs .vx-filter-bar{margin-bottom:12px}
.aui-project-viewport{padding:8px;margin:-8px}
.aui-project-panel .vx-project-gallery{margin-top:0}
.aui-project-slide,.aui-project-fade{width:100%}
.aui-project-tabs .vx-controls button[aria-selected=true]{color:#fff;background:var(--action);border-color:var(--action)}
@media(min-width:1280px) and (min-height:720px){
 .aui-project-host{display:flex;flex:1;min-height:0}
 .aui-project-tabs{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}
 .aui-project-tabs .vx-filter-bar{flex-shrink:0;margin-bottom:0}
 .aui-project-viewport{position:relative;flex:1;min-height:336px;height:auto!important}
 .aui-project-viewport>div{position:absolute;inset:8px;height:calc(100% - 16px)}
 .aui-project-panel,.aui-project-panel .vx-project-gallery{height:100%}
}
@media(min-width:1600px) and (min-height:1000px){.aui-project-tabs{gap:20px}}