/* Motion enhancement only. Original structure and art direction remain intact. */
.depth-scene{min-height:560px;--depth:0}.depth-scene>img:first-child{transform:scale(1.12) translateY(calc(var(--depth)*32px));opacity:.65}.depth-scene>.depth-mic{inset:auto -6% -10% auto;width:70%;height:115%;object-fit:contain;opacity:1;z-index:2;transform:translate3d(calc(var(--depth)*-30px),calc(var(--depth)*-45px),0) scale(1.04);pointer-events:none}.depth-scene>div{z-index:3;max-width:55%}.depth-scene:after{z-index:1}.scroll-art{--travel:0px;--zoom:1.07}.scroll-art img{transform:translate3d(0,var(--travel),0) scale(var(--zoom))}.marketing-card{--lift:0px;translate:0 var(--lift)}
@supports (animation-timeline:view()) and (animation-range:entry 0% exit 100%){
@media(prefers-reduced-motion:no-preference){
.scroll-art>img{animation:portraitDepth linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
.depth-scene>img:first-child{animation:backgroundDepth linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
.depth-scene>.depth-mic{animation:foregroundDepth linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
}
@keyframes portraitDepth{from{transform:translate3d(0,18px,0) scale(1.12)}to{transform:translate3d(0,-18px,0) scale(1.035)}}
@keyframes backgroundDepth{from{transform:translateY(-25px) scale(1.15)}to{transform:translateY(25px) scale(1.08)}}
@keyframes foregroundDepth{from{transform:translate3d(45px,65px,0) scale(.96)}to{transform:translate3d(-15px,-25px,0) scale(1.08)}}
@media(max-width:700px){.depth-scene{min-height:480px}.depth-scene>div{max-width:95%;align-self:flex-start}.depth-scene>.depth-mic{width:100%;height:80%;right:-23%;bottom:-18%;opacity:.65}.depth-scene h2{font-size:48px}.marketing-card{translate:none}}
@media(prefers-reduced-motion:reduce){.scroll-art img,.depth-scene>img,.marketing-card{animation:none!important;transform:none!important;translate:none!important}}
/* Explicit scroll choreography: framing opens, image pushes forward, layers separate. */
.scroll-directed{--entry:1;--depth:0;--inset:0%;--rise:0px}
.scroll-art.scroll-directed{clip-path:inset(0 var(--inset) round 18px)}
.scroll-art.scroll-directed>img{animation:none!important;transform:translate3d(0,var(--travel,0px),0) scale(var(--zoom,1.05));transform-origin:center;transition:none!important}
.work-card .card-image.scroll-directed{clip-path:inset(0 var(--inset) round 12px);translate:0 var(--rise)}
.work-card .card-image.scroll-directed img{transform:scale(calc(1.18 - var(--entry)*.18));transition:none!important}
.marketing-card.scroll-directed{translate:0 var(--rise);clip-path:inset(0 var(--inset) round 16px)}
.depth-scene.scroll-directed>img:first-child{animation:none!important;transform:translate3d(0,calc(var(--depth)*55px),0) scale(1.2)}
.depth-scene.scroll-directed>.depth-mic{animation:none!important;transform:translate3d(calc(var(--depth)*-100px),calc(var(--depth)*-85px),0) scale(calc(1.05 + var(--depth)*.1))}
.depth-scene.scroll-directed>div{transform:translateY(calc(var(--depth)*-25px))}
.clio-main.scroll-directed{translate:0 var(--rise)}
@media(max-width:700px){.scroll-art.scroll-directed{clip-path:inset(0 calc(var(--inset)*.5) round 12px)}.depth-scene.scroll-directed>.depth-mic{transform:translate3d(calc(var(--depth)*-35px),calc(var(--depth)*-45px),0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.scroll-directed,.scroll-directed>img,.depth-scene.scroll-directed>div,.work-card .card-image.scroll-directed img{animation:none!important;transform:none!important;translate:none!important;clip-path:none!important}}