html{scroll-behavior:smooth}body{font-family:sans-serif,system-ui;timeline-scope:--section-1,--section-2,--section-3,--section-4}header{height:50vh;display:grid;place-items:center;background:#a219e6}header>div{width:50vw}a{position:relative;z-index:2;color:#fff}h1{font-family:Times;color:#fafafa;font-weight:700;margin:0 auto;font-size:clamp(2rem,4vw + 1rem,10rem)}main{width:50vw;margin:0 auto;padding-bottom:50vh;display:grid;gap:2rem}h2{font-size:2rem}article{position:fixed;left:1rem;top:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;width:18vw}article div{background:hsl(var(--hue) 80% 40%);font-weight:700;flex:1 1 auto;padding:1rem;border-radius:.5rem;border:4px solid black}article div{position:relative;font-size:1.25rem;text-align:center;animation:grow both linear;animation-timeline:var(--timeline);animation-range:cover}article div:before{content:"";animation:unclip both linear;animation-timeline:var(--timeline);animation-range:entry 100% exit 0%;position:absolute;inset:0;background:hsl(var(--hue) 80% 10%);clip-path:inset(0 0 100% 0)}@keyframes unclip{to{clip-path:inset(0 0 0 0)}}@keyframes grow{50%{flex:10}}section:nth-of-type(1){view-timeline:--section-1}section:nth-of-type(2){view-timeline:--section-2}section:nth-of-type(3){view-timeline:--section-3}section:nth-of-type(4){view-timeline:--section-4}