.hero3d{position:relative;height:calc(var(--hero-length, 520) * 1vh);background:var(--night);color:var(--on-dark)}.hero3d__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}.js .hero3d:not(.is-static) .hero3d__stage{cursor:grab}.hero3d.is-dragging .hero3d__stage{cursor:grabbing}.hero3d__poster-wrap,.hero3d__poster,.hero3d__canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.hero3d__poster{object-fit:cover;transition:opacity .7s var(--ease-out)}.hero3d__canvas{opacity:0;transition:opacity .7s var(--ease-out)}.hero3d.is-ready .hero3d__canvas{opacity:1}.hero3d.is-ready .hero3d__poster{opacity:0}.hero3d__veil{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,#0e0b0ba8,#0e0b0b4d 36%,#0e0b0b00 58%),linear-gradient(to top,#0e0b0b9e,#0e0b0b00 42%),linear-gradient(to bottom,#0e0b0b80,#0e0b0b00 20%),radial-gradient(130% 95% at 62% 38%,transparent 60%,rgba(14,11,11,.45) 100%)}.hero3d__chapters{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(84px,13vh,150px);pointer-events:none}.hero3d__chapter{position:absolute;left:0;bottom:0;width:min(100%,70rem)}.hero3d__label{display:flex;align-items:center;gap:12px;margin:0 0 22px;color:#f6edead1}.hero3d__label b{color:var(--white)}.hero3d__label i{width:36px;height:1px;background:var(--crimson)}.hero3d__title{margin:0;color:var(--white);font-size:clamp(3.6rem,9.2vw,10.25rem)}.hero3d__line{display:block;overflow:hidden;padding:.04em .06em .1em 0;margin-bottom:-.1em}.hero3d__line>span{display:inline-block;transform:translate3d(0,130%,0)}.hero3d__line--accent{font-style:italic;font-weight:400;color:var(--crimson);padding-left:clamp(.4em,8vw,1.6em)}.hero3d__chapter--light-accent .hero3d__line--accent,.hero3d__chapter--light-accent .hero3d__label b{color:var(--white)}.hero3d__body{max-width:34ch;margin:26px 0 0;font-size:clamp(15px,1.15vw,17.5px);line-height:1.6;color:#f6edeadb}.hero3d__label,.hero3d__body,.hero3d__cta{opacity:0;transform:translate3d(0,14px,0)}.hero3d__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;pointer-events:none}.hero3d__cta .link-arrow{border-color:#f6edea66}.hero3d__chapter.is-active .hero3d__cta{pointer-events:auto}.hero3d__chapter.is-active .hero3d__line>span{transform:none;transition:transform var(--dur-reveal) var(--ease-out)}.hero3d__chapter.is-active .hero3d__line:nth-child(2)>span{transition-delay:90ms}.hero3d__chapter.is-active :is(.hero3d__label,.hero3d__body,.hero3d__cta){opacity:1;transform:none;transition:opacity .6s ease .22s,transform .8s var(--ease-out) .18s}.hero3d__chapter.is-past .hero3d__line>span{transform:translate3d(0,-130%,0);transition:transform .52s var(--ease-in-out)}.hero3d__chapter.is-future .hero3d__line>span{transform:translate3d(0,130%,0);transition:transform .52s var(--ease-in-out)}.hero3d__chapter:is(.is-past,.is-future) :is(.hero3d__label,.hero3d__body,.hero3d__cta){opacity:0;transition:opacity .2s ease,transform 0ms linear .2s}.hero3d__chapter.is-intro .hero3d__line>span{animation:hero-rise 1.1s var(--ease-out) .12s both}.hero3d__chapter.is-intro .hero3d__line:nth-child(2)>span{animation-delay:.22s}.hero3d__chapter.is-intro :is(.hero3d__label,.hero3d__body,.hero3d__cta){animation:hero-fade .9s var(--ease-out) .38s both}@keyframes hero-rise{0%{transform:translate3d(0,130%,0)}to{transform:none}}@keyframes hero-fade{0%{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}html:not(.js) .hero3d__chapter:first-child .hero3d__line>span,html:not(.js) .hero3d__chapter:first-child :is(.hero3d__label,.hero3d__body){transform:none;opacity:1}.hero3d__steps{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%)}.hero3d__steps ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}.hero3d__steps button{display:flex;align-items:center;gap:12px;padding:9px 0;color:#f6edeabd;text-shadow:0 1px 10px rgba(14,11,11,.7);transition:color var(--dur-ui) ease}.hero3d__steps .bar{position:relative;width:28px;height:1px;background:#f6edea47;overflow:hidden;transition:width var(--dur-ui) var(--ease-out)}.hero3d__steps .bar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--crimson);transform-origin:left;transform:scaleX(var(--step-progress, 0))}.hero3d__steps .name{opacity:0;transform:translate(-6px);transition:opacity var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)}.hero3d__steps button[aria-current]{color:var(--white)}.hero3d__steps button[aria-current] .bar{width:56px}.hero3d__steps button[aria-current] .name{opacity:1;transform:none}@media(hover:hover)and (pointer:fine){.hero3d__steps button:hover{color:var(--white)}.hero3d__steps button:hover .name{opacity:1;transform:none}}.hero3d__tod{position:absolute;right:var(--gutter);top:calc(var(--header-h) + 18px);display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(246,237,234,.35)}.hero3d__tod button{position:relative;z-index:1;padding:11px 16px;min-height:40px;color:#f6edeab8;transition:color var(--dur-ui) ease}.hero3d__tod button[aria-pressed=true]{color:var(--white)}.hero3d__tod-thumb{position:absolute;top:0;right:50%;bottom:0;left:0;background:var(--crimson);transition:transform .34s var(--ease-out)}.hero3d[data-light=evening] .hero3d__tod-thumb{transform:translate(100%)}.hero3d__cue{position:absolute;left:50%;bottom:28px;transform:translate(-50%);margin:0;display:grid;justify-items:center;gap:12px;color:#f6edeac7;transition:opacity .4s ease}.hero3d__cue i{position:relative;width:1px;height:46px;background:#f6edea40;overflow:hidden}.hero3d__cue i:after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:var(--white);animation:hero-cue 1.8s var(--ease-in-out) infinite}.hero3d__cue.is-hidden{opacity:0}@keyframes hero-cue{0%{transform:translateY(-16px)}to{transform:translateY(46px)}}.hero3d__hotspot{position:absolute;left:-22px;top:-22px;width:44px;height:44px;display:grid;place-items:center;z-index:2}.hero3d__hotspot i{position:relative;width:14px;height:14px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 2px #ffffffe6;transition:transform var(--dur-press) var(--ease-out)}.hero3d__hotspot i:before,.hero3d__hotspot i:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;border:1.5px solid var(--crimson);animation:hero-ring 2.2s var(--ease-out) infinite}.hero3d__hotspot i:after{animation-delay:1.1s}.hero3d__hotspot:active i{transform:scale(.9)}.hero3d__hotspot .tip{position:absolute;left:50%;top:calc(100% + 6px);transform:translate(-50%,4px);white-space:nowrap;padding:8px 10px;background:var(--paper);color:var(--ink);opacity:0;transition:opacity .16s ease,transform .16s var(--ease-out);pointer-events:none}.hero3d__hotspot:focus-visible .tip{opacity:1;transform:translate(-50%)}@media(hover:hover)and (pointer:fine){.hero3d__hotspot:hover .tip{opacity:1;transform:translate(-50%)}}.hero3d__hotspot.is-offscreen{opacity:0;pointer-events:none}@keyframes hero-ring{0%{transform:scale(1);opacity:.85}to{transform:scale(3.2);opacity:0}}.hero3d__callout{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .4s ease;pointer-events:none;color:var(--white)}.hero3d__callout:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--white);box-shadow:0 0 0 4px #b6244f8c}.hero3d__callout span{padding:7px 10px;background:#161212b8}.hero3d__callout.is-visible{opacity:1;transition-delay:.35s}.hero3d__callout.is-flipped{flex-direction:row-reverse}.hero3d__card{position:absolute;right:calc(var(--gutter) + 96px);top:50%;width:372px;margin-top:-232px;z-index:3;background:var(--paper);color:var(--ink);padding:26px 26px 22px;border-top:3px solid var(--crimson);opacity:0;transform:scale(.96);transform-origin:var(--card-origin, 0 50%);transition:opacity .16s ease,transform .18s var(--ease-out)}.hero3d__card.is-open{opacity:1;transform:none;transition-duration:.22s,.26s}.hero3d__card-label{display:flex;justify-content:space-between;color:var(--ink-muted);margin:0 0 18px;padding-right:40px}.hero3d__card-title{margin:0;font:italic 400 38px/1.02 var(--font-display);letter-spacing:-.015em}.hero3d__card-meta{margin:10px 0 20px;font-size:14px;color:var(--ink-muted)}.hero3d__card-meta{gap:8px 10px;font-size:1rem}.hero3d__card-meta>span:last-child{width:100%;font-size:14px;color:var(--ink-muted)}.hero3d__swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.hero3d__swatches button{position:relative;aspect-ratio:1;background:var(--wash);transition:transform var(--dur-press) var(--ease-out)}.hero3d__swatches button img{width:100%;height:100%;object-fit:cover}.hero3d__swatches button:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border:2px solid var(--crimson);opacity:0;transform:scale(.96);transition:opacity .16s ease,transform .2s var(--ease-out)}.hero3d__swatches button[aria-checked=true]:after{opacity:1;transform:none}.hero3d__swatches button:active{transform:scale(.96)}.hero3d__swatches button.is-loading img{opacity:.55}.hero3d__swatches .name{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;background:#fbf6f3eb;font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-align:left}.hero3d__card .link-arrow{border-color:var(--rule)}.hero3d__card-close{position:absolute;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center}.hero3d__card-close svg{width:16px;height:16px}.hero3d__skip{position:absolute;left:var(--gutter);top:calc(var(--header-h) + 8px);z-index:4;padding:10px 14px;background:var(--paper);color:var(--ink);text-decoration:none;opacity:0;pointer-events:none;transform:translate3d(0,-6px,0);transition:opacity var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)}.hero3d__skip:focus{opacity:1;pointer-events:auto;transform:none}.hero3d__end{position:absolute;bottom:0;left:0;width:1px;height:1px}.hero3d.is-static{height:auto}.hero3d.is-static .hero3d__stage{position:relative;height:auto;min-height:100svh;cursor:auto}.hero3d.is-static :is(.hero3d__canvas,.hero3d__steps,.hero3d__tod,.hero3d__cue,.hero3d__hotspot,.hero3d__callout,.hero3d__card){display:none}.hero3d.is-static .hero3d__poster-wrap{position:absolute;inset:0 0 auto;height:100svh}.hero3d.is-static .hero3d__poster{opacity:1}.hero3d.is-static .hero3d__veil{height:100svh}.hero3d.is-static .hero3d__chapters{position:relative;inset:auto;padding:46svh var(--gutter) 12svh;display:grid;gap:16svh}.hero3d.is-static .hero3d__chapter{position:relative;width:min(100%,60rem)}.hero3d.is-static .hero3d__chapter:not(:first-child){padding-top:40px;border-top:1px solid var(--rule-on-dark)}.hero3d.is-static .hero3d__line>span,.hero3d.is-static :is(.hero3d__label,.hero3d__body,.hero3d__cta){transform:none;opacity:1;pointer-events:auto}@media(max-width:749px){.hero3d__veil{background:linear-gradient(to top,#0e0b0bb3,#0e0b0b4d 34%,#0e0b0b00 54%),linear-gradient(to bottom,#0e0b0b8c,#0e0b0b00 22%)}.hero3d:not(.is-static) .hero3d__chapter{isolation:isolate}.hero3d:not(.is-static) .hero3d__chapter:before{content:"";position:absolute;z-index:-1;top:-72px;bottom:-104px;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);background:linear-gradient(to top,#0e0b0bd6,#0e0b0bcc 70%,#0e0b0b00);opacity:0;transition:opacity .6s ease}.hero3d:not(.is-static) .hero3d__chapter.is-active:before{opacity:1}.hero3d__chapters{bottom:104px}.hero3d__title{font-size:clamp(3.1rem,15.5vw,4.9rem)}.hero3d__line--accent{padding-left:.5em}.hero3d__body{font-size:15px;max-width:30ch;margin-top:18px}.hero3d__steps{top:auto;bottom:30px;right:var(--gutter);transform:none}.hero3d__steps ol{grid-auto-flow:column;gap:6px}.hero3d__steps .num,.hero3d__steps .name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hero3d__steps button{padding:14px 0}.hero3d__steps .bar{width:22px}.hero3d__steps button[aria-current] .bar{width:38px}.hero3d__cue{left:var(--gutter);transform:none;justify-items:start;bottom:30px}.hero3d__cue i{display:none}.hero3d__tod{top:calc(var(--header-h) + 8px)}.hero3d__tod button{padding:9px 12px}.hero3d__card{left:0;right:0;top:auto;bottom:0;width:auto;margin:0;padding:22px var(--gutter) calc(26px + env(safe-area-inset-bottom,0px));transform:translate3d(0,24px,0);transform-origin:50% 100%}.hero3d__card.is-open{transform:none}.hero3d__swatches{grid-template-columns:repeat(6,1fr);gap:8px}.hero3d__swatches .name{display:none}.hero3d__card-title{font-size:28px}.hero3d__cta .btn--xl{min-height:60px}.hero3d__cta .btn--xl .btn__label{padding:0 22px}.hero3d__cta .btn--xl .btn__box{width:60px}}@media(prefers-reduced-motion:reduce){.hero3d__cue i:after,.hero3d__hotspot i:before,.hero3d__hotspot i:after{animation:none}.hero3d__chapter.is-intro :is(.hero3d__line>span,.hero3d__label,.hero3d__body,.hero3d__cta){animation:none}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/section-hero3d.css.map */