.pattern-intro{--pi-bg: var(--pi-bg-1);--pi-fg: var(--pi-fg-1);--pi-accent: var(--pi-accent-1);--pi-progress: 0;--pi-pointer-x: 0;--pi-pointer-y: 0;position:relative;display:block;color:var(--pi-fg);background:var(--pi-bg);isolation:isolate;transition:color .7s ease,background-color .7s ease}.pattern-intro__track{position:relative;height:var(--pi-scroll-height, 260vh)}.pattern-intro__stage{position:sticky;top:0;display:grid;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 72% 18%,color-mix(in srgb,var(--pi-accent) 24%,transparent),transparent 34%),linear-gradient(130deg,color-mix(in srgb,var(--pi-bg) 92%,white),var(--pi-bg));transition:background .7s ease}.pattern-intro__ambient,.pattern-intro__thread{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.pattern-intro__ambient{z-index:-1}.pattern-intro__thread path{fill:none;stroke:var(--pi-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--pi-progress));opacity:.58;transition:stroke .7s ease}.pattern-intro__glow{position:absolute;display:block;width:min(44vw,62rem);aspect-ratio:1;border-radius:50%;filter:blur(4px);opacity:.28;background:var(--pi-accent);transition:background-color .7s ease}.pattern-intro__glow--one{top:-22%;right:-12%;transform:translate3d(calc(var(--pi-pointer-x) * 15px),calc(var(--pi-pointer-y) * 12px + var(--pi-progress) * 55px),0)}.pattern-intro__glow--two{bottom:-42%;left:-16%;opacity:.16;transform:translate3d(calc(var(--pi-pointer-x) * -10px),calc(var(--pi-pointer-y) * -8px - var(--pi-progress) * 40px),0)}.pattern-intro__stitch{position:absolute;width:7.5rem;height:3.4rem;border:2px solid var(--pi-accent);border-radius:50%;opacity:.35;transition:border-color .7s ease}.pattern-intro__stitch:after{content:"";position:absolute;top:.65rem;right:-1.2rem;bottom:.65rem;left:-1.2rem;border:2px solid var(--pi-accent);border-radius:50%}.pattern-intro__stitch--one{top:16%;left:5%;transform:rotate(-18deg) translate3d(calc(var(--pi-pointer-x) * 6px),calc(var(--pi-pointer-y) * 8px),0)}.pattern-intro__stitch--two{right:5%;bottom:13%;transform:rotate(28deg) translate3d(calc(var(--pi-pointer-x) * -9px),calc(var(--pi-pointer-y) * -6px),0)}.pattern-intro__stitch--three{top:9%;right:39%;width:4.8rem;height:2.2rem;transform:rotate(8deg) translate3d(calc(var(--pi-pointer-x) * 12px),calc(var(--pi-pointer-y) * 5px),0)}.pattern-intro__content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(36rem,1.1fr);align-items:center;gap:clamp(3rem,7vw,11rem);width:100%;min-height:100svh;padding-top:clamp(5rem,8vh,9rem);padding-bottom:clamp(8rem,11vh,12rem)}.pattern-intro[data-image-position=left] .pattern-intro__copy{order:2}.pattern-intro[data-image-position=left] .pattern-intro__visual{order:1}.pattern-intro__copy{max-width:62rem}.pattern-intro__eyebrow,.pattern-intro__story-label,.pattern-intro__visual-caption,.pattern-intro__palette-title,.pattern-intro__footer{font-size:1.1rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.pattern-intro__eyebrow{display:flex;align-items:center;gap:1.2rem;margin:0 0 1.8rem;color:var(--pi-accent);transition:color .7s ease}.pattern-intro__eyebrow:before{content:"";width:4rem;height:1px;background:currentColor}.pattern-intro__heading{max-width:12ch;margin:0;color:inherit;font-size:clamp(4.5rem,6.8vw,9.2rem);line-height:.94;letter-spacing:-.045em;text-wrap:balance}.pattern-intro__intro{max-width:50rem;margin-top:2.2rem;font-size:clamp(1.5rem,1.45vw,1.9rem);opacity:.78}.pattern-intro__intro p,.pattern-intro__story .rte p{margin:0}.pattern-intro__stories{position:relative;min-height:17rem;margin-top:3.6rem}.pattern-intro__story{position:absolute;top:0;right:0;bottom:0;left:0;max-width:52rem;opacity:0;visibility:hidden;transform:translateY(2.4rem);transition:opacity .42s ease,transform .52s cubic-bezier(.2,.75,.25,1),visibility .42s}.pattern-intro__story.is-active{opacity:1;visibility:visible;transform:translateY(0)}.pattern-intro__story-label{display:block;margin-bottom:.9rem;color:var(--pi-accent);transition:color .7s ease}.pattern-intro__story h2{margin:0 0 1rem;color:inherit;font-size:clamp(2.5rem,3.2vw,4.4rem);line-height:1.02;letter-spacing:-.03em}.pattern-intro__story .rte{max-width:46rem;font-size:1.6rem;line-height:1.55;opacity:.82}.pattern-intro__actions{display:flex;align-items:center;flex-wrap:wrap;gap:2.2rem 3rem;margin-top:2.4rem}.pattern-intro__button{display:inline-flex;align-items:center;justify-content:center;gap:1.4rem;min-height:5.2rem;padding:1.2rem 2.3rem;border:1px solid var(--pi-accent);border-radius:999px;color:var(--pi-bg);background:var(--pi-accent);font:inherit;font-weight:700;cursor:pointer;transition:color .35s ease,background-color .35s ease,border-color .35s ease,transform .25s ease}.pattern-intro__button:hover{transform:translateY(-2px)}.pattern-intro__button:focus-visible,.pattern-intro__swatch:focus-visible{outline:3px solid color-mix(in srgb,var(--pi-accent) 45%,white);outline-offset:4px}.pattern-intro__palette{display:grid;grid-template-columns:repeat(3,3.2rem);align-items:center;gap:.8rem}.pattern-intro__palette-title{grid-column:1 / -1;margin-bottom:.2rem;opacity:.7}.pattern-intro__swatch{position:relative;width:3.2rem;height:3.2rem;padding:0;border:1px solid color-mix(in srgb,var(--pi-fg) 34%,transparent);border-radius:50%;background:var(--pi-swatch-bg);cursor:pointer}.pattern-intro__swatch span{position:absolute;right:.2rem;bottom:.2rem;width:1.15rem;height:1.15rem;border:2px solid var(--pi-bg);border-radius:50%;background:var(--pi-swatch-accent)}.pattern-intro__swatch.is-active:after{content:"";position:absolute;top:-.45rem;right:-.45rem;bottom:-.45rem;left:-.45rem;border:1px solid var(--pi-fg);border-radius:50%}.pattern-intro__visual{position:relative;width:min(100%,72rem);justify-self:center;perspective:1200px}.pattern-intro__image-frame{position:relative;aspect-ratio:4 / 5;overflow:hidden;border:1px solid color-mix(in srgb,var(--pi-fg) 20%,transparent);border-radius:clamp(2rem,4vw,5.6rem);background:color-mix(in srgb,var(--pi-bg) 78%,white);box-shadow:0 4rem 8rem color-mix(in srgb,var(--pi-fg) 16%,transparent);transform:translate3d(calc(var(--pi-pointer-x) * 9px),calc(var(--pi-pointer-y) * 7px - var(--pi-progress) * 20px),0) rotateY(calc(var(--pi-pointer-x) * 1.6deg)) rotateX(calc(var(--pi-pointer-y) * -1.2deg)) scale(calc(.965 + var(--pi-progress) * .035));transform-origin:center;transition:border-color .7s ease,background-color .7s ease,box-shadow .7s ease}.pattern-intro__image-frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;background:linear-gradient(145deg,rgba(255,255,255,.14),transparent 42%,rgba(0,0,0,.08));pointer-events:none}.pattern-intro__media{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden;transform:scale(1.045);transition:opacity .62s ease,transform .9s cubic-bezier(.2,.75,.25,1),visibility .62s}.pattern-intro__media.is-active{z-index:1;opacity:1;visibility:visible;transform:scale(1)}.pattern-intro__image,.pattern-intro__placeholder{display:block;width:100%;height:100%;object-fit:var(--pi-image-fit, cover)}.pattern-intro__placeholder{padding:8%;color:color-mix(in srgb,var(--pi-fg) 25%,transparent)}.pattern-intro__visual-caption{position:absolute;top:50%;right:-5.2rem;z-index:2;color:var(--pi-fg);writing-mode:vertical-rl;transform:translateY(-50%);opacity:.58}.pattern-intro__footer{position:absolute;right:max(2.4rem,calc((100vw - var(--page-width)) / 2 + 2rem));bottom:2.4rem;left:max(2.4rem,calc((100vw - var(--page-width)) / 2 + 2rem));z-index:2;display:grid;grid-template-columns:auto minmax(8rem,24rem) auto auto auto;align-items:center;gap:1.2rem;opacity:.7}.pattern-intro__progress{position:relative;display:block;height:1px;overflow:hidden;background:color-mix(in srgb,var(--pi-fg) 28%,transparent)}.pattern-intro__progress i{position:absolute;top:0;right:0;bottom:0;left:0;display:block;background:var(--pi-accent);transform:scaleX(var(--pi-progress));transform-origin:left center;transition:background-color .7s ease}@media screen and (max-width:989px){.pattern-intro__content{grid-template-columns:minmax(0,1fr) minmax(28rem,.8fr);gap:3rem}.pattern-intro__heading{font-size:clamp(4.2rem,8vw,7rem)}.pattern-intro__visual-caption{right:-3.4rem}}@media screen and (max-width:749px){.pattern-intro__track{height:max(220vh,var(--pi-scroll-height))}.pattern-intro__content{grid-template-columns:minmax(0,1fr);align-content:center;gap:2.4rem;min-height:100svh;padding-top:4.2rem;padding-bottom:7.4rem}.pattern-intro[data-image-position=left] .pattern-intro__copy,.pattern-intro[data-image-position=left] .pattern-intro__visual,.pattern-intro__copy,.pattern-intro__visual{order:initial}.pattern-intro__copy{max-width:none}.pattern-intro__eyebrow{margin-bottom:1rem}.pattern-intro__heading{max-width:11ch;font-size:clamp(3.7rem,12vw,5.8rem)}.pattern-intro__intro{margin-top:1.2rem;font-size:1.45rem}.pattern-intro__stories{min-height:11.5rem;margin-top:2rem}.pattern-intro__story h2{font-size:clamp(2.4rem,7vw,3.2rem)}.pattern-intro__story .rte{font-size:1.4rem}.pattern-intro__actions{gap:1.8rem;margin-top:1.4rem}.pattern-intro__button{min-height:4.7rem;padding:1rem 1.8rem}.pattern-intro__visual{width:min(70vw,31rem)}.pattern-intro__image-frame{border-radius:2.4rem;box-shadow:0 2rem 4rem color-mix(in srgb,var(--pi-fg) 15%,transparent)}.pattern-intro__visual-caption,.pattern-intro__stitch--three{display:none}.pattern-intro__footer{right:1.8rem;bottom:1.5rem;left:1.8rem;grid-template-columns:auto minmax(5rem,1fr) auto auto auto;gap:.7rem;font-size:.9rem}.pattern-intro__glow{width:80vw}}.pattern-intro[data-design-mode=true] .pattern-intro__track{height:100svh}@media(prefers-reduced-motion:reduce){.pattern-intro,.pattern-intro *,.pattern-intro *:before,.pattern-intro *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}.pattern-intro__track{height:auto}.pattern-intro__stage{position:relative}.pattern-intro__story{position:relative;margin-bottom:2rem;opacity:1;visibility:visible;transform:none}.pattern-intro__stories{min-height:0}.pattern-intro__image-frame{transform:none}}@media screen and (max-width:749px){.pattern-intro__stage{height:100svh;min-height:100svh}.pattern-intro__content{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(.8rem,1.6svh,1.4rem);height:100svh;min-height:0;padding:max(1.6rem,env(safe-area-inset-top)) 2rem max(4.6rem,calc(env(safe-area-inset-bottom) + 3.8rem));overflow:hidden}.pattern-intro__copy{width:100%;flex:0 0 auto}.pattern-intro__eyebrow{margin-bottom:.7rem;font-size:.9rem}.pattern-intro__eyebrow:before{width:2.8rem}.pattern-intro__heading{font-size:clamp(3rem,10.5vw,4.4rem);line-height:.92}.pattern-intro__intro{margin-top:.8rem;font-size:1.3rem;line-height:1.35}.pattern-intro__stories{min-height:8.6rem;margin-top:1.2rem}.pattern-intro__story-label{margin-bottom:.5rem;font-size:.85rem}.pattern-intro__story h2{margin-bottom:.55rem;font-size:clamp(2.1rem,6.3vw,2.8rem)}.pattern-intro__story .rte{font-size:1.25rem;line-height:1.35}.pattern-intro__actions{flex-wrap:nowrap;justify-content:space-between;gap:1.2rem;margin-top:.8rem}.pattern-intro__button{min-height:4.2rem;padding:.8rem 1.5rem;font-size:1.3rem}.pattern-intro__palette{grid-template-columns:repeat(3,2.6rem);gap:.6rem}.pattern-intro__palette-title{font-size:.8rem;line-height:1.2}.pattern-intro__swatch{width:2.6rem;height:2.6rem}.pattern-intro__visual{width:auto;height:clamp(15rem,28svh,24rem);aspect-ratio:4 / 5;flex:0 1 auto;align-self:center}.pattern-intro__image-frame{width:100%;height:100%}.pattern-intro__footer{bottom:max(.8rem,env(safe-area-inset-bottom))}}@media screen and (max-width:749px)and (max-height:680px){.pattern-intro__intro{display:none}.pattern-intro__stories{min-height:7.6rem;margin-top:.8rem}.pattern-intro__visual{height:clamp(12rem,23svh,16rem)}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/section-interactive-pattern-intro.css.map */