.noon-story-product{--noon-story-sticky-top: calc(var(--header-height, 72px) + 12px)}.noon-story{display:block;width:100%;--noon-story-ease: cubic-bezier(.22, 1, .36, 1);--noon-story-radius: clamp(12px, 1.4vw, 20px);--noon-story-progress: 0%}.noon-story__scroll{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}.noon-story__sticky,.noon-story__steps{grid-area:1 / 1}.noon-story__sticky{position:sticky;z-index:2;top:var(--noon-story-sticky-top);align-self:start;min-width:0}.noon-story__steps{position:relative;z-index:1;min-width:0;pointer-events:none}.noon-story__step{display:block;min-height:72dvh;scroll-margin-top:14dvh}.noon-story__step:first-child{min-height:82dvh}.noon-story__step:last-child{min-height:102dvh}.noon-story__stage{position:relative;width:100%;height:clamp(420px,calc(100dvh - var(--noon-story-sticky-top) - 156px),820px);overflow:hidden;border:1px solid rgb(var(--color-foreground) / .08);border-radius:var(--noon-story-radius);background:rgb(var(--color-foreground) / .035);box-shadow:inset 0 1px #ffffff29;isolation:isolate;touch-action:pan-y}.noon-story__stage:focus-visible{outline:2px solid rgb(var(--color-keyboard-focus));outline-offset:4px}.noon-story__frame{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;margin:0;place-items:center;overflow:hidden;opacity:0;pointer-events:none;transform:translate3d(0,3%,0) scale(.992);transition:opacity .56s var(--noon-story-ease),transform .68s var(--noon-story-ease);will-change:opacity,transform}.noon-story__frame.is-before{transform:translate3d(0,-3%,0) scale(1.008)}.noon-story__frame.is-after{transform:translate3d(0,3%,0) scale(.992)}.noon-story__frame.is-active{z-index:2;opacity:1;pointer-events:auto;transform:translateZ(0) scale(1)}.noon-story__image{display:block;width:100%;height:100%;object-fit:contain}.noon-story__frame--artwork{background:rgb(var(--color-background))}.noon-story__artwork-backdrop,.noon-story__glass{position:absolute;top:0;right:0;bottom:0;left:0}.noon-story__artwork-backdrop{z-index:0;overflow:hidden;background:rgb(var(--color-foreground) / .04)}.noon-story__artwork-backdrop-image{display:block;width:100%;height:100%;object-fit:cover;opacity:.38;filter:blur(42px) saturate(.72) contrast(.9);transform:scale(1.16)}.noon-story__glass{z-index:1;background:linear-gradient(135deg,rgb(var(--color-background) / .54),rgb(var(--color-background) / .72)),rgb(var(--color-background) / .34);box-shadow:inset 0 1px #ffffff3d,inset 0 -1px rgb(var(--color-foreground) / .05);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.noon-story__artwork-image{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important}.noon-story__frame--detail{background:rgb(var(--color-foreground) / .035)}.noon-story__frame--detail>.noon-story__image,.noon-story__frame--room>.noon-story__image{position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box;width:100%;height:100%!important;max-height:100%;object-fit:cover}.noon-story__frame--detail>.noon-story__image{padding:0}.noon-story__frame--first-room .noon-story__image{transform:scale(1.035);transition:transform .9s var(--noon-story-ease)}.noon-story__frame--first-room.is-active .noon-story__image{transform:scale(1)}.noon-story__morph-artwork{position:absolute;z-index:4;top:0;right:0;bottom:0;left:0;display:grid;visibility:hidden;place-items:center;opacity:0;pointer-events:none}.noon-story__morph-image{display:block;width:68%;height:72%;object-fit:contain;filter:drop-shadow(0 18px 32px rgb(var(--color-foreground) / .16))}.noon-story.is-entering-room .noon-story__morph-artwork{visibility:visible;animation:noon-story-enter-room .94s var(--noon-story-ease) both}@keyframes noon-story-enter-room{0%{opacity:1;transform:translateZ(0) scale(1)}58%{opacity:.78;transform:translate3d(0,-5%,0) scale(.62)}to{opacity:0;transform:translate3d(0,-9%,0) scale(.4)}}.noon-story__progress{position:relative;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;width:min(100%,40rem);margin:.65rem auto 0;padding-inline:.25rem;color:rgb(var(--color-foreground) / .72)}.noon-story__count{display:flex;gap:.22rem;font-size:.72rem;font-variant-numeric:tabular-nums;font-weight:620;line-height:1;letter-spacing:.03em}.noon-story__scrubber{width:100%;height:18px;margin:0;padding:0;border:0;border-radius:999px;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,rgb(var(--color-foreground) / .74) 0 var(--noon-story-progress),rgb(var(--color-foreground) / .2) var(--noon-story-progress) 100%) center / 100% 2px no-repeat;color:rgb(var(--color-foreground));cursor:grab}.noon-story__scrubber:active{cursor:grabbing}.noon-story__scrubber:focus-visible{outline:2px solid rgb(var(--color-keyboard-focus));outline-offset:5px}.noon-story__scrubber::-webkit-slider-runnable-track{width:100%;height:2px;border:0;background:transparent}.noon-story__scrubber::-webkit-slider-thumb{width:34px;height:10px;margin-top:-4px;border:0;border-radius:999px;appearance:none;-webkit-appearance:none;background:rgb(var(--color-foreground) / .78);box-shadow:0 0 0 3px rgb(var(--color-background) / .6)}.noon-story__scrubber::-moz-range-track{width:100%;height:2px;border:0;background:transparent}.noon-story__scrubber::-moz-range-thumb{width:34px;height:10px;border:0;border-radius:999px;background:rgb(var(--color-foreground) / .78);box-shadow:0 0 0 3px rgb(var(--color-background) / .6)}.noon-story__navigation{display:grid;gap:.45rem;padding:.55rem .25rem 0}.noon-story__modes{display:flex;justify-content:center;gap:clamp(2rem,4vw,3.5rem)}.noon-story__modes button{position:relative;min-height:34px;padding:.3rem 0;border:0;background:transparent;color:rgb(var(--color-foreground) / .5);font:inherit;font-size:.82rem;font-weight:560;letter-spacing:.02em;cursor:pointer;transition:color .18s ease,transform .18s ease}.noon-story__modes button:after{position:absolute;right:0;bottom:2px;left:0;height:1px;background:currentColor;content:"";transform:scaleX(0);transform-origin:center;transition:transform .22s ease}.noon-story__modes button:is(:hover,:focus-visible),.noon-story__modes button.is-active{color:rgb(var(--color-foreground))}.noon-story__modes button.is-active:after{transform:scaleX(1)}.noon-story__modes button:active,.noon-story__room-choice:active{transform:scale(.98)}.noon-story__modes button:focus-visible,.noon-story__room-choice:focus-visible{outline:2px solid rgb(var(--color-keyboard-focus));outline-offset:3px}.noon-story__current-label{min-height:1.2em;margin:0;color:rgb(var(--color-foreground) / .58);font-size:.76rem;line-height:1.2;text-align:center}.noon-story__room-choices{display:flex;justify-content:center;gap:clamp(.8rem,2vw,1.25rem);padding-top:.15rem}.noon-story__room-choices[hidden]{display:none}.noon-story__room-choice{display:grid;grid-template-columns:58px auto;align-items:center;gap:.65rem;padding:0;border:0;background:transparent;color:rgb(var(--color-foreground) / .5);text-align:left;font:inherit;font-size:.72rem;cursor:pointer;transition:color .18s ease,transform .18s ease}.noon-story__room-choice:is(:hover,:focus-visible),.noon-story__room-choice.is-active{color:rgb(var(--color-foreground))}.noon-story__room-thumb{display:block;aspect-ratio:1;overflow:hidden;border:1px solid transparent;border-radius:8px;opacity:.58;transition:border-color .18s ease,opacity .18s ease}.noon-story__room-choice.is-active .noon-story__room-thumb{border-color:rgb(var(--color-foreground));opacity:1}.noon-story__room-thumb-image{display:block;width:100%;height:100%;object-fit:cover}@media screen and (min-width:1024px){.noon-story-product{grid-template-columns:minmax(0,1.42fr) minmax(25rem,.9fr);align-items:start;gap:clamp(1.5rem,3vw,3.75rem)}.noon-story__stage{width:min(100%,calc(100dvh - var(--noon-story-sticky-top) - 148px),960px);height:auto;aspect-ratio:1;margin-inline:auto}.noon-story-product__info{position:sticky;z-index:3;top:var(--noon-story-sticky-top);align-self:start;max-height:calc(100dvh - var(--noon-story-sticky-top) - 20px);padding-inline-end:.5rem;width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow-x:clip;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:rgb(var(--color-foreground) / .34) transparent;scrollbar-width:thin}.noon-story-product__info::-webkit-scrollbar{width:5px}.noon-story-product__info::-webkit-scrollbar-track{background:transparent}.noon-story-product__info::-webkit-scrollbar-thumb{border-radius:999px;background:rgb(var(--color-foreground) / .34)}.noon-story-product__info>*+*{margin-block-start:clamp(.75rem,1.6dvh,1.25rem)}.noon-story-product__info .variant-picker{gap:.85rem}.noon-story-product__info .variant-picker,.noon-story-product__info .product-form__input{min-width:0;max-width:100%}.noon-story-product__info .noon-size-option>.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:.65rem;width:100%;max-width:100%}.noon-story-product__info .noon-size-option>.swatches>li,.noon-story-product__info .noon-size-option magnet-element,.noon-story-product__info .noon-size-swatch{width:100%;min-width:0}.noon-story-product__info .noon-size-swatch{padding:.7rem .5rem}.noon-story-product__info .frame-option-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem;width:100%;max-width:100%;padding-block-end:.35rem;overflow:visible}.noon-story-product__info .frame-option-card{gap:.35rem;padding:3px}.noon-story-product__info .frame-option-card__name{font-size:.58rem}.noon-story__room-choice{grid-template-columns:48px auto}}@media screen and (max-width:1023px){.noon-story__scroll{display:block}.noon-story__sticky{position:relative;top:auto}.noon-story__steps{display:none}.noon-story__stage{height:auto;min-height:0;aspect-ratio:1;border-radius:12px;touch-action:pan-y}.noon-story__frame{transform:translate3d(7%,0,0) scale(.992)}.noon-story__frame.is-before{transform:translate3d(-7%,0,0) scale(1.008)}.noon-story__frame.is-after{transform:translate3d(7%,0,0) scale(.992)}.noon-story__frame.is-active{transform:translateZ(0) scale(1)}.noon-story__artwork-backdrop-image{opacity:.34;filter:blur(26px) saturate(.72) contrast(.92)}.noon-story__glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.noon-story__progress{width:100%;margin-top:.75rem}.noon-story__scrubber{width:100%;height:18px;margin:0;transform:none}.noon-story__navigation{padding-top:.7rem}.noon-story__modes{justify-content:flex-start;gap:2rem}.noon-story__current-label{text-align:left}.noon-story__room-choices{justify-content:flex-start;gap:1rem;padding-bottom:.25rem;overflow-x:auto;scrollbar-width:none}.noon-story__room-choices::-webkit-scrollbar{display:none}.noon-story__room-choice{flex:0 0 auto;grid-template-columns:52px auto}}@media(prefers-reduced-motion:reduce){.noon-story__frame,.noon-story__frame--first-room .noon-story__image,.noon-story__modes button,.noon-story__modes button:after,.noon-story__room-choice,.noon-story__room-thumb{transition:none}.noon-story.is-entering-room .noon-story__morph-artwork{animation:none}}@media(prefers-reduced-transparency:reduce){.noon-story__artwork-backdrop-image{display:none}.noon-story__glass{background:rgb(var(--color-background));-webkit-backdrop-filter:none;backdrop-filter:none}}
/*# sourceMappingURL=/cdn/shop/t/67/assets/noon-product-story.css.map */