:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-quick:180ms;--motion-standard:320ms}
.header{position:sticky;top:0;z-index:20;width:100%;background:var(--bg);transition:transform 260ms var(--motion-ease),background-color 200ms,box-shadow 200ms}
.header.is-scrolled{background:rgba(247,248,250,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 20px #20273309}
.header.is-nav-hidden{transform:translateY(calc(-100% - 1px));pointer-events:none}

.button,.nav-contact,.small-button,.ui-gallery-toolbar button{transition:background-color var(--motion-quick),border-color var(--motion-quick),box-shadow var(--motion-quick),transform var(--motion-quick) var(--motion-ease)}
.button:active,.small-button:active,.ui-gallery-toolbar button:active{transform:translateY(1px)}
.circle-arrow,.button>span,.text-link>span,.resume-link>span{display:inline-block;transition:transform var(--motion-standard) var(--motion-ease)}
.project-image,.ux-work,.union-config-gallery a,.union-diagram-image,.ai-build-practice figure>a{transition:transform var(--motion-standard) var(--motion-ease),box-shadow var(--motion-standard),border-color var(--motion-quick)}
.union-screen-link{transition:transform var(--motion-standard) var(--motion-ease),box-shadow var(--motion-standard),border-color var(--motion-quick)}
.ui-thumbnail-strip button{transition:opacity var(--motion-quick),border-color var(--motion-quick),transform var(--motion-quick) var(--motion-ease)}
.case-jump button{transition:background-color var(--motion-quick),border-color var(--motion-quick)}
@media(hover:hover) and (pointer:fine){
 .project-card>a:hover .project-image{transform:translateY(-3px)}
 .project-card>a:hover .circle-arrow{transform:translate(2px,-2px)}
 .button:hover>span,.text-link:hover>span,.resume-link:hover>span{transform:translate(2px,-1px)}
 .ux-work:hover{transform:translateY(-3px);box-shadow:0 12px 30px #253b5910}
 .union-config-gallery a:hover,.union-diagram-image:hover,.ai-build-practice figure>a:hover{transform:translateY(-2px);box-shadow:0 9px 24px #253b5912}
 .union-screen-link:hover{transform:translateY(-3px)}
 .ui-thumbnail-strip button:hover{transform:translateY(-2px)}
}
#case-dialog[open]::backdrop{animation:portfolio-backdrop-in 250ms ease-out both}
#case-dialog.is-closing::backdrop{animation:portfolio-backdrop-out 160ms ease-in both}
@keyframes portfolio-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes portfolio-backdrop-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .project-card>a:hover .project-image,.project-card>a:hover .circle-arrow,.ux-work:hover,.union-config-gallery a:hover,.union-diagram-image:hover,.ai-build-practice figure>a:hover,.union-screen-link:hover,.ui-thumbnail-strip button:hover,.primary:hover,.button:hover>span,.text-link:hover>span,.resume-link:hover>span,.button:active,.small-button:active,.ui-gallery-toolbar button:active{transform:none!important}
}