.material-story{--ms-paper: oklch(.998 .001 75);--ms-paper-soft: oklch(.992 .002 75);--ms-ink: oklch(.18 .005 75);--ms-ink-muted: oklch(.45 .004 75);--ms-ink-quiet: oklch(.62 .004 75);--ms-hairline: oklch(.88 .005 75);--ms-ease-out: cubic-bezier(.22, 1, .36, 1);--ms-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--ms-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;position:relative;width:100%;background:var(--ms-paper);color:var(--ms-ink);height:calc(var(--ms-track-vh, 400) * 1vh);isolation:isolate}.material-story__stage{position:sticky;top:0;height:100vh;width:100%;display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,1180px) minmax(80px,1fr);grid-template-rows:clamp(96px,14vh,160px) 1fr clamp(96px,14vh,160px);align-items:stretch;overflow:hidden}.material-story__heading{grid-column:2;grid-row:1;align-self:end;text-align:center;font-family:var(--ms-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ms-ink-muted);margin:0 0 clamp(24px,4vh,48px);transition:opacity .6s var(--ms-ease-out),transform .6s var(--ms-ease-out);transform:translateY(0)}.material-story__heading[data-fade=true]{opacity:0;transform:translateY(-8px)}.material-story__frame{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,calc(var(--ms-video-pct, 60) * 1%)) minmax(0,1fr);align-items:center;column-gap:clamp(40px,6vw,96px);width:100%}.material-story[data-layout=side][data-text=right] .material-story__media{grid-column:1}.material-story[data-layout=side][data-text=right] .material-story__callouts{grid-column:2}.material-story[data-layout=side][data-text=left] .material-story__frame{grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--ms-video-pct, 60) * 1%))}.material-story[data-layout=side][data-text=left] .material-story__media{grid-column:2}.material-story[data-layout=side][data-text=left] .material-story__callouts{grid-column:1}.material-story[data-layout=side][data-text=left] .material-story__progress{grid-column:3;justify-self:start;align-items:flex-start;padding-right:0;padding-left:clamp(20px,3vw,56px)}@media(min-width:901px){.material-story[data-layout=fill] .material-story__stage{grid-template-columns:1fr;grid-template-rows:1fr;padding:0}.material-story[data-layout=fill] .material-story__heading{grid-column:1;grid-row:1;position:absolute;top:clamp(40px,6vh,80px);left:50%;transform:translate(-50%);margin:0;z-index:2}.material-story[data-layout=fill] .material-story__heading[data-fade=true]{transform:translate(-50%) translateY(-8px)}.material-story[data-layout=fill] .material-story__frame{grid-column:1;grid-row:1;position:relative;display:block;width:100%;height:100%;column-gap:0}.material-story[data-layout=fill] .material-story__media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;aspect-ratio:auto;background:var(--ms-paper)}.material-story[data-layout=fill] .material-story__video{width:100%;height:100%;object-fit:cover}.material-story[data-layout=fill] .material-story__callouts{position:absolute;bottom:clamp(72px,12vh,120px);min-height:clamp(160px,24vh,220px);z-index:2}.material-story[data-layout=fill] .material-story__progress{position:absolute;bottom:clamp(72px,12vh,120px);top:auto;transform:none;align-self:auto;justify-self:auto;flex-direction:column;padding:0;z-index:2}.material-story[data-layout=fill][data-text=right] .material-story__callouts{right:clamp(40px,6vw,96px);left:auto}.material-story[data-layout=fill][data-text=right] .material-story__progress{left:clamp(40px,6vw,96px);right:auto;align-items:flex-start}.material-story[data-layout=fill][data-text=left] .material-story__callouts{left:clamp(40px,6vw,96px);right:auto}.material-story[data-layout=fill][data-text=left] .material-story__progress{right:clamp(40px,6vw,96px);left:auto;align-items:flex-end}}.material-story__media{aspect-ratio:16 / 9;background:var(--ms-paper-soft);overflow:hidden;position:relative}.material-story__video{width:100%;height:100%;object-fit:cover;display:block}.material-story__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--ms-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ms-ink-quiet)}.material-story__callouts{position:relative;min-height:clamp(180px,28vh,280px);display:block}.material-story__callout{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;opacity:0;transform:translate(var(--c-x, 0px),calc(var(--c-y, 0px) + 14px));transition:opacity .54s var(--ms-ease-out),transform .54s var(--ms-ease-out);pointer-events:none;text-align:left}.material-story__callout[data-active=true]{opacity:1;transform:translate(var(--c-x, 0px),var(--c-y, 0px))}.material-story__callout[data-align=center]{align-items:center;text-align:center}.material-story__callout[data-align=right]{align-items:flex-end;text-align:right}.material-story__eyebrow{font-family:var(--ms-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ms-ink-muted);font-variant-numeric:tabular-nums}.material-story__phrase{font-family:var(--ms-sans);font-size:calc(clamp(22px,2.4vw,34px) * (var(--c-scale, 100) / 100));font-weight:450;line-height:1.18;letter-spacing:-.018em;color:var(--ms-ink);margin:0;width:max-content;max-width:var(--c-width, 22ch);text-wrap:balance;text-align:inherit}.material-story__progress{grid-column:1;grid-row:2;justify-self:end;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:14px;padding-right:clamp(20px,3vw,56px);pointer-events:none}.material-story__progress-counter{font-family:var(--ms-mono);font-size:11px;letter-spacing:.08em;color:var(--ms-ink-quiet);font-variant-numeric:tabular-nums}.material-story__progress-track{position:relative;width:1px;height:clamp(96px,16vh,180px);background:var(--ms-hairline);overflow:hidden}.material-story__progress-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--ms-ink);transform:scaleY(0);transform-origin:top;transition:transform .18s var(--ms-ease-out)}@media(max-width:900px){.material-story__stage{grid-template-columns:1fr;grid-template-rows:clamp(64px,10vh,96px) 1fr clamp(64px,10vh,96px);padding:0}.material-story__heading{grid-column:1;padding:0 20px;margin-bottom:clamp(16px,3vh,32px)}.material-story__frame{grid-column:1;grid-template-columns:1fr;grid-template-rows:auto auto;row-gap:clamp(20px,4vh,40px)}.material-story__media{width:calc(var(--ms-video-pct-mobile, 100) * 1%);margin:0 auto}.material-story__callouts{min-height:clamp(120px,22vh,180px);padding:0 20px}.material-story__phrase{font-size:clamp(20px,5vw,28px);width:auto;max-width:100%;overflow-wrap:break-word}.material-story__progress{grid-column:1;grid-row:3;justify-self:stretch;align-self:end;flex-direction:row;align-items:center;gap:16px;padding:0 20px clamp(20px,4vh,40px)}.material-story__progress-track{width:100%;height:1px;flex:1}.material-story__progress-fill{transform:scaleX(0);transform-origin:left}.material-story[data-layout-mobile=fill] .material-story__stage{display:block;height:100vh;width:100vw;padding:0}.material-story[data-layout-mobile=fill] .material-story__heading{position:absolute;top:clamp(20px,4vh,40px);left:50%;transform:translate(-50%);margin:0;z-index:3;padding:0 20px}.material-story[data-layout-mobile=fill] .material-story__heading[data-fade=true]{transform:translate(-50%) translateY(-8px)}.material-story[data-layout-mobile=fill] .material-story__frame{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;row-gap:0;margin:0}.material-story[data-layout-mobile=fill] .material-story__media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;aspect-ratio:auto;margin:0;z-index:0}.material-story[data-layout-mobile=fill] .material-story__video{width:100%;height:100%;object-fit:cover}.material-story[data-layout-mobile=fill] .material-story__callouts{position:absolute;bottom:clamp(72px,14vh,120px);left:20px;right:20px;z-index:2;min-height:0;padding:0}.material-story[data-layout-mobile=fill] .material-story__progress{position:absolute;bottom:24px;left:20px;right:20px;z-index:2;padding:0}}@media(prefers-reduced-motion:reduce){.material-story{height:auto}.material-story__stage{position:static;height:auto;padding:clamp(64px,10vh,120px) clamp(20px,4vw,64px);display:block;overflow:visible}.material-story__frame{display:block}.material-story__media{margin:0 auto 40px;max-width:1180px}.material-story__callouts{position:static;display:flex;flex-direction:column;gap:28px;min-height:0;max-width:720px;margin:0 auto}.material-story__callout{position:static;inset:auto;opacity:1;transform:none}.material-story__heading{text-align:center;margin-bottom:clamp(24px,4vh,48px);opacity:1!important;transform:none!important}.material-story__progress{display:none}}
/*# sourceMappingURL=/cdn/shop/t/63/assets/material-story.css.map */