Staggered circular title animation

<div style="--i: 1" class="layer gradient-green"></div>
<div style="--i: 2" class="layer gradient-blue-dark"></div>
<div style="--i: 3" class="layer gradient-orange"></div>
<div style="--i: 4" class="layer gradient-purple"></div>
<img src="media/title.svg" alt="The tite Rob OLeary is written in a playful, gamer-like font." eleventy:ignore />

body {
  min-height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  background-image: url("media/bg.svg");
  background-size: cover;
}

.layer {
  --animation-delay: 0.5s;

  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  /* positioned at center of letter O */
  clip-path: circle(0% at 49.6% 41.1%);

  background-blend-mode: color-burn;

  animation: circular-reveal 2s;
  animation-delay: calc(var(--animation-delay) * var(--i));
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes circular-reveal {
  to {
    clip-path: circle(85% at 50% 50%);
  }
}

img {
  width: 80%;
  max-width: 800px;

  mix-blend-mode: multiply;

  z-index: 6;
}

.gradient-green {
  background: linear-gradient(114.41deg, #0ae44820.74%, #abff84 65.5%);
}

.gradient-orange {
  background: linear-gradient(111.45deg, #ff8709 19.42%, #f7bdf8 73.08%);
}

.gradient-purple {
  background: linear-gradient(153.58deg, #f7bdf8 32.25%, #2f3cc0 92.68%);
}

.gradient-blue-dark {
  background: linear-gradient(131.77deg, #0a157a 30.82%, #15bfe4 81.82%);
}