/* Scroll transforms live on wrappers; the images carry the quiet idle movement. */
.hero{--fan:0;--gather:0}
.hero-phone img{animation:phone-breathe 7s ease-in-out infinite;animation-delay:calc(var(--i)*-1.4s);transform-origin:50% 75%;backface-visibility:hidden}
.hero[data-motion-visible=false] .hero-phone img{animation-play-state:paused}
.hero-phone{transition:opacity .12s;transform-style:preserve-3d}
.hp-0{transform:translate3d(calc(-155px - var(--fan)*65px + var(--gather)*95px + var(--mx)*8px),calc(27px - var(--fan)*25px + var(--gather)*65px),60px) rotate(calc(-18deg - var(--fan)*7deg + var(--gather)*22deg))}
.hp-1{transform:translate3d(calc(-45px - var(--fan)*20px + var(--gather)*5px),calc(-13px - var(--fan)*65px + var(--gather)*80px + var(--my)*8px),100px) rotate(calc(-5deg + var(--gather)*5deg))}
.hp-2{transform:translate3d(calc(75px + var(--fan)*30px - var(--gather)*40px),calc(13px - var(--fan)*15px + var(--gather)*5px),80px) rotate(calc(10deg + var(--fan)*3deg - var(--gather)*10deg))}
.hp-3{transform:translate3d(calc(185px + var(--fan)*50px - var(--gather)*100px),calc(51px + var(--fan)*20px - var(--gather)*70px),0) rotate(calc(24deg + var(--fan)*4deg - var(--gather)*23deg))}
.phone-transfer{position:fixed;inset:0 auto auto 0;width:316px;z-index:4;pointer-events:none;transform-origin:center;filter:drop-shadow(0 20px 16px rgb(20 30 65 / .12));will-change:transform,opacity;aspect-ratio:316/666}
.phone-transfer[hidden]{display:none}
.phone-transfer img{width:100%;height:100%;object-fit:contain}
.phone-transfer img+img{position:absolute;inset:0;opacity:0}
.project-stage{--travel:1;perspective:1300px}
.project-stage[data-motion-direction=backward]{--travel:-1}
.stage-inner{perspective:1300px}
.project-scene{--scene-depth:0;transform:translate3d(calc(var(--travel)*140px),85px,-160px) rotateY(calc(var(--travel)*16deg)) rotateX(5deg) scale(.91);transform-origin:50% 55%;transition:opacity .55s,transform .9s cubic-bezier(.2,.7,.2,1),visibility .9s}
.project-scene.is-active{transform:none;opacity:1;visibility:visible}
.project-scene.is-leaving{transform:translate3d(calc(var(--travel)*-120px),-65px,-140px) rotateY(calc(var(--travel)*-15deg)) scale(.89);opacity:0;visibility:visible;pointer-events:none;transition-duration:.4s,.65s,.65s}
.scene-phones{perspective:1100px;transform-style:preserve-3d}
.scene-phone-wrap{position:absolute;width:27%;transform-style:preserve-3d}
.scene-phone-wrap>.scene-phone{position:relative;width:100%;max-width:none;left:auto;top:auto;backface-visibility:hidden;transition:transform .85s cubic-bezier(.16,1,.3,1)}
.project-scene:is(.is-active,.is-leaving) .scene-phone-wrap,.project-scene:is(.is-active,.is-leaving) .scene-phone{will-change:transform}
.sw-0{left:7%;top:28%;z-index:2;transform:translate3d(calc(var(--scene-depth)*-12px),calc(var(--scene-depth)*-44px),0) rotateY(calc(var(--scene-depth)*7deg)) rotateZ(calc(var(--scene-depth)*3deg))}
.sw-1{left:37%;top:21%;z-index:3;transform:translate3d(0,calc(var(--scene-depth)*24px),22px) rotateY(calc(var(--scene-depth)*-5deg))}
.sw-2{left:67%;top:30%;z-index:1;transform:translate3d(calc(var(--scene-depth)*12px),calc(var(--scene-depth)*-28px),0) rotateY(calc(var(--scene-depth)*-7deg)) rotateZ(calc(var(--scene-depth)*-3deg))}
.project-scene .sp-0{transform:translate3d(calc(var(--travel)*-50px),155px,0) rotate(-23deg)}
.project-scene .sp-1{transform:translate3d(0,220px,0) rotate(-4deg);transition-duration:.95s}
.project-scene .sp-2{transform:translate3d(calc(var(--travel)*50px),190px,0) rotate(23deg);transition-duration:1.05s}
.project-scene.is-active .sp-0{transform:translate3d(0,0,0) rotate(-7deg)}
.project-scene.is-active .sp-1{transform:none}
.project-scene.is-active .sp-2{transform:translate3d(0,0,0) rotate(7deg)}
.project-scene.is-leaving .sp-0{transform:translate3d(-60px,-110px,0) rotate(-20deg)}
.project-scene.is-leaving .sp-1{transform:translate3d(0,-165px,0) rotate(5deg)}
.project-scene.is-leaving .sp-2{transform:translate3d(60px,-130px,0) rotate(20deg)}
.scene-word{translate:calc(var(--scene-depth)*-25px) 0}
.project-mobile-art{--mobile-depth:0;--project-entry:1;--phone-entry-0:1;--phone-entry-1:1;--project-exit:0;perspective:900px}
.project-mobile-art img:first-child{translate:0 calc(var(--mobile-depth)*-30px);rotate:calc(var(--mobile-depth)*3deg)}
.project-mobile-art img:last-child{translate:0 calc(var(--mobile-depth)*22px);rotate:calc(var(--mobile-depth)*-2deg)}
@keyframes phone-breathe{0%,100%{transform:translate3d(0,0,0) rotate(-.5deg)}50%{transform:translate3d(0,-12px,0) rotate(.7deg)}}
@media(max-width:760px){
  .has-js .project-mobile-art[data-scroll-reveal]{--project-entry:0;--phone-entry-0:0;--phone-entry-1:0}
  .project-mobile-art.is-motion-visible img{will-change:transform,translate,rotate,scale,opacity}
  .has-js .project-mobile-art[data-scroll-reveal] img{backface-visibility:hidden;transform-origin:50% 70%;opacity:clamp(0,calc(var(--phone-entry)*2 - var(--project-exit)*.6),1);scale:calc(.84 + var(--phone-entry)*.16 - var(--project-exit)*.05)}
  .has-js .project-mobile-art[data-scroll-reveal] img:first-child{--phone-entry:var(--phone-entry-0);translate:calc((1 - var(--phone-entry))*-64px - var(--project-exit)*40px) calc((1 - var(--phone-entry))*145px + var(--mobile-depth)*-30px - var(--project-exit)*90px);rotate:calc((1 - var(--phone-entry))*-18deg + var(--mobile-depth)*3deg - var(--project-exit)*12deg)}
  .has-js .project-mobile-art[data-scroll-reveal] img:last-child{--phone-entry:var(--phone-entry-1);translate:calc((1 - var(--phone-entry))*64px + var(--project-exit)*40px) calc((1 - var(--phone-entry))*190px + var(--mobile-depth)*22px - var(--project-exit)*130px);rotate:calc((1 - var(--phone-entry))*18deg + var(--mobile-depth)*-2deg + var(--project-exit)*12deg)}
  .phone-transfer{display:none!important}
  .hero-phone img{animation-duration:6s}
  .hp-0{transform:translate3d(calc(-90px - var(--fan)*14px + var(--gather)*32px),calc(18px - var(--fan)*22px + var(--gather)*38px),0) rotate(calc(-13deg - var(--fan)*3deg + var(--gather)*13deg))}
  .hp-1{transform:translate3d(calc(-25px - var(--fan)*4px + var(--gather)*2px),calc(-9px - var(--fan)*32px + var(--gather)*40px),10px) rotate(calc(-4deg + var(--gather)*4deg))}
  .hp-2{transform:translate3d(calc(45px + var(--fan)*7px - var(--gather)*8px),calc(7px + var(--fan)*8px - var(--gather)*6px),5px) rotate(calc(8deg + var(--fan)*2deg - var(--gather)*8deg))}
  .hp-3{transform:translate3d(calc(105px + var(--fan)*9px - var(--gather)*23px),calc(32px + var(--fan)*18px - var(--gather)*38px),0) rotate(calc(17deg + var(--fan)*2deg - var(--gather)*15deg))}
}
@media(max-width:370px){
  .hp-0{transform:translate3d(calc(-75px - var(--fan)*10px + var(--gather)*27px),calc(18px - var(--fan)*20px + var(--gather)*35px),0) rotate(calc(-10deg - var(--fan)*2deg + var(--gather)*10deg))}
  .hp-2{transform:translate3d(calc(35px + var(--fan)*5px - var(--gather)*6px),calc(7px + var(--fan)*8px - var(--gather)*6px),5px) rotate(calc(7deg + var(--fan)*2deg - var(--gather)*7deg))}
  .hp-3{transform:translate3d(calc(90px + var(--fan)*7px - var(--gather)*18px),calc(32px + var(--fan)*15px - var(--gather)*32px),0) rotate(calc(14deg + var(--fan)*2deg - var(--gather)*12deg))}
}
@media(prefers-reduced-motion:reduce){
  .has-js .project-mobile-art[data-scroll-reveal]{clip-path:none}
  .has-js .project-mobile-art[data-scroll-reveal] img{opacity:1;scale:1}
  .phone-transfer{display:none!important}
  .hero-phone img{animation:none!important;transform:none!important}
  .hero-phone,.scene-phone,.scene-phone-wrap,.scene-word,.project-mobile-art img{translate:none!important;rotate:none!important;will-change:auto!important}
  .scene-phone-wrap{transform:none!important}
  .project-scene.is-leaving{visibility:hidden}
  .project-scene,.project-scene.is-active{transform:none!important}
}