html{scroll-snap-type:y mandatory}body{background:#0a0a0a;display:grid;place-items:center;min-height:100vh;margin:0;overflow-x:hidden}section{display:grid;place-items:center;height:100vh;width:100vw;scroll-snap-align:center;view-timeline:--section}h2{margin:0;font-size:clamp(2rem,10vw + 1rem,20rem);color:#fafafa}section:not(:first-of-type) h2{animation:reveal both linear;animation-timeline:view();animation-range:cover 0% cover 50%}@keyframes reveal{0%{translate:0 50%;scale:.75}}.backdrop{position:fixed;inset:0;z-index:-1}.backdrop:after{content:"";position:absolute;inset:0;background:#00000080}.backdrop__track{--size-4: 2vh;width:100vw;position:absolute;inset:0;rotate:-10deg;translate:-0vmin -4vmin;-webkit-mask:linear-gradient(0deg,transparent 0,black 15% 85%,transparent) 0 50% / 100% calc(100% - (2 * var(--size-4))) no-repeat}.backdrop__curve{--size: 100vw;--size-4: 20vmin;position:absolute;inset:0;-webkit-mask:radial-gradient(35vw 120vh at 0 50%,transparent 0 50%,black 50.5%) 1% 50% / 50vw 200vh no-repeat,radial-gradient(35vw 120vh at 100% 50%,transparent 0 50%,black 50.5%) 99% 50% / 50vw 200vh no-repeat}.backdrop__images{--padding: 10vmin;display:grid;place-items:center;position:absolute;top:50%;left:50%;translate:-50% calc(-10vmin - 25vw);gap:var(--padding);padding-top:var(--padding);animation:shift both linear;animation-timeline:scroll(root)}@keyframes shift{to{translate:-50% calc(-10vmin - 25vw - (100% - 50vw - 10vmin))}}img{width:80vw;aspect-ratio:16 / 10;-o-object-fit:cover;object-fit:cover}