.materials{position:relative;background-color:var(--color-background);box-shadow:0 -24px 48px #2e241b47}.materials__viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}.materials__viewport::-webkit-scrollbar{display:none}.materials__track{display:flex;margin:0;padding:0;list-style:none}.materials__panel{position:relative;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;min-width:0;height:100svh;overflow:clip}.materials__media{position:absolute;top:0;right:0;bottom:0;left:0;background-color:color-mix(in srgb,var(--brand-sage) 26%,var(--color-border))}.materials__image{width:100%;height:100%;object-fit:cover;display:block}.materials__body{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;padding-top:var(--header-height);color:var(--brand-cream);background:linear-gradient(to top,color-mix(in srgb,var(--brand-brown) 78%,transparent),color-mix(in srgb,var(--brand-brown) 52%,transparent) 45%,color-mix(in srgb,var(--brand-brown) 34%,transparent))}.materials__body-inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2xs)}.materials__index{font-family:var(--font-heading);font-size:var(--text-sm);color:color-mix(in srgb,var(--brand-cream) 75%,transparent);font-variant-numeric:tabular-nums}.materials__index-total{opacity:.6}.materials__title{margin:0;font-size:var(--text-3xl);line-height:var(--leading-tight);color:var(--brand-cream);max-width:100%;text-wrap:balance}.materials__script{display:block;margin-top:-.06em;color:color-mix(in srgb,var(--brand-sage) 42%,var(--brand-cream))}.materials__text{max-width:46ch;margin:0;color:color-mix(in srgb,var(--brand-cream) 90%,transparent)}.materials__link{margin-top:var(--space-2xs)}.materials__motif{position:absolute;right:calc(var(--gutter) + var(--safe-right));bottom:var(--space-lg);opacity:.7}@media(min-width:768px){.materials__title{font-size:var(--text-4xl)}.materials__body-inner{gap:var(--space-xs)}}@supports (animation-timeline: view()){@media(min-width:1024px){html:not(.reduce-motion):not(.simplify-motion) .materials{view-timeline-name:--materials-pin;view-timeline-axis:block}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials{height:calc(var(--panel-count) * 100svh)}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__viewport{position:sticky;top:0;height:100svh;overflow:clip;scroll-snap-type:none}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__track{display:block;position:relative;height:100%}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__panel{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;z-index:var(--panel-z, 1);pointer-events:none}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__media,html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__body{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--materials-pin;animation-range:contain var(--panel-start) contain var(--panel-end)}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__panel--from-left .materials__media{animation-name:panel-media-left}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__panel--from-left .materials__body{animation-name:panel-body-top}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__panel--from-right .materials__media{animation-name:panel-media-right}html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__panel--from-right .materials__body{animation-name:panel-body-bottom}}}@keyframes panel-media-left{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}@keyframes panel-media-right{0%{transform:translate3d(100%,0,0)}to{transform:translateZ(0)}}@keyframes panel-body-top{0%{opacity:0;transform:translate3d(0,-45%,0);pointer-events:none}60%{opacity:1;pointer-events:auto}to{opacity:1;transform:translateZ(0);pointer-events:auto}}@keyframes panel-body-bottom{0%{opacity:0;transform:translate3d(0,45%,0);pointer-events:none}60%{opacity:1;pointer-events:auto}to{opacity:1;transform:translateZ(0);pointer-events:auto}}.reduce-motion .materials__media,.reduce-motion .materials__body,.simplify-motion .materials__media,.simplify-motion .materials__body{animation:none!important;transform:none!important;opacity:1!important}@media(prefers-reduced-motion:reduce){.materials__media,.materials__body{animation:none!important;transform:none!important;opacity:1!important}}.materials__pager{position:absolute;inset-inline:0;bottom:calc(var(--space-md) + var(--safe-bottom));z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);pointer-events:none}.materials__dots{display:flex;align-items:center;gap:var(--space-2xs);margin:0;padding:0;list-style:none;pointer-events:auto}.materials__dot{display:block;width:var(--tap-min);height:var(--tap-min);padding:0;border:0;background:none;cursor:pointer;position:relative}.materials__dot:after{content:"";position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:10px;height:10px;border-radius:50%;background-color:color-mix(in srgb,var(--brand-cream) 45%,transparent);transition:background-color var(--duration-sm) var(--ease-out),scale var(--duration-sm) var(--ease-out)}.materials__dot[aria-current=true]:after{background-color:var(--brand-cream);scale:1.35}.materials__swipe-hint{display:flex;align-items:center;gap:var(--space-3xs);margin:0;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--brand-cream) 78%,transparent);transition:opacity var(--duration-md) var(--ease-out)}.materials__pager.is-used .materials__swipe-hint{opacity:0}@media(prefers-reduced-motion:no-preference){html:not(.reduce-motion) .materials__pager:not(.is-used) .materials__swipe-hint svg{animation:materials-nudge 1.8s ease-in-out infinite}}@keyframes materials-nudge{0%,60%,to{transform:translate(0)}30%{transform:translate(5px)}}@supports (animation-timeline: view()){@media(min-width:1024px){html.materials-ready:not(.reduce-motion):not(.simplify-motion) .materials__pager{display:none}}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-materials.css.map */