/* Shared motion enhances the existing layout without changing artwork crops. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:180ms;--motion-medium:420ms}
@view-transition{navigation:auto}
::view-transition-old(root){animation:ks-page-out 180ms ease both}
::view-transition-new(root){animation:ks-page-in 320ms var(--motion-ease) both}
@keyframes ks-page-out{to{opacity:0}}
@keyframes ks-page-in{from{opacity:0}to{opacity:1}}
.work-card,.project-open,.career-download{transition:transform var(--motion-medium) var(--motion-ease),box-shadow var(--motion-medium) var(--motion-ease)}
.work-card-heading>span,.work-card-link>span,.button>span[aria-hidden],.text-link>span[aria-hidden],.profile-project-title>span{display:inline-block;transition:transform var(--motion-medium) var(--motion-ease)}
.button,.text-link,.work-filters button,.experience-controls button{transition:background-color 180ms,color 180ms,border-color 180ms,box-shadow 180ms}
.button:active,.work-filters button:active{transform:translateY(1px)}
.work-card:focus-visible,.project-open:focus-visible{outline:2px solid var(--c);outline-offset:7px}
.site-nav #site-menu a{position:relative}
.site-nav #site-menu a:not([aria-current=page])::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--motion-ease)}
.site-nav #site-menu a:hover::after,.site-nav #site-menu a:focus-visible::after{transform:scaleX(1)}
.case-chapter-nav a{transition:color 180ms,border-color 180ms}
.ks-reading-progress{position:fixed;z-index:200;inset:0 0 auto;height:3px;background:transparent;pointer-events:none}
.ks-reading-progress::after{content:"";display:block;width:100%;height:100%;background:var(--c,#254BFF);transform:scaleX(var(--reading-progress,0));transform-origin:left}
.experience-lightbox[open],#enquiry-dialog[open]{animation:ks-dialog-in 280ms var(--motion-ease)}
.experience-lightbox[open]::backdrop,#enquiry-dialog[open]::backdrop{animation:ks-backdrop-in 220ms ease}
@keyframes ks-dialog-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ks-backdrop-in{from{opacity:0}to{opacity:1}}
.art-gallery-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.art-gallery-count{font:12px/1.4 Mono,monospace;min-width:58px;text-align:center;white-space:nowrap}
.art-gallery-controls button{min-width:44px;min-height:44px}
@media(hover:hover) and (pointer:fine){
 .work-card:hover,.career-download:hover{transform:translateY(-4px)}
 .work-card:hover .work-card-heading>span,.work-card:hover .work-card-link>span,.button:hover>span[aria-hidden],.text-link:hover>span[aria-hidden],.profile-project:hover .profile-project-title>span{transform:translate(3px,-3px)}
 .career-download:hover{box-shadow:0 8px 0 -6px currentColor}
}
@media(max-width:760px){
 .experience-lightbox-bar{gap:12px;flex-wrap:wrap}
 .experience-lightbox-bar>p{flex:1 0 100%;margin:0}
 .experience-lightbox-bar>div{flex-wrap:wrap}
 .art-gallery-controls{gap:5px}
 .site-nav.menu-open #site-menu{animation:ks-page-in 220ms ease}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .work-card:hover,.career-download:hover,.button:active,.work-filters button:active{transform:none}
 .ks-reading-progress{display:none}
}