.story{--story-header:4rem;--story-beats:5}.story-track{position:relative;height:calc(var(--story-beats) * 100vh);height:calc(var(--story-beats) * 100svh)}.story-stage{position:sticky;top:var(--story-header);display:grid;align-content:center;gap:1.5rem;height:calc(100vh - var(--story-header));height:calc(100svh - var(--story-header))}.story-frames{display:grid;grid-template-areas:"stage";margin:0;padding:0;list-style:none}.story-frame{grid-area:stage;display:grid;gap:1rem;align-content:center;background:hsl(var(--background))}.story-shot{position:relative;aspect-ratio:1440/900;overflow:hidden;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--muted))}.story-shot img{display:block;width:100%;height:100%;object-fit:cover}.story-steps{position:absolute;inset:0;display:grid;grid-template-rows:repeat(5,1fr);margin:0;padding:0;list-style:none;pointer-events:none}@media (min-width:64rem){.story-frame{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center;gap:2.5rem}}@keyframes story-reveal{0%{opacity:0;transform:translateY(8%) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes story-glide{0%{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-3%)}}@keyframes story-caption{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@supports ((animation-timeline:view()) and (timeline-scope:--story-beat-1)){.story-track{timeline-scope:--story-beat-1,--story-beat-2,--story-beat-3,--story-beat-4,--story-beat-5}.story-step{view-timeline-axis:block}.story-step:first-child{view-timeline-name:--story-beat-1}.story-step:nth-child(2){view-timeline-name:--story-beat-2}.story-step:nth-child(3){view-timeline-name:--story-beat-3}.story-step:nth-child(4){view-timeline-name:--story-beat-4}.story-step:nth-child(5){view-timeline-name:--story-beat-5}.story-frame,.story-frame .story-caption,.story-frame .story-shot img{animation-timing-function:linear;animation-fill-mode:both}.story-frame{animation-name:story-reveal;animation-range:entry 15% entry 85%}.story-frame .story-caption{animation-name:story-caption;animation-range:entry 35% entry 95%}.story-frame .story-shot img{animation-name:story-glide;animation-range:cover 0 cover 100%}.story-frame:first-child,.story-frame:first-child .story-caption{animation-name:none}.story-frame:first-child .story-shot img{animation-timeline:--story-beat-1}.story-frame:nth-child(2),.story-frame:nth-child(2) .story-caption,.story-frame:nth-child(2) .story-shot img{animation-timeline:--story-beat-2}.story-frame:nth-child(3),.story-frame:nth-child(3) .story-caption,.story-frame:nth-child(3) .story-shot img{animation-timeline:--story-beat-3}.story-frame:nth-child(4),.story-frame:nth-child(4) .story-caption,.story-frame:nth-child(4) .story-shot img{animation-timeline:--story-beat-4}.story-frame:nth-child(5),.story-frame:nth-child(5) .story-caption,.story-frame:nth-child(5) .story-shot img{animation-timeline:--story-beat-5}}@supports not ((animation-timeline:view()) and (timeline-scope:--story-beat-1)){.story[data-fallback=on] .story-frame{opacity:0;transform:translateY(8%) scale(.97);transition:opacity .5s ease,transform .5s ease}.story[data-fallback=on] .story-frame[data-shown=true]{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.story[data-fallback] .story-track{height:auto}.story[data-fallback] .story-stage{position:static;height:auto}.story[data-fallback] .story-steps{display:none}.story[data-fallback] .story-frames{grid-template-areas:none;gap:3rem}.story[data-fallback] .story-frame{grid-area:auto;transition:none}.story[data-fallback] .story-frame,.story[data-fallback] .story-frame .story-caption,.story[data-fallback] .story-frame .story-shot img{opacity:1;transform:none;animation-name:none}}