Home Alone title animation

<h1>
  <span class="word">HOME</span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
    <rect
      id="window"
      width="116.3203"
      height="145.40045"
      x="503.83984"
      y="327.29977"
      fill="none"
    />
    <path
      id="house-shape"
      fill="#02409f"
      d="m 426.72349,10 -128.56287,152.55972 0.14765,-25.78285 10.5359,-21.69064 H 197.31191 l 13.82706,21.69064 0.82087,125.10093 -133.376548,172.02402 87.947258,-0.0191 V 790 h 879.06915 l 3.9182,-353.98191 71.8988,-1.14448 -127.83874,-146.57023 -304.54866,-2.16989 112.6315,135.24258 -3.68957,11.73399 z m 91.35802,327.96043 h 80.54125 v 120.80703 h -80.54125 z"
    />
  </svg>
  <span class="word">ALON<span class="last-e">e</span></span>
</h1>

@font-face {
  font-family: "Old Standard TT";
  src: url("OldStandardTT-Regular.ttf");
  font-weight: 400;
}

:root {
  --primary-color: hsl(216, 99%, 31%);
  --illumination-color: hsl(234, 9%, 66%);

  --font-size: clamp(3rem, 1.2609rem + 8.6957vw, 8rem);

  --zoom-duration: 5s;
  --slide-in-delay: 3.5s;
  --slide-in-duration: 2.5s;
  --illuminate-duration: 200ms;
}

html {
  overflow: hidden;
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  background-color: black;
  color: var(--primary-color);
}

h1 {
  margin: 0;
  margin-block-end: 0.25%;
  /* compensates for last e being absolute to enable border to run the entire length */
  padding-inline-end: 0.3em;

  display: flex;
  align-items: end;

  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-style: normal;

  font-size: var(--font-size);
  letter-spacing: -0.15em;
  line-height: 0.6;

  border-block-end: 0.15rem solid var(--primary-color);

  scale: 3;
  translate: -25% 0;

  animation: zoom var(--zoom-duration);
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes zoom {
  to {
    translate: 0;
    scale: 1;
  }
}

svg {
  height: calc(var(--font-size) * 0.9);
  width: auto;
  margin-inline-start: 1%;
}

.word {
  position: relative;
  opacity: 0;
}

@keyframes slide-in {
  0.1%,
  100% {
    opacity: 1;
  }

  to {
    translate: 0;
    opacity: 1;
  }
}

.word:nth-of-type(1) {
  translate: -150% 0;

  animation: slide-in var(--slide-in-duration),
    illuminate-text1 var(--illuminate-duration);
  animation-delay: var(--slide-in-delay),
    calc(
      var(--slide-in-delay) + var(--slide-in-duration) -
        var(--illuminate-duration)
    );
  animation-fill-mode: forwards;
  animation-timing-function: ease-out, linear;
}

.word:nth-of-type(2) {
  left: -3%;

  translate: 150% 0;

  animation: slide-in var(--slide-in-duration),
    illuminate-text2 var(--illuminate-duration);
  animation-delay: var(--slide-in-delay),
    calc(
      var(--slide-in-delay) + var(--slide-in-duration) -
        var(--illuminate-duration)
    );
  animation-fill-mode: forwards;
  animation-timing-function: ease-out, linear;
}

@keyframes illuminate-text1 {
  to {
    text-shadow: 0 -0.002em var(--illumination-color),
      -0.005em 0 var(--illumination-color);
  }
}

@keyframes illuminate-text2 {
  to {
    text-shadow: 0 -0.004em var(--illumination-color),
      -0.005em 0 var(--illumination-color);
  }
}

.last-e {
  position: absolute;
  top: 6%;
  left: 101%;

  rotate: -20deg;
  transform-origin: center;
}

#window {
  animation: illuminate-window var(--illuminate-duration);
  animation-fill-mode: forwards;
  animation-delay: calc(
    var(--slide-in-delay) + var(--slide-in-duration) - var(--illuminate-duration)
  );
  animation-timing-function: linear;
}

@keyframes illuminate-window {
  100% {
    fill: var(--illumination-color);
  }
}