.vss{--vss-maxw: 1240px;--vss-gutter: clamp(16px, 4vw, 56px);--vss-ease: cubic-bezier(.22, .61, .36, 1);--vss-top: 0px;--vss-ink-2: rgba(244, 246, 249, .78);--vss-ink-3: rgba(244, 246, 249, .6);--vss-line: rgba(244, 246, 249, .14);--vss-dot: rgba(244, 246, 249, .26);--vss-glass: rgba(10, 18, 28, .64);--vss-glow: rgba(141, 174, 214, .22);--vss-vignette: rgba(10, 18, 28, .7);position:relative;height:calc(100vh + var(--vss-steps, 0) * var(--vss-step-vh, 90) * 1vh);height:calc(100svh + var(--vss-steps, 0) * var(--vss-step-vh, 90) * 1svh);background:var(--vss-bg);color:var(--vss-ink)}@supports (color: color-mix(in srgb,red 50%,blue)){.vss{--vss-ink-2: color-mix(in srgb, var(--vss-ink) 78%, transparent);--vss-ink-3: color-mix(in srgb, var(--vss-ink) 60%, transparent);--vss-line: color-mix(in srgb, var(--vss-ink) 14%, transparent);--vss-dot: color-mix(in srgb, var(--vss-ink) 26%, transparent);--vss-glass: color-mix(in srgb, var(--vss-bg) 64%, transparent);--vss-glow: color-mix(in srgb, var(--vss-accent) 22%, transparent);--vss-vignette: color-mix(in srgb, var(--vss-bg) 70%, transparent)}}.vss__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(55% 55% at var(--vss-gx, 72%) 52%,var(--vss-glow) 0%,transparent 70%),var(--vss-bg)}.vss__stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:radial-gradient(80% 70% at 50% 52%,transparent 40%,var(--vss-vignette) 100%);opacity:var(--dim, 0);pointer-events:none}.vss__frame{position:absolute;z-index:2;left:0;top:0;width:min(42vw,calc(80vh * var(--vss-ar, .75)));aspect-ratio:var(--vss-ar, .75);transform:translate(calc(50vw + min(50vw,620px)/2 - 50%),calc(50vh - 50%));transform-origin:0 0;will-change:transform;pointer-events:none}.vss.is-ready .vss__frame{aspect-ratio:auto}.vss__pic{position:absolute;top:0;right:0;bottom:0;left:0}.vss__tilt{position:absolute;top:0;right:0;bottom:0;left:0;will-change:transform;transform:perspective(1400px)}.vss .vss__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;object-fit:contain;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.vss__sheen{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;-webkit-mask:var(--mask) center / 100% 100% no-repeat;mask:var(--mask) center / 100% 100% no-repeat;opacity:0;transition:opacity .6s}.vss__sheen.has-mask{opacity:.5}.vss__sheen:before{content:"";position:absolute;top:0;bottom:0;left:-100%;width:300%;background:linear-gradient(100deg,#0a121c29,#0a121c00 28%,#fff0 42%,#ffffff47,#fff0 58%,#0a121c00 72%,#0a121c29);transform:translate(calc((var(--sh, .5) - .5) * -40%))}.vss__shadow{position:absolute;left:24%;right:8%;bottom:0;height:6%;border-radius:50%;background:radial-gradient(closest-side,#00000080,#0000);transform:translateY(55%);pointer-events:none}.vss__hit{position:absolute;top:10%;right:16%;bottom:10%;left:16%;border:0;padding:0;background:transparent;cursor:pointer;border-radius:30%;pointer-events:auto}.vss__hit:focus-visible{outline:2px solid var(--vss-accent);outline-offset:0}.vss.is-story .vss__hit,.vss--design .vss__hit{visibility:hidden}.vss__pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);scale:calc(1 / var(--S, 1));transition:opacity .35s var(--vss-ease),transform .35s var(--vss-ease);pointer-events:none}.vss__pin:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;background:#152437;box-shadow:0 0 0 2px #fffffff2,0 4px 14px #0a121c59}.vss__pin:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;border:1px solid #2E4A6B;animation:vss-ping 2.6s var(--vss-ease) infinite}.vss__pin span{position:relative;font:700 10px/1 var(--font-body-family, sans-serif);color:#fff}.vss__pin.is-active{opacity:1;transform:none}@keyframes vss-ping{0%{transform:scale(.6);opacity:.8}to{transform:scale(1.5);opacity:0}}.vss__intro{position:absolute;z-index:3;left:max(var(--vss-gutter),calc(50% - var(--vss-maxw) / 2 + var(--vss-gutter)));top:calc(var(--vss-top) + (100% - var(--vss-top)) / 2);transform:translateY(-50%);width:min(540px,42vw);display:flex;flex-direction:column;align-items:flex-start;gap:18px}.vss__eyebrow{margin:0;font-family:"Saira",var(--font-body-family, sans-serif);font-style:normal;font-weight:600;font-size:12.5px;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:var(--vss-ink-2)}.vss .vss__heading{margin:0;font-size:clamp(36px,4.4vw,64px);line-height:1;color:var(--vss-ink)}.vss__text{margin:0;font-size:17px;line-height:1.55;color:var(--vss-ink-2);max-width:44ch}.vss .vss__btn{margin-top:6px}.vss__cue{position:absolute;z-index:3;left:50%;bottom:22px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:"Saira",var(--font-body-family, sans-serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--vss-ink-3);pointer-events:none}.vss__cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--vss-ink-3),transparent);animation:vss-cue 2.4s var(--vss-ease) infinite}@keyframes vss-cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}to{transform:scaleY(0);transform-origin:bottom}}.vss__steps{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none}.vss__step{position:absolute;top:calc(var(--vss-top) + (100% - var(--vss-top)) / 2);width:min(420px,38vw);display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(calc(-50% + 24px));transition:opacity .55s var(--vss-ease),transform .7s var(--vss-ease)}.vss__step.is-active{opacity:1;transform:translateY(-50%)}.vss__step[data-align=left]{left:max(var(--vss-gutter),calc(50% - var(--vss-maxw) / 2 + var(--vss-gutter)))}.vss__step[data-align=right]{right:max(var(--vss-gutter),calc(50% - var(--vss-maxw) / 2 + var(--vss-gutter)))}.vss__num{font-family:var(--font-heading-family, sans-serif);font-style:italic;font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--vss-accent)}.vss .vss__step-title{margin:0;font-size:clamp(30px,3.4vw,52px);line-height:1;color:var(--vss-ink)}.vss__step p{margin:0;font-size:17px;line-height:1.55;color:var(--vss-ink-2);max-width:40ch}.vss__dots{position:absolute;z-index:3;right:max(18px,calc(var(--vss-gutter) / 2));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .5s}.vss__dots.is-on{opacity:1}.vss__dots i{display:block;width:4px;height:18px;border-radius:2px;background:var(--vss-dot);transition:background .4s,height .4s}.vss__dots i.is-on{background:var(--vss-ink);height:30px}.vss--design .vss__frame{pointer-events:auto;cursor:crosshair}.vss__help{position:absolute;z-index:5;left:12px;top:calc(var(--vss-top) + 12px);max-width:320px;padding:12px 14px;border-radius:12px;background:#fff;color:#0a121c;font:13px/1.45 var(--font-body-family, sans-serif);box-shadow:0 10px 30px #00000059}.vss__help code{display:block;margin-top:6px;font-size:13px;white-space:pre-wrap}@media(max-width:899px){.vss__frame{width:min(86vw,calc(52vh * var(--vss-ar, .75)));transform:translate(calc(50vw - 50%),calc(62vh - 50%))}.vss__intro{left:var(--vss-gutter);right:var(--vss-gutter);top:calc(var(--vss-top) + 28px);width:auto;transform:none;align-items:center;text-align:center;gap:12px}.vss__eyebrow{font-size:11px;letter-spacing:.14em}.vss .vss__heading{font-size:clamp(30px,8.6vw,46px)}.vss__text{font-size:15px}.vss__cue{bottom:14px}.vss__step{left:var(--vss-gutter)!important;right:var(--vss-gutter)!important;width:auto;top:auto;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(24px);gap:8px;padding:16px 18px 18px;border-radius:18px;background:var(--vss-glass);box-shadow:inset 0 0 0 1px var(--vss-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.vss__step.is-active{transform:none}.vss .vss__step-title{font-size:24px}.vss__step p{font-size:15px}.vss__dots{right:10px;top:40%}}@media(max-width:899px)and (max-height:640px){.vss__text{display:none}}@media(prefers-reduced-motion:reduce){.vss *,.vss *:before,.vss *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/*# sourceMappingURL=/cdn/shop/t/29/assets/velora-sock-story.css.map */