Cocktail title animation

<h1>Cocktail</h1>

@font-face {
  font-family: "Gillies Gothic Light";
  src: url("./gillies-gothic-light.otf");
  font-display: block;
}

:root {
  --animation-duration: 500ms;
  --delay-duration: 4s;

  --text-glow-color: hsl(211, 100%, 40%);
  --text-glow-color-outer: hsl(216, 100%, 17%);

  --ring-glow-color: hsla(300, 97%, 60%);
  --ring-glow-color-outer: rgba(252, 54, 252, 0.5);
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  background-color: black;
  place-items: center;
}

h1 {
  position: relative;

  color: hsl(207, 84%, 80%);

  font-family: "Gillies Gothic Light", cursive;
  font-size: clamp(6rem, 8vw + 2.5rem, 12rem);
  font-weight: 200;
  background-color: black;

  rotate: -10deg;

  opacity: 0;

  animation-name: on-text, off-text;
  animation-duration: var(--animation-duration), var(--animation-duration);
  animation-delay: 0.5s, var(--delay-duration);
  animation-timing-function: ease-in, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1, 1;
}

@keyframes on-text {
  50% {
    opacity: 1;
  }

  to {
    opacity: 1;
    text-shadow: -2px 0 10px rgba(0, 0, 0, 0.4), 0 0 5px var(--text-glow-color),
      0 0 10px var(--text-glow-color), 0 0 15px var(--text-glow-color),
      0 0 20px var(--text-glow-color), 0 0 25px var(--text-glow-color),
      0 0 30px var(--text-glow-color), 0 0 35px var(--text-glow-color-outer),
      0 0 50px var(--text-glow-color-outer),
      0 0 60px var(--text-glow-color-outer);
  }
}

@keyframes off-text {
  70% {
    opacity: 0;
  }

  to {
    opacity: 0;
    text-shadow: none;
  }
}

h1::before {
  position: absolute;
  top: -16%;
  left: 20%;

  display: inline-block;
  content: "";

  border-radius: 50%;
  width: 70%;
  aspect-ratio: 1/1;
  z-index: -1;

  border: 4px solid hsla(300, 97%, 95%);

  animation-name: on-ring, off-ring;
  animation-duration: var(--animation-duration), var(--animation-duration);
  animation-delay: 0s, var(--delay-duration);
  animation-timing-function: ease-in, ease-out;
  animation-fill-mode: forwards, forwards;
  animation-iteration-count: 1, 1;
}

@keyframes on-ring {
  to {
    filter: drop-shadow(0 0 5px var(--ring-glow-color))
      drop-shadow(0 0 10px var(--ring-glow-color))
      drop-shadow(0 0 15px var(--ring-glow-color))
      drop-shadow(0 0 30px var(--ring-glow-color-outer))
      drop-shadow(0 0 40px var(--ring-glow-color-outer));
  }
}

@keyframes off-ring {
  to {
    filter: none;
  }
}