:root{--color-primary:oklch(70.7181% .167949 242.042);--color-secondary:oklch(54.6109% .250834 264.297);--triangle:polygon(100% 0%, 100% 100%, 0% 0%);--dimension:6em;--timing:cubic-bezier(1, 0, .8, 1.24);--dur:1.56s;--delay:20ms}body{background:oklch(0% 0 0);align-items:center;block-size:100dvh;display:flex}.container{grid-template-columns:repeat(4,minmax(auto,1fr));gap:2cqi;inline-size:100%;font-size:4cqi;transition:all .5s;display:grid;container-type:inline-size}.block{block-size:var(--dimension);inline-size:var(--dimension);contain:layout paint;position:relative;& .bloc{block-size:calc(var(--dimension) / 2);aspect-ratio:1;animation:reveal var(--dur) var(--timing) forwards;background:oklch(100% 5.96046e-8 90)}& :nth-child(2){--delay:.24s;background:var(--color-primary);animation:reveal-1 var(--dur) var(--timing) forwards}& .half-circle{--dur:1.64s;--delay:.12s;inline-size:var(--dimension);aspect-ratio:1;opacity:0;background:linear-gradient(to right, transparent 50%, var(--color-secondary) 0%);animation:half-circle-enter var(--dur) var(--timing) forwards;border-radius:0% 50% 50% 0%;position:absolute;translate:-2em}}.triangles{block-size:var(--dimension);inline-size:var(--dimension);contain:layout paint;position:relative}.triangles .triangle{--dimension:3em;--dur:2.24s;--delay:.24s;block-size:var(--dimension);inline-size:var(--dimension);background:var(--color-secondary);clip-path:var(--triangle);animation:triangle-enter var(--dur) var(--timing) forwards;position:absolute;inset-block-end:6px}.triangles .triangle:nth-child(2){--dimension:5.86em;background:var(--color-primary);inset-block-end:3%;inset-inline-start:2%}.triangles .triangle:nth-child(3){z-index:10;background:oklch(100% 5.96046e-8 90);inset-block-start:0%;transform:translate(3em)}.circles{--delay:20ms;grid-template-columns:var(--dimension);grid-template-rows:var(--dimension);contain:layout;place-content:center;place-items:center;margin:0;padding:0;display:grid}.circles .circle{--dimension:6em;--dur:2.88s;block-size:var(--dimension);inline-size:var(--dimension);background:var(--color-secondary);transform-origin:50%;animation:circles var(--dur) var(--timing) forwards;z-index:1;border-radius:50%;grid-area:1/1}.circles .circle:nth-child(2){--dimension:4em;--dur:3.2s;background:var(--color-primary);z-index:2}.circles .circle:nth-child(3){--dimension:2em;--dur:3.4s;z-index:3;background:oklch(100% 5.96046e-8 90)}.polygon-F{block-size:var(--dimension);inline-size:var(--dimension);contain:layout paint;flex-flow:column;align-items:center;display:flex}.polygon-F .polygon{--dimension:2em;--dur:3.36s;--delay:.1s;block-size:var(--dimension);inline-size:var(--dimension);animation:polygons var(--dur) var(--timing) forwards;background:oklch(100% 5.96046e-8 90);position:relative}.polygon-F .polygon:nth-child(2){--delay:.4s;background:var(--color-primary)}.polygon-F .polygon:nth-child(3){background:var(--color-secondary);clip-path:var(--triangle);transform:translate(-2em)}.top:before,.mid:before{--dimension:2em;block-size:var(--dimension);inline-size:var(--dimension);content:"";clip-path:var(--triangle);background:inherit;position:absolute;inset-block-start:0;transform:translate(-2em)}.mid{transform:translate(-2em)}.mid:before{clip-path:polygon(0% 0%,100% 100%,0% 100%);transform:translate(2em)}.reset-btn{color:oklch(100% 5.96046e-8 90);cursor:pointer;opacity:.5;background:0 0;border:none;font-family:sans-serif;font-weight:700;transition:opacity .2s;position:fixed;bottom:4cqi;right:4cqi;&:hover{opacity:1}}@keyframes reveal{0%{clip-path:polygon(100% 100%,100% 100%,100% 100%,100% 100%);opacity:0;filter:blur(12px)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;filter:blur()}}@keyframes reveal-1{0%{clip-path:polygon(0 100%,0 100%,0 100%,0 100%);opacity:0;filter:blur(12px)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;filter:blur()}}@keyframes half-circle-enter{to{opacity:1;filter:blur();translate:0}}@keyframes triangle-enter{0%{opacity:0;filter:blur(2px);translate:-1rem .5rem;scale:.5}}@keyframes circles{0%{opacity:0;filter:blur(2px);translate:-1rem .5rem;scale:.5}}@keyframes polygons{0%{opacity:0;filter:blur(2px);translate:-1rem .5rem;scale:.5}}