.scroll-by-element{--scroll-by-element-progress: 0;--scroll-by-element-scroll-in-progress: 0;--scroll-by-element-darken-progress: 0;--progress: clamp(0, var(--scroll-by-element-progress), 1);--initial-w: 11rem;--initial-h: 11rem;--visible-w: calc( var(--initial-w) + var(--progress) * 1.12 * (100% - var(--initial-w)) );--visible-h: calc(var(--initial-h) + var(--progress) * (100% - var(--initial-h)));--inset-w: calc((100% - var(--visible-w)) / 2);--inset-h: calc((100% - var(--visible-h)) / 2);--scroll-by-element-tail: 150lvh;display:grid;position:relative;max-width:100vw;overflow:clip}@media(prefers-reduced-motion){.scroll-by-element{--scroll-by-element-progress: 1}}@media(min-width:768px){.scroll-by-element{--initial-w: 15rem;--initial-h: 15rem}}@media(min-width:1024px){.scroll-by-element{--initial-w: 20rem;--initial-h: 20rem}}@media(min-width:1440px){.scroll-by-element{--initial-w: 25rem;--initial-h: 25rem}}.scroll-by-element__background{grid-area:1/1/-1/-1;position:sticky;align-self:flex-start;inset-block-start:0;height:100vh;width:100vw}.scroll-by-element__video{grid-area:1/1/-1/-1;position:sticky;inset-block-start:0;width:100vw;height:100vh;object-fit:cover;clip-path:inset(var(--inset-h) var(--inset-w) var(--inset-h) var(--inset-w) round .125rem)}.scroll-by-element__video .backdrop{opacity:var(--scroll-by-element-darken-progress)}.scroll-by-element__initial-caption{grid-area:1/1/-1/-1;position:sticky;inset-block-start:0;height:100vh;padding-top:8.5rem;text-align:center}.scroll-by-element__vertical-headline{--vertical-headline-offset: calc(var(--inset-w) * -1);--vertical-headline-scroll-in-offset: calc(-50% * (1 - var(--scroll-by-element-scroll-in-progress)));grid-area:1/1/-1/-1;position:sticky;inset-block-start:0;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;text-align:center;z-index:3;transform:translate(var(--vertical-headline-offset)) translate(50%) rotate(-90deg) translate(var(--vertical-headline-scroll-in-offset));pointer-events:none;-webkit-user-select:none;user-select:none}.scroll-by-element__foreground{position:relative;grid-area:1/1/-1/-1;z-index:1;padding:200lvh 0 70svh}.scroll-by-element__header-group .headline{max-width:60rem}
