*{box-sizing:border-box}body{background:#f5f5f5;font-family:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif}main{width:66ch;margin:0 auto;display:grid;gap:1rem;padding:4rem 0}p{margin:0}header{view-timeline:--header;height:400vh;background:#fff}header section{height:100vh;display:grid;place-items:center;position:sticky;top:0;overflow:hidden}h1{text-transform:uppercase;font-size:4rem}.title-wrapper{position:relative;perspective:250vmin}.title-wrapper img{position:absolute;width:calc(var(--width, 10) * 1vmin);aspect-ratio:1;left:calc(var(--x, 50) * 1%);translate:-50% -50%;transform-style:preserve-3d;top:calc(var(--y, 50) * 1%);animation:boom-out both linear;animation-timeline:--header;animation-range:calc(var(--start, 0) * 1%) calc(var(--finish, 0) * 1%)}@keyframes boom-out{0%{scale:.5;opacity:0;transform:translateZ(-1200vmin)}10%{opacity:1}50%{opacity:1;scale:1}90%{opacity:0}to{translate:calc(var(--tx, 0) * 1%) calc(var(--ty, 0) * 1%);scale:1;transform:translateZ(250vmin)}}