.scroll-spin{--ss-track-height: 300vh;--ss-card-w: 390px;--ss-card-h: 600px;--ss-bg: transparent;--ss-text: #111;--ss-muted: #6b6b6b;--ss-scale: 1;--ss-cw: calc(var(--ss-card-w) * var(--ss-scale));--ss-ch: calc(var(--ss-card-h) * var(--ss-scale));--ss-perspective: 1400px;position:relative;height:var(--ss-track-height);background:var(--ss-bg);color:var(--ss-text)}.scroll-spin__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.scroll-spin__heading{margin:0 0 clamp(8px,2vh,24px);text-align:center;padding:0 24px;z-index:2}.scroll-spin__title{margin:0;font-size:clamp(1.5rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.02em;font-weight:600}.scroll-spin__subtitle{margin:8px 0 0;font-size:clamp(.875rem,1.4vw,1rem);color:var(--ss-muted)}.scroll-spin__scene{position:relative;width:100%;flex:1 1 auto;min-height:0;perspective:var(--ss-perspective);perspective-origin:50% 45%}.scroll-spin__ring{position:absolute;left:50%;top:50%;width:var(--ss-cw);height:var(--ss-ch);margin-left:calc(var(--ss-cw) / -2);margin-top:calc(var(--ss-ch) / -2);transform-style:preserve-3d;transform:translateZ(calc(var(--ss-radius, 500px) * -1)) rotateY(var(--ss-rot, 0deg));will-change:transform}.scroll-spin__item{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transform:rotateY(var(--ss-angle)) translateZ(var(--ss-radius, 500px))}.scroll-spin__item>img,.scroll-spin__item>svg{position:relative;z-index:1;transform:translateZ(.6px);display:block;width:100%;height:100%;object-fit:contain;opacity:var(--ss-opacity, 1);filter:brightness(var(--ss-bright, 1));backface-visibility:hidden;transition:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.scroll-spin__slab{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;pointer-events:none}.scroll-spin__slab:not([data-ss-masked]){display:none}.scroll-spin__layer{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--ss-body, #9aa0a6);transform:translateZ(calc(var(--ss-depth, 20px) * var(--ss-i) * -1));-webkit-mask-image:var(--ss-mask);mask-image:var(--ss-mask);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;filter:brightness(var(--ss-shade, .85));opacity:var(--ss-opacity, 1)}.scroll-spin__shadow{position:absolute;left:50%;top:calc(50% + (var(--ss-ch) / 2) - 12px);width:calc(var(--ss-cw) * 1.4);height:36px;transform:translate(-50%);background:radial-gradient(50% 50% at 50% 50%,#00000038,#0000 70%);pointer-events:none}.scroll-spin__caption{position:relative;z-index:2;min-height:1.6em;margin-top:clamp(4px,1.5vh,16px);font-size:clamp(.875rem,1.6vw,1.0625rem);letter-spacing:.08em;text-transform:uppercase;text-align:center}.scroll-spin__dots{display:flex;gap:8px;justify-content:center;margin:12px 0 clamp(8px,3vh,32px);z-index:2}.scroll-spin__dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.22;transition:opacity .2s ease,transform .2s ease}.scroll-spin__dot[data-active=true]{opacity:1;transform:scale(1.35)}@media(max-width:1199px){.scroll-spin{--ss-scale: .85;--ss-perspective: 1190px}}@media(max-width:989px){.scroll-spin{--ss-scale: .72;--ss-perspective: 1010px}}@media(max-width:749px){.scroll-spin{--ss-scale: .53;--ss-perspective: 530px}}@media(max-width:479px){.scroll-spin{--ss-scale: .46;--ss-perspective: 460px}}@media(prefers-reduced-motion:reduce){.scroll-spin{height:auto!important}.scroll-spin__stage{position:static;height:auto;padding:48px 0}.scroll-spin__scene{perspective:none;height:auto;padding:0 16px}.scroll-spin__ring{position:static;width:auto;height:auto;margin:0;transform:none!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px}.scroll-spin__item{position:static;transform:none!important;height:var(--ss-ch)}.scroll-spin__item>img,.scroll-spin__item>svg{opacity:1!important;filter:none!important}.scroll-spin__shadow,.scroll-spin__dots,.scroll-spin__slab{display:none}}.scroll-spin:not([data-ss-ready]) .scroll-spin__ring{transform:none;position:static;width:auto;height:auto;margin:0;display:flex;gap:16px;justify-content:center;overflow-x:auto}.scroll-spin:not([data-ss-ready]) .scroll-spin__item{position:relative;inset:auto;flex:0 0 var(--ss-cw);height:var(--ss-ch);transform:none}.scroll-spin:not([data-ss-ready]) .scroll-spin__slab{display:none}.scroll-spin:not([data-ss-ready]){height:auto}.scroll-spin:not([data-ss-ready]) .scroll-spin__stage{position:static;height:auto;padding:48px 0}
/*# sourceMappingURL=/cdn/shop/t/4/assets/scroll-spin.css.map */