.interactive-graphic{--interactive-graphic-step-count: 1;--interactive-graphic-step-scroll: 100vh;--interactive-graphic-rise-lead: .85;--interactive-graphic-enter: .6;--interactive-graphic-hold: .7;--interactive-graphic-exit: .8;--interactive-graphic-stack-delay: .75;--interactive-graphic-carton-width-ratio: 1.75;--interactive-graphic-carton-trim-top: 67;--interactive-graphic-carton-trim-ref-width: 840;--interactive-graphic-carton-rise: .5;--interactive-graphic-carton-rise-lead: .28;--interactive-graphic-carton-rise-hold: .18;--interactive-graphic-carton-narrow: .42;--interactive-graphic-carton-crossfade: .2;--interactive-graphic-carton-smooth: .22;--interactive-graphic-final-hold-trim: .1;--interactive-graphic-final-hold: .08;--interactive-graphic-carton-aspect: .762195;--interactive-graphic-carton-narrow-end-scale: .4354;--interactive-graphic-stage-aspect-w: 800;--interactive-graphic-stage-aspect-h: 680;--interactive-graphic-media-max: min(92vh, 800px);--interactive-graphic-background-position: center 10%;display:block}.interactive-graphic__scroll-track{position:relative;height:calc((var(--interactive-graphic-step-count) - 1) * var(--interactive-graphic-step-scroll) + 100vh - var(--interactive-graphic-final-hold-trim) * var(--interactive-graphic-step-scroll))}.interactive-graphic__sticky{position:sticky;top:0;display:flex;align-items:center;width:100%;min-height:100vh;overflow:hidden}.interactive-graphic__container{display:grid;grid-template-columns:1.5fr 1fr;grid-template-areas:"media content";align-items:center;gap:var(--gutter-xlarge);width:100%}.interactive-graphic__visual{grid-area:media;position:relative;width:min(100%,var(--interactive-graphic-media-max));aspect-ratio:var(--interactive-graphic-stage-aspect-w, 800) / var(--interactive-graphic-stage-aspect-h, 680);align-self:center;justify-self:center;overflow:visible}.interactive-graphic__carton-composite{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform-origin:top center;transform:scale(calc(1 - var(--carton-narrow-amount, 0) * (1 - var(--interactive-graphic-carton-narrow-end-scale, .4354))));pointer-events:none;will-change:transform}.interactive-graphic__carton-stage{position:relative;width:100%;height:100%;z-index:1;overflow:hidden;opacity:calc((1 - var(--carton-mid-amount, 0)) * (1 - var(--carton-crossfade-amount, 0)))}.interactive-graphic__media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1}.interactive-graphic__base-image,.interactive-graphic__overlays,.interactive-graphic__overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden}.interactive-graphic__background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1;opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 1.4s ease;pointer-events:none}.interactive-graphic__background.is-visible{opacity:1;visibility:visible}.interactive-graphic__background .lazy-image--background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding-top:0!important}.interactive-graphic__background .lazy-image--background img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:var(--interactive-graphic-background-position, center 22%)}.interactive-graphic__overlays{z-index:2;pointer-events:none}.interactive-graphic__overlay{z-index:var(--overlay-z, 2);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease;pointer-events:none}.interactive-graphic__overlay.is-visible{opacity:1;visibility:visible}.interactive-graphic--scroll-rise .interactive-graphic__overlay.is-visible{opacity:var(--overlay-rise-progress, 1)}.interactive-graphic__base-image{z-index:20;pointer-events:none;justify-content:center}.interactive-graphic__media .interactive-graphic__base-image>.lazy-image,.interactive-graphic__media .interactive-graphic__overlay>.lazy-image{position:relative;width:100%;height:auto;max-height:100%;flex-shrink:0;padding-top:0!important}.interactive-graphic__media .interactive-graphic__base-image>.lazy-image[data-ratio],.interactive-graphic__media .interactive-graphic__overlay>.lazy-image[data-ratio]{height:auto}.interactive-graphic__media .interactive-graphic__base-image .lazy-image,.interactive-graphic__media .interactive-graphic__overlay .lazy-image{z-index:auto}.interactive-graphic__media .interactive-graphic__base-image .lazy-image[data-ratio] img,.interactive-graphic__media .interactive-graphic__base-image .lazy-image img{position:relative;top:auto;left:auto;z-index:auto;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center bottom}.interactive-graphic__media .interactive-graphic__overlay .lazy-image[data-ratio] img,.interactive-graphic__media .interactive-graphic__overlay .lazy-image img{position:relative;top:auto;left:0;z-index:auto;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:left bottom}.interactive-graphic--scroll-rise .interactive-graphic__overlay{transition:none;opacity:var(--overlay-rise-progress, 0);transform:translateY(var(--overlay-rise-y, 55%))}.interactive-graphic--scroll-rise .interactive-graphic__overlay.is-visible{visibility:visible}.interactive-graphic__overlay--rise-from-soil{transition:opacity .45s ease,visibility .45s ease,transform .75s cubic-bezier(.22,1,.36,1)}.interactive-graphic__overlay--rise-from-soil:not(.is-visible){transform:translateY(55%)}.interactive-graphic__overlay--rise-from-soil[data-overlay-slot=underlay]:not(.is-visible){transform:translateY(50%)}.interactive-graphic__overlay--rise-from-soil.is-visible{transform:translateY(var(--overlay-rise-rest, -18%))}.interactive-graphic__overlay--rise-from-soil[data-overlay-slot=underlay].is-visible{transform:translateY(var(--overlay-rise-rest-underlay, -10%))}.interactive-graphic--scroll-rise .interactive-graphic__overlay--rise-from-soil.is-visible,.interactive-graphic--scroll-rise .interactive-graphic__overlay--rise-from-soil:not(.is-visible),.interactive-graphic--scroll-rise .interactive-graphic__overlay--rise-from-soil[data-overlay-slot=underlay].is-visible,.interactive-graphic--scroll-rise .interactive-graphic__overlay--rise-from-soil[data-overlay-slot=underlay]:not(.is-visible){transform:translateY(var(--overlay-rise-y, 55%))}.interactive-graphic__carton-frame,.interactive-graphic__carton-mid,.interactive-graphic__carton-final{position:absolute;top:calc(-1 * var(--interactive-graphic-carton-trim-top, 67) / var(--interactive-graphic-carton-trim-ref-width, 840) * var(--interactive-graphic-carton-width-ratio, 1.75) * var(--interactive-graphic-stage-aspect-w, 800) / var(--interactive-graphic-stage-aspect-h, 680) * 100%);left:44.5%;width:calc(var(--interactive-graphic-carton-width-ratio, 1.75) * 100%);height:auto;margin-top:0;transform-origin:top center}.interactive-graphic__carton-frame{z-index:30;display:block;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,55%);transition:opacity .45s ease,visibility .45s ease,transform .75s cubic-bezier(.22,1,.36,1)}.interactive-graphic__carton-frame.is-visible{visibility:visible}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-frame.is-visible{opacity:1;transform:translate(-50%,var(--overlay-rise-rest, 0));transform-origin:top center}.interactive-graphic--scroll-rise .interactive-graphic__carton-frame{transition:none;opacity:var(--overlay-rise-progress, 0);transform:translate(-50%,var(--overlay-rise-y, 55%));transform-origin:top center}.interactive-graphic--scroll-rise .interactive-graphic__visual{transform:translateY(calc(var(--carton-narrow-amount, 0) * var(--interactive-graphic-carton-lift, -8%)))}.interactive-graphic__carton-mid{z-index:31;display:block;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,var(--overlay-rise-rest, 0));transform-origin:top center}.interactive-graphic__carton-mid.is-visible{visibility:visible}.interactive-graphic--scroll-rise .interactive-graphic__carton-mid.is-visible{transition:none;opacity:var(--carton-mid-opacity, 0)}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-mid.is-visible{opacity:var(--carton-mid-opacity, 1)}.interactive-graphic__carton-mid>.lazy-image,.interactive-graphic__carton-mid>.lazy-image[data-ratio]{position:relative;display:block;width:100%;height:auto!important;max-height:none;padding-top:0!important;overflow:visible!important}.interactive-graphic__carton-mid>.lazy-image[data-ratio] img,.interactive-graphic__carton-mid>.lazy-image img{position:relative;top:auto;left:0;z-index:auto;display:block;width:100%;height:auto;max-height:none;object-position:top center}.interactive-graphic__carton-final{z-index:32;display:block;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%)}.interactive-graphic__carton-final.is-visible{visibility:visible}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-final.is-visible{opacity:var(--carton-final-opacity, 1)}.interactive-graphic--scroll-rise .interactive-graphic__carton-final.is-visible{transition:none;opacity:var(--carton-final-opacity, 0)}.interactive-graphic--carton-final .interactive-graphic__carton-composite{transform:scale(var(--interactive-graphic-carton-narrow-end-scale, .4354))}.interactive-graphic--carton-final{--carton-narrow-amount: 1}.interactive-graphic__carton-final>.lazy-image,.interactive-graphic__carton-final>.lazy-image[data-ratio]{position:relative;display:block;width:100%;height:auto!important;max-height:none;padding-top:0!important;overflow:visible!important}.interactive-graphic__carton-final>.lazy-image[data-ratio] img,.interactive-graphic__carton-final>.lazy-image img{position:relative;top:auto;left:0;z-index:auto;display:block;width:100%;height:auto;max-height:none;object-position:top center}.interactive-graphic--carton-active .interactive-graphic__sticky,.interactive-graphic--carton-active .interactive-graphic__container{overflow:visible}.interactive-graphic__carton-frame>.lazy-image,.interactive-graphic__carton-frame>.lazy-image[data-ratio]{position:relative;display:block;width:100%;height:auto!important;max-height:none;padding-top:0!important;overflow:visible!important}.interactive-graphic__carton-frame>.lazy-image[data-ratio] img,.interactive-graphic__carton-frame>.lazy-image img{position:relative;top:auto;left:0;z-index:auto;display:block;width:100%;height:auto;max-height:none;object-position:top center}.interactive-graphic__content{grid-area:content;display:flex;flex-direction:column;gap:1rem}.interactive-graphic__steps{position:relative;min-height:12rem}.interactive-graphic__step{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;gap:1rem;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s ease,visibility .45s ease,transform .45s ease;pointer-events:none}.interactive-graphic__step.is-active{position:relative;opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.interactive-graphic__caption{color:#be5a38}.interactive-graphic__title{color:#402020;margin:0}.interactive-graphic__text{color:#402020;font-size:18px}.interactive-graphic--design-mode .interactive-graphic__scroll-track{height:auto}.interactive-graphic--design-mode .interactive-graphic__sticky{position:relative;min-height:0}.interactive-graphic--design-mode .interactive-graphic__step{position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin-bottom:2rem}.interactive-graphic--design-mode .interactive-graphic__step:not(.is-active){display:none}.interactive-graphic--reduced-motion .interactive-graphic__scroll-track{height:auto}.interactive-graphic--reduced-motion .interactive-graphic__sticky{position:relative;min-height:0}.interactive-graphic--reduced-motion .interactive-graphic__step{position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin-bottom:2rem}.interactive-graphic--reduced-motion .interactive-graphic__step:not(.is-active){display:flex}@media(prefers-reduced-motion:reduce){.interactive-graphic__background,.interactive-graphic__overlay,.interactive-graphic__step,.interactive-graphic__overlay--rise-from-soil{transition:none}.interactive-graphic__overlay--rise-from-soil:not(.is-visible){transform:translateY(var(--overlay-rise-rest, -18%))}.interactive-graphic__overlay--rise-from-soil[data-overlay-slot=underlay]:not(.is-visible){transform:translateY(var(--overlay-rise-rest-underlay, -10%))}}@media screen and (max-width:989px){.interactive-graphic__container.container--large{max-width:none;padding-inline-start:0;padding-inline-end:0}.interactive-graphic--mobile .interactive-graphic__scroll-track{height:calc((var(--interactive-graphic-step-count) - 1) * var(--interactive-graphic-step-scroll) + 100vh - var(--interactive-graphic-final-hold-trim) * var(--interactive-graphic-step-scroll))}.interactive-graphic--mobile .interactive-graphic__sticky{position:sticky;top:var(--interactive-graphic-sticky-header-offset, 0px);display:flex;align-items:stretch;min-height:calc(100vh - var(--interactive-graphic-sticky-header-offset, 0px));height:calc(100vh - var(--interactive-graphic-sticky-header-offset, 0px));overflow:hidden;transition:top .2s linear,min-height .2s linear,height .2s linear}.interactive-graphic--mobile .interactive-graphic__container{display:grid;grid-template-columns:1fr;grid-template-rows:1fr minmax(0,1fr);grid-template-areas:"content" "media";align-items:start;align-content:start;gap:var(--gutter-regular);width:100%;height:100%;min-height:0;padding-top:var(--gutter-regular);padding-bottom:var(--gutter-regular)}.interactive-graphic--mobile .interactive-graphic__content{grid-area:content;flex-shrink:0;width:100%;align-self:stretch;justify-content:center;padding-left:25px;padding-right:25px}.interactive-graphic--mobile .interactive-graphic__steps{min-height:7.5rem}.interactive-graphic--mobile .interactive-graphic__text{font-size:16px}.interactive-graphic--mobile .interactive-graphic__visual{grid-area:media;align-self:end;justify-self:center;--interactive-graphic-mobile-visual-max-h: calc( 100vh - var(--interactive-graphic-sticky-header-offset, 0px) - var(--interactive-graphic-mobile-content-height, 14rem) );width:min(100vw,calc(var(--interactive-graphic-mobile-visual-max-h) * var(--interactive-graphic-stage-aspect-w, 800) / var(--interactive-graphic-stage-aspect-h, 680)));max-width:100vw;margin-left:calc(50% - 50vw);max-height:var(--interactive-graphic-mobile-visual-max-h);aspect-ratio:var(--interactive-graphic-stage-aspect-w, 800) / var(--interactive-graphic-stage-aspect-h, 680);min-height:0}.interactive-graphic--mobile .interactive-graphic__media{width:100%;height:100%;aspect-ratio:auto;min-height:0}.interactive-graphic--mobile.interactive-graphic--carton-active .interactive-graphic__sticky,.interactive-graphic--mobile.interactive-graphic--carton-active .interactive-graphic__container{overflow:visible}.interactive-graphic--mobile{--interactive-graphic-carton-width-ratio: 1.85}.interactive-graphic:not(.interactive-graphic--mobile) .interactive-graphic__scroll-track{height:auto}.interactive-graphic:not(.interactive-graphic--mobile) .interactive-graphic__sticky{position:relative;min-height:0;height:auto}.interactive-graphic:not(.interactive-graphic--mobile) .interactive-graphic__container{grid-template-columns:100%;grid-template-areas:"media" "content";gap:var(--gutter-large)}.interactive-graphic:not(.interactive-graphic--mobile) .interactive-graphic__media{width:100%;height:100%;min-height:0}.interactive-graphic:not(.interactive-graphic--mobile) .interactive-graphic__visual{width:100%;aspect-ratio:var(--interactive-graphic-stage-aspect-w, 800) / var(--interactive-graphic-stage-aspect-h, 680);min-height:0;margin-left:0;max-width:100%;height:auto;max-height:none}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-frame,.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-final{left:44.5%;transform-origin:top center}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-frame{transform:translate(-50%,var(--overlay-rise-rest, 0))}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-final{transform:translate(-50%)}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-frame.is-visible,.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__carton-final.is-visible{opacity:1}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__overlay--rise-from-soil:not(.is-visible),.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__overlay--rise-from-soil.is-visible{transform:none}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__step{position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin-bottom:1.5rem}.interactive-graphic:not(.interactive-graphic--scroll-rise) .interactive-graphic__step:not(.is-active){display:none}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/section-interactive-graphic.css.map */