story-scroll{display:block}.story-scroll__inner{display:grid;gap:var(--space-l)}.story-scroll__intro{display:grid;gap:var(--space-s);max-width:34rem}.story-scroll__intro .eyebrow,.story-scroll__heading{margin:0}.story-scroll__heading{font-size:var(--text-statement);line-height:1.02;text-wrap:balance}.story-scroll__intro-text{color:var(--muted);font-size:var(--text-body-l)}.story-scroll__stage{position:relative;display:grid;justify-items:end;gap:var(--space-s)}.story-scroll__frame{position:relative;isolation:isolate;width:min(100% - var(--space-m),23.75rem);margin-inline-end:var(--space-m);transition:transform var(--duration-slow) var(--ease-out)}.story-scroll__frame:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border:1px solid var(--sand);border-radius:var(--radius-media);transform:translate(var(--space-m),var(--space-m));transition:transform var(--duration-slow) var(--ease-out)}.story-scroll__image{display:block;width:100%;height:auto;border-radius:var(--radius-media);background:var(--band)}.story-scroll--motif .story-scroll__frame{padding:var(--space-m);border-radius:var(--radius-media);background:var(--band)}.story-scroll--sculpture .story-scroll__frame{width:min(100% - var(--space-m),30rem);border-radius:var(--radius-media);background:radial-gradient(closest-side,var(--surface),var(--band))}.story-scroll__sculpture{width:100%;transition:transform var(--duration-slow) var(--ease-out)}.story-scroll__slot{min-height:0;padding:var(--space-xs) var(--space-s)}.story-scroll__words{display:none}.story-scroll__chapters{display:grid;margin:0;padding:0;list-style:none}.story-scroll__chapter{display:grid;align-content:start;gap:var(--space-xs);padding-block:var(--space-m);border-top:var(--hairline)}.story-scroll__label{display:flex;align-items:baseline;gap:var(--space-s);margin:0;font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}.story-scroll__index{color:var(--muted);font-variant-numeric:tabular-nums}.story-scroll__title{margin:0;font-family:var(--font-display);font-size:var(--text-h2);font-weight:var(--font-display-weight);line-height:1.08;letter-spacing:-.025em}.story-scroll__text{max-width:36ch;margin:0;color:var(--muted)}@media(min-width:990px){.story-scroll__inner{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:0;align-items:start}.story-scroll__intro{grid-column:1 / span 5;grid-row:1;padding-bottom:var(--space-l)}.story-scroll__chapters{grid-column:1 / span 5;grid-row:2}.story-scroll__chapter{min-height:42svh;align-content:center;padding-block:var(--space-l)}.story-scroll__chapter:before{content:"";width:48px;height:1px;margin-bottom:var(--space-s);background:var(--fg);transform:scaleX(.34);transform-origin:left;transition:transform var(--duration-slow) var(--ease-out)}.story-scroll__chapter[data-current]:before{transform:none}.story-scroll__stage{grid-column:7 / -1;grid-row:1 / span 2;position:sticky;top:calc(var(--header-offset) + var(--space-m));min-height:calc(100svh - var(--header-offset) - var(--space-m) * 2);align-content:center}.story-scroll__frame{margin-inline-end:var(--space-l)}.story-scroll__words{position:absolute;inset-inline-start:0;bottom:14%;display:grid;margin:0;font-family:var(--font-display);font-size:clamp(4rem,1rem + 5.4vw,7.5rem);font-weight:var(--font-display-weight);line-height:.9;letter-spacing:-.05em;pointer-events:none}.story-scroll__word{grid-area:1 / 1;opacity:0;transform:translateY(.12em);transition:opacity var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-out)}story-scroll:not([data-ready]) .story-scroll__word:first-child,.story-scroll__word[data-current]{opacity:1;transform:none}story-scroll[data-pose=move] .story-scroll__frame{transform:translateY(calc(var(--space-s) * -1))}story-scroll[data-pose=move] .story-scroll__frame:before{transform:translate(calc(var(--space-m) * 1.5),calc(var(--space-m) * .5))}story-scroll[data-pose=store] .story-scroll__frame{transform:scale(.96)}story-scroll[data-pose=store] .story-scroll__frame:before{transform:translate(var(--space-s),var(--space-s))}story-scroll[data-pose=move] .story-scroll__sculpture{transform:rotate(-9deg)}story-scroll[data-pose=store] .story-scroll__sculpture{transform:rotate(7deg) scale(.84)}}.story-scroll--form{--fg: var(--on-inverse);--muted: var(--muted-inverse);--accent: var(--on-inverse);--accent-fg: var(--inverse);--border: var(--border-inverse);overflow:clip;color:var(--fg);background:var(--stage)}.story-scroll--form .eyebrow{color:var(--sand)}.story-scroll--form .story-scroll__inner{gap:var(--space-m)}.story-scroll--form .story-scroll__chapter{border-top-color:var(--stage-edge)}.story-scroll--form .story-scroll__frame{display:grid;width:min(72vw,320px);margin-block:-12% -10%;margin-inline-end:0}.story-scroll--form .story-scroll__frame:before{content:none}.story-scroll__form{grid-area:1 / 1;z-index:1}.story-scroll__glow{position:absolute;top:-22%;right:-22%;bottom:-22%;left:-22%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,var(--stage-glow),transparent)}@media(min-width:990px){.story-scroll--form .story-scroll__inner{row-gap:var(--space-l);align-items:center}.story-scroll--form .story-scroll__intro{grid-column:1 / span 6;padding-bottom:0}.story-scroll--form .story-scroll__stage{grid-column:7 / -1;grid-row:1;position:relative;top:auto;min-height:0;justify-items:center}.story-scroll--form .story-scroll__frame{width:min(100%,30rem);margin-block:-8% 0}.story-scroll__glow{top:-14%;right:-14%;bottom:-14%;left:-14%}.story-scroll--form .story-scroll__chapters{grid-column:1 / -1;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;column-gap:var(--grid-gap);align-self:start}.story-scroll--form .story-scroll__chapter{min-height:0;align-content:start;padding-block:var(--space-m) 0}.story-scroll--form story-scroll[data-pose] .story-scroll__frame{transform:none}.story-scroll--form .story-scroll__chapter:before{content:none}}@media screen and (prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){@keyframes story-form-turn{0%{transform:translate3d(0,8%,0) rotate(-7deg)}to{transform:translate3d(0,-6%,0) rotate(5deg)}}.story-scroll--form .story-scroll__frame{animation:story-form-turn linear both;animation-timeline:view();animation-range:cover}}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-story-scroll.css.map */