Arrested Development title animation

<h1>
  <span class="word">arrested</span>
  <span class="word">development</span>
</h1>
<svg viewBox="0 0 200 200">
  <defs>
    <linearGradient id="a">
      <stop offset="0" stop-color="#c11d2e" />
      <stop offset="1" stop-color="#a21a25" />
    </linearGradient>
    <linearGradient
      xlink:href="#a"
      id="b"
      x1="5.033"
      y1="94.042"
      x2="202.633"
      y2="94.042"
      gradientUnits="userSpaceOnUse"
      gradientTransform="translate(-4 -8.138)"
    />
    <filter
      x="0%"
      y="0%"
      width="100%"
      height="100%"
      filterUnits="objectBoundingBox"
      id="pencilTexture"
    >
      <feTurbulence
        type="fractalNoise"
        baseFrequency="2"
        numOctaves="5"
        stitchTiles="stitch"
        result="f1"
      ></feTurbulence>
      <feColorMatrix
        type="matrix"
        values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5"
        result="f2"
      ></feColorMatrix>
      <feComposite
        operator="in"
        in2="f2"
        in="SourceGraphic"
        result="f3"
      ></feComposite>
    </filter>
  </defs>
  <path
    d="M113.19 64.48c-5.924-4.83-15.165-5.534-24.343-5.743-39.77-.907-87.15 27.995-86.858 47.912.33 22.633 46.493 27.7 99.035 27.157 60.87-.627 88.115-21.994 95.875-43.258 8.5-23.29-53.938-46.112-90.84-52.155-15.104-2.474-75.355 6.15-94.086 17.236"
    fill="none"
    stroke="url(#b)"
    stroke-width="1.611"
    stroke-linecap="round"
    paint-order="stroke fill markers"
    filter="url(#pencilTexture)"
  />
</svg>

@font-face {
  font-family: "Distro Bold";
  src: url("./distro-bold.woff");
  font-display: block;
}

:root {
  --initial-delay: 50ms;
  --draw-delay: 250ms;

  --focus-animation-duration: 300ms;
  --draw-animation-duration: 400ms;
  --jump-animation-duration: 30ms;
}

*,
*::before {
  box-sizing: border-box;
}

body {
  width: 100dvw;
  height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  overflow: hidden;
}

h1 {
  grid-row: 1;
  grid-column: 1;

  font-size: clamp(4rem, 1.6522rem + 10.4348vw, 10rem);
  font-family: "Distro Bold", serif;

  margin: 0;
  opacity: 0;

  animation-name: focus, jump;
  animation-delay: var(--initial-delay),
    calc(
      var(--initial-delay) + var(--focus-animation-duration) + var(--draw-delay) +
        var(--draw-animation-duration)
    );
  animation-duration: var(--focus-animation-duration),
    var(--jump-animation-duration);
  animation-iteration-count: 1, 3;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
}

@keyframes focus {
  0% {
    opacity: 1;
    scale: 4;
    translate: 100%;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    scale: 1;
    translate: 0;
    filter: blur(0);
  }
}

@keyframes jump {
  to {
    filter: blur(8px);
    translate: 0 -30%;
  }
}

.word {
  display: block;
  line-height: 0.9;
  height: min-content;
}

.word:nth-of-type(1) {
  --color1: hsl(353, 70%, 42%);
  --color2: hsl(353, 70%, 52%);

  background: linear-gradient(
    to right,
    var(--color1) 10%,
    var(--color2) 30% 60%,
    var(--color1) 90%
  );
  color: transparent;

  -webkit-background-clip: text;
  background-clip: text;
}

.word:nth-of-type(2) {
  text-transform: uppercase;
  font-size: 0.45em;
}

svg {
  grid-row: 1;
  grid-column: 1;
  width: clamp(22rem, 11.4348rem + 46.9565vw, 49rem);
}

path {
  --length: 570;

  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);

  animation-name: draw;
  animation-delay: calc(
    var(--initial-delay) + var(--focus-animation-duration) + var(--draw-delay)
  );
  animation-duration: var(--draw-animation-duration);
  animation-fill-mode: forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}