.cinema{position:relative;height:240svh;background:#191919;--cinema-intro:1;--cinema-detail:0;--cinema-workshop:0;--cinema-finish:0;--cinema-light:0;--cinema-progress:0;--cinema-bg:color-mix(in srgb,#191919, #e9e7e1 calc(var(--cinema-light)*100%));--cinema-ink:color-mix(in srgb,#efeee8,#191919 calc(var(--cinema-light)*100%))}.cinema-stage{height:calc(100svh - 74px);min-height:0;max-height:1200px;position:sticky;top:74px;overflow:hidden;isolation:isolate;background:var(--cinema-bg);color:var(--cinema-ink)}.cinema-media,.cinema-shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.cinema-media{z-index:0}.cinema-poster,.cinema-video,.cinema-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.cinema-video,.cinema-canvas{opacity:0}.cinema.ready .cinema-video,.cinema.ready.decoded .cinema-canvas{opacity:1}.cinema.ready.decoded .cinema-video{opacity:0}.cinema.ready .cinema-poster{visibility:hidden}.cinema-shade{z-index:1;background:linear-gradient(90deg,color-mix(in srgb,var(--cinema-bg),transparent 15%),transparent 49%),linear-gradient(0deg,color-mix(in srgb,var(--cinema-bg),transparent 10%),transparent 28%,transparent 82%,color-mix(in srgb,var(--cinema-bg),transparent 45%))}.cinema-topline{position:absolute;left:4.5vw;right:4.5vw;top:27px;display:flex;justify-content:space-between;z-index:3}.cinema-topline .eyebrow{color:inherit;opacity:.75}.cinema-copy{position:absolute;top:13%;left:4.5vw;z-index:2;pointer-events:none}.cinema-intro{opacity:var(--cinema-intro);transform:translateY(calc((1 - var(--cinema-intro))*-16px))}.cinema-intro h1{font-size:clamp(65px,7.9vw,128px);line-height:.84;letter-spacing:-.035em;font-weight:700}.cinema-intro h1 span{display:block}.cinema-intro .outline-text{color:transparent;-webkit-text-stroke:1px #c6c4be;margin-top:7px}.cinema-detail{opacity:var(--cinema-detail);transform:translateY(calc((1 - var(--cinema-detail))*16px))}.cinema-workshop{opacity:var(--cinema-workshop);transform:translateY(calc((1 - var(--cinema-workshop))*16px))}.cinema-finish{opacity:var(--cinema-finish);transform:translateY(calc((1 - var(--cinema-finish))*16px))}.cinema-copy h2{font-size:clamp(64px,7.5vw,120px);margin-top:18px;line-height:.87}.cinema-copy h2 em{color:inherit}.cinema-copy .eyebrow{color:inherit;opacity:.75}.cinema-bottom{position:absolute;left:4.5vw;right:4.5vw;bottom:36px;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.cinema-shop p{font-size:12px;opacity:.8;margin-bottom:18px}.cinema-shop .btn{min-width:180px;background:#ff5623;color:#171717}.cinema-explore{display:inline-block;margin-left:20px;font-family:var(--mono);font-size:9px;letter-spacing:.04em}.cinema-product{font-family:var(--mono);font-size:10px;display:flex;flex-direction:column;gap:9px;text-align:right}.cinema-product strong{font-weight:400}.cinema-timeline{position:absolute;bottom:0;left:0;right:0;height:2px;background:#8884;z-index:5}.cinema-timeline i{display:block;height:100%;width:calc(var(--cinema-progress)*100%);background:#ff5623}.cinema.is-static{height:auto;--cinema-light:0!important}.cinema.is-static .cinema-stage{position:relative;top:0}.cinema.is-static .cinema-intro{opacity:1;transform:none}.cinema.is-static .cinema-detail,.cinema.is-static .cinema-workshop,.cinema.is-static .cinema-finish,.cinema.is-static .cinema-timeline{display:none}@media(max-width:700px){.cinema{height:230svh}.cinema-stage{min-height:0;max-height:none}.cinema-copy{top:12%;left:20px}.cinema-intro h1{font-size:18.8vw;line-height:.85}.cinema-copy h2{font-size:17.5vw}.cinema-edition{display:none}.cinema-topline{left:20px;right:20px;top:21px}.cinema-topline .eyebrow{font-size:8px}.cinema-poster,.cinema-video,.cinema-canvas{width:145%;max-width:none;height:auto;aspect-ratio:16/9;left:50%;top:57%;transform:translate(-61%,-50%);object-fit:contain;-webkit-mask-image:linear-gradient(0deg,transparent,black 17%,black 83%,transparent);mask-image:linear-gradient(0deg,transparent,black 17%,black 83%,transparent)}.cinema-shade{background:linear-gradient(0deg,var(--cinema-bg),transparent 24%,transparent 75%,color-mix(in srgb,var(--cinema-bg),transparent 45%))}.cinema-bottom{left:20px;right:20px;bottom:25px;gap:12px}.cinema-shop p{font-size:11px;max-width:190px;line-height:1.4;margin-bottom:15px}.cinema-shop .btn{min-width:150px;padding:0 18px;min-height:47px;font-size:11px}.cinema-explore{display:block;margin:14px 0 0;font-size:8px}.cinema-product{font-size:8px;max-width:110px;line-height:1.5;padding-bottom:25px}.cinema-copy .eyebrow{font-size:8px}}@media(prefers-reduced-motion:reduce){.cinema{height:auto;--cinema-light:0!important}.cinema-stage{position:relative;top:0}.cinema-detail,.cinema-workshop,.cinema-finish,.cinema-timeline{display:none}.cinema-intro{opacity:1;transform:none}}.cinema-chapters{position:absolute;bottom:36px;left:50%;transform:translate(-50%);z-index:5;display:flex;border:1px solid color-mix(in srgb,var(--cinema-ink),transparent 72%)}.cinema-chapters button{display:flex;gap:10px;align-items:center;justify-content:center;padding:12px 14px;min-height:45px;border:0;border-right:1px solid color-mix(in srgb,var(--cinema-ink),transparent 72%);background:color-mix(in srgb,var(--cinema-bg),transparent 12%);color:var(--cinema-ink);font:9px var(--mono);cursor:pointer}.cinema-chapters button:last-child{border-right:0}.cinema-chapters button span{font-size:8px;opacity:.5}.cinema-chapters button[aria-pressed=true]{background:#ff5623;color:#191919}.cinema-chapters button:focus-visible{outline:2px solid currentColor;outline-offset:-4px}.cinema-detail h2{font-size:clamp(60px,6.8vw,109px)}.cinema.is-static .cinema-chapters{display:none}@media(max-width:1100px)and (min-width:701px){.cinema-explore{display:block;margin:14px 0 0}.cinema-chapters button{padding:12px 10px;gap:7px}}@media(max-width:700px){.cinema-chapters{bottom:161px;left:20px;right:20px;transform:none}.cinema-chapters button{flex:1;min-height:35px;padding:9px 10px;font-size:9px}.cinema-detail h2{font-size:17vw}}@media(prefers-reduced-motion:reduce){.cinema-chapters{display:none}}.cinema-timeline i{width:100%;transform:scaleX(var(--cinema-progress));transform-origin:left}@media(max-width:700px){.cinema-poster,.cinema-video,.cinema-canvas{width:100%;height:auto;aspect-ratio:1280 / 872;left:0;top:54%;transform:translateY(-50%);object-fit:contain;-webkit-mask-image:linear-gradient(0deg,transparent,black 16%,black 85%,transparent);mask-image:linear-gradient(0deg,transparent,black 16%,black 85%,transparent)}}@media(max-width:700px)and (max-height:720px){.cinema-copy{top:10%}.cinema-poster,.cinema-video,.cinema-canvas{top:50%}.cinema-intro h1{font-size:min(15.7vw,8.6svh)}.cinema-copy h2{font-size:min(15vw,8.5svh)}.cinema-chapters{bottom:127px}.cinema-shop p{margin-bottom:9px}.cinema-explore{margin-top:8px}.cinema-bottom{bottom:16px}}@media(min-width:701px)and (max-width:1024px)and (orientation:portrait){.cinema-poster,.cinema-video,.cinema-canvas{width:100%;height:auto;aspect-ratio:1280 / 872;left:50%;top:54%;transform:translate(-50%,-50%);object-fit:contain;-webkit-mask-image:linear-gradient(0deg,transparent,black 16%,black 85%,transparent);mask-image:linear-gradient(0deg,transparent,black 16%,black 85%,transparent)}.cinema-shade{background:linear-gradient(0deg,var(--cinema-bg),transparent 25%,transparent 80%,color-mix(in srgb,var(--cinema-bg),transparent 65%))}.cinema-copy{top:10%}.cinema-intro h1{font-size:clamp(72px,10.5vw,108px)}}body.is-home:has(.cinema.in-view):before{visibility:hidden}.cinema-media{contain:paint}.cinema-media .cinema-canvas,.cinema-media .cinema-video{will-change:transform}.cinema .cinema-shade{background:none}.cinema-shade:before,.cinema-shade:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;will-change:opacity;background:linear-gradient(90deg,var(--shade-side),transparent 49%),linear-gradient(0deg,var(--shade-foot),transparent 28%,transparent 82%,var(--shade-top))}.cinema-shade:before{--shade-side: #191919d9;--shade-foot: #191919e6;--shade-top: #1919198c;opacity:calc(1 - var(--cinema-light))}.cinema-shade:after{--shade-side: #e9e7e1d9;--shade-foot: #e9e7e1e6;--shade-top: #e9e7e18c;opacity:var(--cinema-light)}@media(max-width:700px),(max-width:1024px)and (orientation:portrait){.cinema-shade:before,.cinema-shade:after{background:linear-gradient(0deg,var(--shade-foot),transparent 24%,transparent 78%,var(--shade-top))}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/cinema.css.map */