/* Native-scroll choreography. No wheel listeners, scroll locking or long pinned sections. */
body{overflow-x:clip}main{overflow:clip}
#cursor{width:13px;height:13px;border-color:#fff9}#cursor:before,#cursor:after{display:none}#cursor.view{width:63px;height:63px}#cursor.pressed{width:8px;height:8px;border-radius:50%}
.click-echo{display:none}
.motion-control{position:fixed;left:18px;bottom:18px;z-index:36;padding:10px 12px;background:#0b0e0deb;color:#f4f5ef;border:1px solid #ffffff38;font-size:7px;display:flex;align-items:center;gap:19px;letter-spacing:.07em}
.motion-control>span{font-size:11px}.motion-control:hover{color:#111;background:#eee}.motion-control[aria-pressed=true]{background:#eee;color:#111}
.hero-intro h1>span:first-child{transform:translate3d(calc(var(--hero-exit,0) * -70px),calc(var(--hero-exit,0) * -22px),0)}
.hero-intro h1 .name-last{transform:translate3d(calc(var(--hero-exit,0) * 95px),calc(var(--hero-exit,0) * 16px),0)}
.hero-intro{opacity:calc(1 - var(--hero-exit,0) * .58)}
.hero-peek{transform:translate3d(0,calc(var(--hero-exit,0) * -50px),0)}
.film-gate{height:108svh;min-height:680px;max-height:1200px;background:#080909;overflow:hidden;--aperture:0%;--film-zoom:1;--split:0px;--portal-z:0px}
.film-aperture{position:absolute;inset:0;clip-path:inset(var(--aperture) calc(var(--aperture) * .85));z-index:-2;overflow:hidden;background:#171515;transform:perspective(1400px) rotateX(var(--film-turn,0deg));transform-origin:50% 60%;will-change:clip-path,transform}
.film-aperture>video{position:absolute;inset:-7%;width:114%;height:114%;object-fit:cover;transform:translate3d(var(--film-mx,0px),calc(var(--film-y,0px) + var(--film-my,0px)),0) scale(var(--film-zoom,1));transition:translate .25s}
.film-aperture .film-shade{z-index:1;background:linear-gradient(90deg,#0008,transparent 70%),linear-gradient(180deg,#0006,transparent 30%,#0009)}
.film-top,.film-bottom{z-index:4}.film-top{top:42px}.film-copy{z-index:3;top:29%;left:var(--gutter);right:var(--gutter);perspective:900px;pointer-events:none}
.film-copy h2{font-size:clamp(80px,11.6vw,195px);line-height:.9;transform:rotateY(var(--film-ry,0deg)) rotateX(var(--film-rx,0deg));transform-origin:35% 50%}
.film-copy h2>span,.film-copy h2>em{display:block;will-change:transform}.film-copy h2>span{transform:translate3d(calc(var(--split) * -1),0,0)}.film-copy h2>em{transform:translate3d(var(--split),0,0);margin-left:9%}
.film-copy>p{transform:translateY(var(--eyebrow-y,0px));margin-bottom:35px}
.portal-depth{position:absolute;inset:0;pointer-events:none;perspective:750px;perspective-origin:var(--portal-px,65%) var(--portal-py,50%);z-index:2;opacity:var(--portal-opacity,.35);overflow:hidden}
.portal-depth>i{position:absolute;inset:12% 9%;border:1px solid #ffffff55;transform:translateZ(calc(var(--portal-z,0px) - var(--layer) * 175px)) rotateZ(var(--portal-spin,0deg));transform-style:preserve-3d}
.portal-depth>i:before,.portal-depth>i:after{content:'+';position:absolute;color:#ffffffc0;font:24px/1 var(--mono);top:-12px;left:-9px}.portal-depth>i:after{top:auto;left:auto;right:-9px;bottom:-12px}
.portal-depth>i:nth-child(1){--layer:0}.portal-depth>i:nth-child(2){--layer:1}.portal-depth>i:nth-child(3){--layer:2}.portal-depth>i:nth-child(4){--layer:3}.portal-depth>i:nth-child(5){--layer:4}
.film-phase{position:absolute;right:var(--gutter);top:24%;z-index:3;display:flex;flex-direction:column;align-items:flex-end;font-size:6px;letter-spacing:.09em;gap:7px;color:#deded5;pointer-events:none}.film-phase b{font:400 53px/.95 var(--display);letter-spacing:-.075em;color:white}
.film-open{z-index:5;top:auto;bottom:16%;width:120px;height:120px;background:#0003}.film-bottom{align-items:center;gap:24px}.film-bottom>a{margin-left:auto;white-space:nowrap;color:#fff}.film-bottom button{padding:7px 0;white-space:nowrap}
.work{overflow:clip;overflow-clip-margin:2px}.gallery-toolbar{position:sticky}
.work-heading h2{perspective:1000px}.work-heading h2>span{display:inline-block;transform:translate3d(var(--work-shift,0px),0,0)}
.portfolio-grid .feature-image{transform:perspective(1100px) translate3d(0,var(--flow-y,0px),0) rotateX(calc(var(--card-rx,0deg) + var(--flow-rx,0deg))) rotateY(var(--card-ry,0deg)) scale(var(--flow-scale,1));transform-origin:50% 80%;transition:transform .15s ease-out;will-change:transform}
.portfolio-grid .feature-image>img{transform:scale(1.1) translate3d(0,var(--art-y,0px),0);transition:transform .3s ease-out,opacity .5s}
.portfolio-grid .feature-open:hover .feature-image>img{transform:scale(1.13) translate3d(0,var(--art-y,0px),0)}
.portfolio-grid.overview .feature-image{transform:perspective(1100px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));will-change:auto}
.portfolio-grid.overview .feature-image>img{transform:scale(1.025)}
.threshold .scroll-words>span:nth-child(2){transform:translateX(var(--statement-shift,0px))}.threshold .scroll-words>em{transform:translateX(calc(var(--statement-shift,0px) * -.6))}
.threshold-symbol{transform:rotate(var(--spin,0deg)) scale(var(--symbol-scale,1))}
.kinetic-tape{transform:rotate(var(--tape-tilt,0deg)) scale(1.04);position:relative;z-index:3}
.practice-layout .portrait-frame{transform:perspective(1200px) rotateY(var(--portrait-ry,0deg)) rotate(calc(-3deg + var(--portrait-rz,0deg)))}
body[data-motion-paused=true] .hero-intro{opacity:1}
html:has(body[data-motion-paused=true]){scroll-behavior:auto}body[data-motion-paused=true] *,body[data-motion-paused=true] *:before,body[data-motion-paused=true] *:after{animation-play-state:paused!important;transition:none!important}
body[data-motion-paused=true] .hero-intro h1>span,body[data-motion-paused=true] .hero-peek,body[data-motion-paused=true] .film-copy h2,body[data-motion-paused=true] .film-copy h2>*,body[data-motion-paused=true] .film-copy>p,body[data-motion-paused=true] .feature-image,body[data-motion-paused=true] .feature-image>img,body[data-motion-paused=true] .scroll-words>*,body[data-motion-paused=true] .kinetic-tape,body[data-motion-paused=true] .portrait-frame,body[data-motion-paused=true] .work-heading h2>span{transform:none!important}
body[data-motion-paused=true] .film-aperture{transform:none;clip-path:none}body[data-motion-paused=true] .portal-depth{display:none}
@media(max-width:650px){
 .motion-control{bottom:13px;left:13px;padding:9px 10px;font-size:6px;gap:12px}
 .hero-intro h1>span:first-child{transform:translate3d(calc(var(--hero-exit,0) * -25px),0,0)}.hero-intro h1 .name-last{transform:translate3d(calc(var(--hero-exit,0) * 30px),0,0)}
 .film-gate{height:95svh;min-height:650px;max-height:850px}.film-top{top:28px;font-size:5px}.film-top>span:last-child{max-width:130px}.film-copy{top:30%}.film-copy h2{font-size:21vw;line-height:.95}.film-copy h2>em{margin-left:0}.film-copy>p{font-size:6px;margin-bottom:24px}.film-phase{top:15%;font-size:5px}.film-phase b{font-size:37px}.film-phase>span:last-child{display:none}.film-open{bottom:117px;width:87px;height:87px;right:22px}.film-open>span{font-size:5px}.film-open b{font-size:22px}
 .film-bottom{flex-wrap:wrap;gap:12px;bottom:33px;padding-top:14px;font-size:5px}.film-bottom>span{max-width:none;width:100%}.film-bottom>a{margin-left:0;margin-right:auto}.film-bottom button{font-size:5px}
 .portal-depth>i{inset:13% 7%}.portal-depth>i:before,.portal-depth>i:after{font-size:16px}.portfolio-grid .feature-image{will-change:auto}
}
@media(prefers-reduced-motion:reduce){#pointer-plexus{display:none}.hero-intro{opacity:1}.hero-intro h1>span,.hero-peek,.film-copy h2,.film-copy h2>*,.film-aperture,.feature-image,.feature-image>img,.scroll-words>*,.kinetic-tape,.portrait-frame,.work-heading h2>span{transform:none!important}.film-aperture{clip-path:none}.portal-depth{display:none}}
