.cinema{position:relative;isolation:isolate;--p:0;--intro:1;--middle:0;--outro:0;--sequence:0;--board:1}.cinema-stage{height:100svh;min-height:650px;position:relative;overflow:hidden;isolation:isolate}.cinema.motion-ready{height:280svh}.cinema.motion-ready .cinema-stage{position:sticky;top:0;min-height:0}.hero{background:#080a0b}.hero .cinema-stage:before{content:'';position:absolute;inset:10% -15%;background:radial-gradient(ellipse at 52% 52%,#9a496c20,transparent 62%);pointer-events:none}.hero-intro{position:absolute;top:16%;left:0;right:0;text-align:center;z-index:4;opacity:var(--intro);color:#9da3a4}.depth-word{position:absolute;left:0;right:0;top:19%;text-align:center;font-size:24vw;line-height:1;letter-spacing:-.09em;font-weight:600;white-space:nowrap;color:#d9dde0;z-index:1;transform:translate3d(0,calc(var(--p) * -230px),0) scale(calc(1 + var(--p)*.8));opacity:var(--intro);pointer-events:none}.depth-outline{z-index:3;color:transparent;-webkit-text-stroke:1px #d9dde077;mask-image:linear-gradient(transparent 30%,#000 85%)}.hero-product{position:absolute;inset:19% -2% 12%;z-index:2;opacity:var(--board);display:grid;place-items:center;transform:translate3d(calc(var(--p) * -12vw),calc(var(--p) * -100px),0) rotate(calc(-9deg - var(--p)*16deg)) scale(calc(1 + var(--p)*1.5));will-change:transform,opacity}.hero-product img{width:min(1250px,100vw);max-width:none;filter:drop-shadow(0 55px 60px #0007)}.hero-caption{position:absolute;bottom:12%;left:7vw;right:7vw;z-index:6;display:flex;justify-content:space-between;align-items:end;opacity:var(--intro);transform:translate3d(0,calc(var(--p)*120px),0)}.hero-caption p{font-size:clamp(32px,4vw,64px);letter-spacing:-.06em;line-height:1.06;color:#f1f2ef;font-weight:600}.hero-caption p span{color:#8c9197}.hero-caption .text-link{font-size:12px}.sequence-art{position:absolute;inset:5% 15%;z-index:3;pointer-events:none}.sequence-art img,.sequence-art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.sequence-art canvas{opacity:0}.sequence-art canvas.is-drawn{opacity:1}.sequence-art:has(canvas.is-drawn) .scene-poster{opacity:0}.hero .sequence-art{inset:5% 10%;opacity:var(--sequence);transform:translate3d(calc((var(--p) - .5)*-12vw),0,0) rotate(calc(-15deg + var(--p)*20deg)) scale(calc(.9 + var(--p)*.1))}.hero-second{position:absolute;inset:0;opacity:var(--middle);z-index:1;pointer-events:none;display:flex;align-items:center;padding-left:8vw;gap:20px}.hero-number{font-size:43vw;font-weight:600;letter-spacing:-.12em;line-height:.8;color:#a8bab6}.hero-second-label{font-size:4vw;align-self:center;transform:translateY(20vh);letter-spacing:-.07em}.hero-end{position:absolute;bottom:15%;left:7vw;z-index:5;opacity:var(--outro);pointer-events:none;transform:translateY(calc((1 - var(--outro))*40px))}.hero-end.is-active{pointer-events:auto}.hero-end p{font-size:clamp(55px,8vw,120px);font-weight:600;line-height:.96;letter-spacing:-.07em;color:var(--ink)}.hero-end .text-link{margin-top:24px}.cinema-foot{position:absolute;left:5vw;right:5vw;bottom:28px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:#8b9196;z-index:6}.scroll-cue{opacity:var(--intro)}.scroll-cue span{margin-left:15px}.scene-position{font-variant-numeric:tabular-nums}.hero:not(.motion-ready) .scene-position{visibility:hidden}.hero:not(.motion-ready) .sequence-art,.hero:not(.motion-ready) .hero-second,.hero:not(.motion-ready) .hero-end{display:none}
.diy{background:#131518}.diy.motion-ready{height:220svh}.chapter-heading{position:absolute;z-index:5;left:6vw;right:6vw;top:9%;display:flex;justify-content:space-between;align-items:baseline}.chapter-heading h2{font-size:45px;letter-spacing:-.055em}.chapter-heading .eyebrow{color:var(--muted)}.diy-depth{position:absolute;inset:20% 0 auto;text-align:center;font-size:30vw;line-height:1;letter-spacing:-.08em;font-weight:600;color:#292a30;transform:translate3d(calc(var(--p)*-70px),calc(var(--p)*-40px),0) scale(calc(1 + var(--p)*.1));z-index:1}.diy .sequence-art{inset:9% 6% 13%;transform:rotate(calc(-5deg + var(--p)*10deg)) scale(calc(1 + var(--p)*.08));z-index:2}.diy .product-bottom{bottom:45px}.assembly-label{position:absolute;z-index:4;right:7vw;top:38%;display:grid;gap:60px;font-size:8px;letter-spacing:.14em;color:#b0b8bc;opacity:var(--p);transform:translateY(calc((1 - var(--p))*30px))}.assembly-label span:before{content:'';display:inline-block;width:32px;height:1px;background:#8c979a;margin-right:12px;vertical-align:middle}
@media(max-width:700px){.cinema-stage{min-height:700px}.cinema.motion-ready{height:270svh}.hero-intro{top:17%;padding:0 20px}.hero-intro .eyebrow{font-size:7px;letter-spacing:.16em}.depth-word{top:25%;font-size:26vw;letter-spacing:-.085em}.hero-product{inset:25% -35% 16%;transform:translate3d(calc(var(--p)*-15vw),calc(var(--p)*-100px),0) rotate(calc(-20deg - var(--p)*25deg)) scale(calc(1 + var(--p)*1.5))}.hero-product img{width:170vw}.hero-caption{bottom:13%;left:25px;right:25px;display:block}.hero-caption p{font-size:39px;line-height:1.05}.hero-caption .text-link{font-size:11px;margin-top:18px;padding-bottom:9px}.cinema-foot{bottom:22px;left:24px;right:24px;font-size:6px}.hero .sequence-art{inset:12% -2% 16%;transform:translate3d(calc((var(--p) - .5)*-8vw),0,0) rotate(calc(-15deg + var(--p)*20deg)) scale(.94)}.hero-second{padding-left:0;justify-content:center;display:block;padding-top:25%}.hero-number{font-size:94vw;display:block;color:#8fa19d;transform:translateX(-3vw)}.hero-second-label{position:absolute;left:25px;bottom:15%;font-size:45px;transform:none;color:#d1d8d7}.hero-end{bottom:14%;left:24px}.hero-end p{font-size:52px}.hero-end .text-link{margin-top:18px}.diy.motion-ready{height:210svh}.chapter-heading{left:24px;right:24px;top:8%;display:block}.chapter-heading h2{font-size:45px;margin-top:18px}.diy-depth{top:31%;font-size:42vw;transform:translate3d(calc(var(--p)*-35px),calc(var(--p)*-40px),0) scale(calc(1 + var(--p)*.1));color:#34323a}.diy .sequence-art{inset:20% -22% 20%;transform:rotate(calc(-12deg + var(--p)*18deg)) scale(calc(1.06 + var(--p)*.12))}.assembly-label{right:20px;top:48%;gap:40px;font-size:6px}.assembly-label span:before{width:15px;margin-right:6px}.diy .product-bottom{left:24px;right:24px;bottom:35px}.diy .product-bottom>div>span{max-width:180px}.diy .product-bottom .button{padding-inline:16px;font-size:10px;gap:10px}}
@media(max-width:360px){.hero-caption p{font-size:34px}.hero-intro .eyebrow{font-size:6px}.cinema-foot{font-size:5px}.hero-caption{bottom:12%}.chapter-heading h2{font-size:39px}.diy .sequence-art{inset:20% -25% 27%}.diy .product-bottom{bottom:25px}.assembly-label{display:none}.hero-end p{font-size:46px}}
@media(max-height:600px) and (min-width:701px){.hero-caption p{font-size:30px}.chapter-heading h2{font-size:30px}.hero-intro{top:14%}.cinema-foot{bottom:12px}.product-bottom,.diy .product-bottom{bottom:22px}.hero-caption{bottom:10%}}
@media(prefers-reduced-motion:reduce){.cinema.motion-ready{height:auto}.cinema.motion-ready .cinema-stage{position:relative;min-height:700px}.hero .sequence-art,.hero-second,.hero-end{display:none!important}.hero-product,.depth-word,.hero-caption,.diy .sequence-art,.diy-depth{transform:none!important;opacity:1!important}.assembly-label,.scroll-cue,.scene-position{display:none!important}}
@media(max-width:700px){.hero-product{inset:18% -30% 17%;transform:translate3d(calc(var(--p)*-15vw),calc(var(--p)*-100px),0) rotate(calc(10deg - var(--p)*25deg)) scale(calc(1 + var(--p)*1.5))}.hero-product img{width:145vw}}
.hero-product{display:flex;align-items:center;justify-content:center}.hero-product img{flex-shrink:0}