/* Small movements, one visual language. No custom cursor or scroll hijacking. */
.detail-reveal{opacity:0;translate:0 12px;transition:opacity .5s ease var(--detail-delay,0ms),translate .5s cubic-bezier(.2,.7,.3,1) var(--detail-delay,0ms)}
.detail-reveal.detail-visible{opacity:1;translate:0 0}
.reference-card,.mini-project,.service-card,.project-card,.product-card,.video-card{transition:border-color .25s,background .25s,box-shadow .25s,opacity .5s ease var(--detail-delay,0ms),translate .5s ease var(--detail-delay,0ms)}
.reference-card{overflow:hidden}.ref-avatar,.project-art,.video-thumb,.product-visual,.feedback-shot{overflow:hidden}
.ref-avatar img,.project-art img,.video-thumb img,.product-visual img,.feedback-shot img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.reference-arrow,.mini-project-arrow,.line-link>span,.btn>span[aria-hidden]{display:inline-block;transition:transform .25s ease}
.btn{transition:background .2s,box-shadow .2s,scale .15s}.detail-pressed{scale:.985}
.nav a{position:relative}.nav a:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .28s ease}.nav a.is-active:after{transform:scaleX(1);transform-origin:left}
.content-dialog[open]{animation:detail-modal-in .24s cubic-bezier(.2,.7,.3,1) both}.content-dialog[open]::backdrop{animation:detail-backdrop-in .24s both}.content-dialog.detail-closing{animation:detail-modal-out .16s ease both}.content-dialog.detail-closing::backdrop{animation:detail-backdrop-out .16s ease both}
.hero-art .playhead{animation:detail-playhead 7s ease-in-out infinite;animation-play-state:paused}.hero-art.detail-running .playhead{animation-play-state:running}.hero-art .art-floating i{animation:detail-status 3s ease-in-out infinite;animation-play-state:paused}.hero-art.detail-running .art-floating i{animation-play-state:running}
@media(hover:hover) and (pointer:fine){
 .reference-card:hover,.mini-project:hover,.service-card:hover,.product-card:hover{border-color:#d66a7270;box-shadow:0 8px 28px #00000020}
 .reference-card:hover .ref-avatar img,.project-card:hover .project-art img,.video-card:hover .video-thumb img,.product-card:hover .product-visual img,.feedback-shot:hover img{transform:scale(1.045)}
 .reference-card:hover .reference-arrow,.mini-project:hover .mini-project-arrow,.line-link:hover>span,.btn:hover>span[aria-hidden]{transform:translate(3px,-3px)}
 .nav a:hover:after{transform:scaleX(1);transform-origin:left}
}
@keyframes detail-playhead{0%,100%{left:27%}50%{left:75%}}
@keyframes detail-status{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes detail-modal-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes detail-modal-out{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes detail-backdrop-in{from{background:transparent;backdrop-filter:blur(0)}to{background:#000b;backdrop-filter:blur(5px)}}
@keyframes detail-backdrop-out{to{background:transparent;backdrop-filter:blur(0)}}
@media(max-width:900px){
 .nav,.nav.is-open{display:flex;transition:opacity .22s ease,transform .22s ease,visibility 0s .22s;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;max-height:calc(100dvh - 67px);overflow-y:auto}
 .nav.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
 .nav a:after{display:none}.nav a{transition:color .2s,translate .25s;translate:0 -4px}.nav.is-open a{translate:0 0}
}
@media(prefers-reduced-motion:reduce){
 .detail-reveal{opacity:1;translate:none}.detail-pressed{scale:1}.hero-art .playhead,.hero-art .art-floating i,.content-dialog,.content-dialog::backdrop{animation:none!important}
 .ref-avatar img,.project-art img,.video-thumb img,.product-visual img,.feedback-shot img,.reference-arrow,.mini-project-arrow,.line-link>span,.btn>span[aria-hidden]{transform:none!important;transition:none}
 .nav,.nav.is-open{transition:none!important}.nav a{translate:none}
}