.h3d{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#01030a;color:#eaf1fa;isolation:isolate;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.h3d__stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.h3d__stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}.h3d__vig{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 40%,rgba(1,3,10,.72) 100%)}.h3d__ui{position:absolute;inset:auto 0 0;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:clamp(18px,3vw,48px);padding:0 clamp(20px,5vw,90px) clamp(28px,5vh,54px);pointer-events:none}.h3d__ui>*{pointer-events:auto}.h3d__tintwrap{font-family:Poppins,Inter,sans-serif;font-weight:500;line-height:1.04;letter-spacing:-.01em;text-transform:lowercase;font-size:clamp(26px,4.2vw,60px)}.h3d__frame{display:block;color:#9fb0c8}.h3d__tint{display:block;color:#cfe3f2;transition:color .9s ease}.h3d__tint:first-letter{text-transform:uppercase}.h3d__tint:after{content:" tint."}.h3d__center{justify-self:center;display:grid;place-items:center}.h3d__center>*{grid-area:1 / 1}.h3d__prompt{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,18px)}.h3d__swipelabel{font-weight:300;font-size:clamp(9.5px,.72vw,11px);letter-spacing:.34em;text-transform:uppercase;color:#8ea6cc}.h3d__swipe{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);touch-action:pan-y;-webkit-user-select:none;user-select:none;width:clamp(230px,26vw,330px);height:clamp(54px,5.4vw,72px);padding:clamp(5px,.5vw,7px);border:0;border-radius:999px;cursor:pointer;color:#fff;background:#101114b8;box-shadow:inset 0 0 0 1px #ffffff12,0 18px 44px #00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .4s ease,transform .4s ease}.h3d__swipe:hover{box-shadow:inset 0 0 0 1px #ffffff29,0 18px 44px #00000080}.h3d__swipe:focus-visible{outline:2px solid #cfe3f2;outline-offset:3px}.h3d__swipe{flex-direction:row-reverse}.h3d__swipe--left{flex-direction:row}.h3d__knob{flex:0 0 auto;display:grid;place-items:center;width:clamp(44px,4.4vw,58px);aspect-ratio:1;border-radius:50%;background:radial-gradient(120% 120% at 32% 22%,#4a4d55,#232529 62%,#141518);box-shadow:inset 0 1px #ffffff29,0 6px 16px #0000008c;transition:transform .32s cubic-bezier(.2,.8,.3,1)}.h3d__swipe.is-dragging .h3d__knob{transition:none}.h3d__knob svg{width:44%;height:44%;stroke:#f4f7fb;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.h3d__swipe--left .h3d__knob svg{transform:scaleX(-1)}.h3d__chevs{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.5vw,22px)}.h3d__chevs i{display:block;width:clamp(13px,1.3vw,18px);aspect-ratio:1;opacity:.3;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);animation:h3dWave 1.9s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * .17s)}.h3d__swipe--left .h3d__chevs i{transform:rotate(-135deg)}@keyframes h3dWave{0%,62%,to{opacity:.3;filter:none}16%{opacity:1;filter:drop-shadow(0 0 9px rgba(214,232,255,.9))}}.h3d__copy{justify-self:end;text-align:right;max-width:34ch}.h3d__capt,.h3d__capb{font-family:var(--font-body,"Poppins"),Poppins,Inter,sans-serif}.h3d__capt{margin:0;font-weight:500;font-size:clamp(13px,1.05vw,16px);letter-spacing:.005em;line-height:1.5;color:#eaf1fa}.h3d__capb{margin:8px 0 0;font-weight:300;font-size:clamp(11.5px,.85vw,13px);line-height:1.7;letter-spacing:.015em;color:#7286a0}.h3d__load{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#01030a;transition:opacity 1s ease}.h3d__load b{font-family:Poppins,Inter,sans-serif;font-weight:500;font-size:12px;letter-spacing:.52em;text-indent:.52em;color:#c6d4ff}.h3d__bar{width:132px;height:1px;background:#96b4d729;overflow:hidden}.h3d__bar i{display:block;height:100%;width:0;background:#c6d4ff;transition:width .35s ease}.h3d__load.is-done{opacity:0;pointer-events:none}.h3d__err{font-weight:300;font-size:10px;letter-spacing:.24em;color:#7286a0;text-align:center}.h3d__cta{transform:translateY(8px);display:inline-flex;align-items:center;justify-content:center;min-width:clamp(150px,15vw,190px);height:clamp(46px,4.4vw,56px);padding:0 clamp(22px,2.4vw,32px);border-radius:999px;text-decoration:none;font-family:Poppins,Inter,sans-serif;font-weight:500;font-size:clamp(13px,1vw,15px);letter-spacing:.01em;color:#f4f7fb;background:#26282dc7;box-shadow:inset 0 0 0 1px #ffffff17,0 16px 40px #00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1),background .3s ease,box-shadow .3s ease,visibility 0s .6s}.h3d__cta:hover{background:#3a3d44d9;box-shadow:inset 0 0 0 1px #fff3,0 16px 40px #00000080}.h3d__cta:focus-visible{outline:2px solid #cfe3f2;outline-offset:3px}.h3d__ui{opacity:0;transition:opacity .9s ease .1s}.h3d.is-ready .h3d__ui{opacity:1}.h3d.is-open .h3d__prompt{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}.h3d.is-open .h3d__cta{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:.15s,.15s,0s,0s,0s}@media(max-width:860px){.h3d__ui{grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(14px,2.4vh,22px);padding-bottom:calc(clamp(20px,3.4vh,34px) + env(safe-area-inset-bottom))}.h3d__tintwrap{font-size:clamp(24px,7.4vw,40px);text-align:center}.h3d__copy{justify-self:center;text-align:center;max-width:38ch}.h3d__capt{font-size:13px}.h3d__capb{font-size:11px;line-height:1.65}.h3d__center{order:3}.h3d__swipe{width:min(300px,78vw);height:58px}.h3d__swipelabel{font-size:9.5px}.h3d__cta{height:50px;min-width:160px}}@media(max-width:860px)and (max-height:700px){.h3d__capb{display:none}.h3d__tintwrap{font-size:clamp(21px,6.4vw,30px)}}@media(prefers-reduced-motion:reduce){.h3d__chevs i{animation:none;opacity:.5}}.h3d__spinhint{position:absolute;left:50%;top:63%;translate:-50% 0;z-index:4;width:clamp(46px,4.6vw,64px);opacity:0;pointer-events:none;transition:opacity .6s ease}.h3d.is-open .h3d__spinhint{opacity:.72}.h3d.has-spun .h3d__spinhint{opacity:0}.h3d__spinhint svg{width:100%;height:auto;overflow:visible;will-change:transform}.h3d__spinhint path{fill:none;stroke:#dbe8f8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(150,190,240,.45))}.h3d__spinhint .h3d__arc{opacity:.8}.h3d.is-open .h3d__stage{cursor:grab}.h3d.is-open.is-spinning .h3d__stage{cursor:grabbing}@media(prefers-reduced-motion:reduce){.h3d__spinhint svg{transform:none!important}}.h3d__swipehint{position:absolute;left:50%;top:63%;translate:-50% 0;z-index:4;width:clamp(84px,8.4vw,116px);opacity:0;pointer-events:none;transition:opacity .6s ease}.h3d.is-ready:not(.is-open) .h3d__swipehint{opacity:.72}.h3d__swipehint svg{width:100%;height:auto;overflow:visible}.h3d__swipehint path{fill:none;stroke:#dbe8f8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(150,190,240,.45))}.h3d__sarr{opacity:0;transition:opacity .4s ease}.h3d.cue-left .h3d__sarr--l,.h3d.cue-right .h3d__sarr--r{animation:h3dSarr 2.2s ease-in-out infinite}.h3d__shand{will-change:transform;transform-origin:46px 22px}.h3d.cue-left .h3d__shand{animation:h3dShandL 2.2s ease-in-out infinite}.h3d.cue-right .h3d__shand{animation:h3dShandR 2.2s ease-in-out infinite}.h3d.cue-both .h3d__sarr--r{animation:h3dSarrR 4.4s ease-in-out infinite}.h3d.cue-both .h3d__sarr--l{animation:h3dSarrL 4.4s ease-in-out infinite}.h3d.cue-both .h3d__shand{animation:h3dShandRL 4.4s ease-in-out infinite}@keyframes h3dShandL{0%{transform:translate(0);opacity:0}12%{transform:translate(0);opacity:1}55%{transform:translate(-22px) rotate(-6deg);opacity:1}72%{transform:translate(-22px) rotate(-6deg);opacity:0}73%,to{transform:translate(0);opacity:0}}@keyframes h3dShandR{0%{transform:translate(0);opacity:0}12%{transform:translate(0);opacity:1}55%{transform:translate(22px) rotate(6deg);opacity:1}72%{transform:translate(22px) rotate(6deg);opacity:0}73%,to{transform:translate(0);opacity:0}}@keyframes h3dSarr{0%,12%{opacity:0}45%{opacity:.85}72%,to{opacity:0}}@keyframes h3dShandRL{0%{transform:translate(0);opacity:0}6%{transform:translate(0);opacity:1}27.5%{transform:translate(22px) rotate(6deg);opacity:1}36%{transform:translate(22px) rotate(6deg);opacity:0}36.5%,50%{transform:translate(0);opacity:0}56%{transform:translate(0);opacity:1}77.5%{transform:translate(-22px) rotate(-6deg);opacity:1}86%{transform:translate(-22px) rotate(-6deg);opacity:0}86.5%,to{transform:translate(0);opacity:0}}@keyframes h3dSarrR{0%,6%{opacity:0}22.5%{opacity:.85}36%,to{opacity:0}}@keyframes h3dSarrL{0%,56%{opacity:0}72.5%{opacity:.85}86%,to{opacity:0}}@media(prefers-reduced-motion:reduce){.h3d__sarr,.h3d__shand{animation:none!important}.h3d.cue-left .h3d__sarr--l,.h3d.cue-right .h3d__sarr--r,.h3d.cue-both .h3d__sarr{opacity:.55}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/hero-3d.css.map */