Upload title animation

<div class="container">
	<svg viewBox="0 0 1200 800">
		<defs>
			<symbol id="glitch">
				<rect
					x="374.28"
					y="452.4"
					width="7.5217"
					height="17.3"
					fill="#25db0f"
					fill-opacity=".60364"
					stroke-width=".75217"
				/>
				<rect
					x="371.12"
					y="452.4"
					width="3.1591"
					height="17.3"
					fill="#7d0000"
					fill-opacity=".7407"
					stroke-width=".75217"
				/>
				<rect
					x="454.37"
					y="458.82"
					width="72.8"
					height="11.3"
					fill="#4e420e"
					fill-opacity=".91041"
					stroke-width=".533"
				/>
				<rect
					x="481.31"
					y="465.08"
					width="20"
					height="5.1"
					fill="#c9ad0d"
					fill-opacity=".54034"
					stroke-width=".92195"
				/>
				<rect
					x="454.37"
					y="464.42"
					width="39.8"
					height="5.7"
					fill="#c9ad0d"
					fill-opacity=".54034"
					stroke-width=".7746"
				/>
				<rect
					x="491.77"
					y="458.82"
					width="35.4"
					height="5.4"
					fill="#940a26"
					fill-opacity=".71372"
					stroke-width=".46456"
				/>
				<rect
					x="899.8"
					y="377.94"
					width="69.2"
					height="23"
					fill="#f2d243"
					fill-opacity=".54905"
				/>
				<rect
					x="825.33"
					y="341.5"
					width="40"
					height="22"
					fill="#076528"
					fill-opacity=".71372"
					stroke-width=".64734"
				/>
				<rect
					x="831.89"
					y="351.12"
					width="45.8"
					height="20"
					fill="#d9a60f"
					fill-opacity=".71372"
					stroke-width=".78326"
				/>
				<rect
					x="755.25"
					y="341.52"
					width="60"
					height="20"
					fill="#076508"
					fill-opacity=".71372"
					stroke-width=".75593"
				/>
				<rect
					x="695.25"
					y="341.52"
					width="60"
					height="20"
					fill="#5f0765"
					fill-opacity=".71372"
					stroke-width=".60394"
				/>
				<rect
					x="519.76"
					y="361.52"
					width="166.3"
					height="3"
					fill="#795736"
					fill-opacity=".71372"
					stroke-width=".86944"
				/>
				<rect
					x="579.76"
					y="341.52"
					width="60"
					height="20"
					fill="#076465"
					fill-opacity=".71372"
					stroke-width=".75593"
				/>
				<rect
					x="519.76"
					y="341.52"
					width="60"
					height="20"
					fill="#006c1c"
					fill-opacity=".71372"
					stroke-width=".75593"
				/>
				<rect
					x="639.76"
					y="341.52"
					width="46.3"
					height="20"
					fill="#2616a7"
					fill-opacity=".71372"
					stroke-width=".51437"
				/>
			</symbol>
			<filter
				id="blur"
				x="-.033535"
				y="-.0071925"
				width="1.0671"
				height="1.0144"
				color-interpolation-filters="sRGB"
			>
				<feGaussianBlur stdDeviation="1.3389534" />
			</filter>
			<linearGradient
				id="beamGradient"
				x1="1828.9"
				x2="1988.4"
				y1="188.13"
				y2="188.13"
				gradientUnits="userSpaceOnUse"
			>
				>
				<stop stop-color="#f0f0f0" stop-opacity=".81345" offset="0" />
				<stop stop-color="#b3b3b3" offset="1" />
			</linearGradient>
		</defs>
		<use class="glitches" href="#glitch" x="0" y="100" opacity="0"></use>
		<use class="glitches" href="#glitch" x="-50" y="50" opacity="0"></use>
		<use class="glitches" href="#glitch" x="20" y="20" opacity="0"></use>
		<use class="glitches" href="#glitch" opacity="0"></use>
		<rect
			id="beam"
			x="-10"
			width="10"
			height="800"
			fill="url(#beamGradient)"
			filter="url(#blur)"
		/>
		<g id="title">
			<path
				id="knockout-text"
				d="m0 0v800h1200v-800zm643.9 328.1c14.4 0 27.133 3.0678 38.199 9.2012 11.2 6 19.867 14.465 26 25.398 6.2667 10.8 9.4004 23.267 9.4004 37.4 0 13.867-3.1337 26.268-9.4004 37.201-6.1333 10.8-14.8 19.265-26 25.398s-23.933 9.2012-38.199 9.2012c-14.4 0-27.2-3.0678-38.4-9.2012-11.067-6.1333-19.733-14.598-26-25.398-6.1333-10.933-9.2012-23.334-9.2012-37.201 0-14 3.0678-26.467 9.2012-37.4 6.2667-10.933 14.933-19.398 26-25.398 11.2-6.1333 24-9.2012 38.4-9.2012zm-431.4 3h45.199v80.6c0 8 1.9341 14 5.8008 18s9.5333 6 17 6 13.133-2 17-6c3.8667-4.1333 5.7988-10.133 5.7988-18v-80.6h45.201v80.6c0 11.733-2.8682 22.2-8.6016 31.4-5.7333 9.0667-13.799 16.134-24.199 21.201-10.267 5.0667-21.999 7.5996-35.199 7.5996s-25-2.5329-35.4-7.5996c-10.267-5.0667-18.267-12.134-24-21.201-5.7333-9.2-8.5996-19.667-8.5996-31.4v-80.6zm150.8 0h49.6c20.533 0 36.4 4 47.6 12 11.333 8 17 19.2 17 33.6 0 9.0667-2.7984 17.001-8.3984 23.801-5.4667 6.8-13.002 12.067-22.602 15.801-9.4667 3.6-20 5.3984-31.6 5.3984h-8.4004v47h-43.199v-137.6zm119.8 0h43.201v107.2h47.799v30.398h-91v-137.6zm267.2 0h60.801l39.799 137.6h-47l-5.1992-26.398h-35.6l-5.8008 26.398h-45zm103.8 0h59.799c14.4 0 27.134 2.8663 38.201 8.5996 11.2 5.7333 19.867 13.733 26 24 6.2667 10.267 9.3984 22.001 9.3984 35.201 0 13.867-3.0659 26.066-9.1992 36.6-6 10.533-14.601 18.733-25.801 24.6-11.067 5.7333-23.933 8.5996-38.6 8.5996h-59.799v-137.6zm-73.201 26.4-13.6 60.199h26.6zm-374.4 2.4004v33.6c2.6667 0.26667 5.5349 0.40039 8.6016 0.40039 7.0667 0 12.532-1.4671 16.398-4.4004s5.8008-7.2008 5.8008-12.801-1.9341-9.7996-5.8008-12.6c-3.7333-2.8-9.1984-4.1992-16.398-4.1992h-8.6016zm237.2 3.4004c-5.4667 0-10.399 1.5988-14.799 4.7988-4.4 3.0667-7.8012 7.4-10.201 13-2.4 5.4667-3.5996 11.734-3.5996 18.801 0 10.667 2.6667 19.266 8 25.799s12.267 9.8008 20.801 9.8008c8.4 0 15.266-3.2674 20.6-9.8008 5.4667-6.5333 8.1992-15.132 8.1992-25.799 0-7.0667-1.2655-13.334-3.7988-18.801-2.4-5.6-5.8012-9.9333-10.201-13-4.4-3.2-9.4-4.7988-15-4.7988zm254.6 3.7988v65.6h13.6c10 0 17.601-3.1318 22.801-9.3984 5.3333-6.4 8-14.667 8-24.801 0-9.6-2.6008-17.201-7.8008-22.801-5.0667-5.7333-12.733-8.5996-23-8.5996h-13.6z"
			/>
			<g
				id="stroked-text"
				fill="none"
				stroke="#fff"
				stroke-width="4"
				aria-label="UPLOAD"
			>
				<path
					d="m280.5 471.9q-19.8 0-35.4-7.6-15.4-7.6-24-21.2-8.6-13.8-8.6-31.4v-80.6h45.2v80.6q0 12 5.8 18t17 6 17-6q5.8-6.2 5.8-18v-80.6h45.2v80.6q0 17.6-8.6 31.4-8.6 13.6-24.2 21.2-15.4 7.6-35.2 7.6z"
				/>
				<path
					d="m363.3 331.1h49.6q30.8 0 47.6 12 17 12 17 33.6 0 13.6-8.4 23.8-8.2 10.2-22.6 15.8-14.2 5.4-31.6 5.4h-8.4v47h-43.2zm51.8 62.8q10.6 0 16.4-4.4t5.8-12.8-5.8-12.6q-5.6-4.2-16.4-4.2h-8.6v33.6q4 0.4 8.6 0.4z"
				/>
				<path d="m483.1 331.1h43.2v107.2h47.8v30.4h-91z" />
				<path
					d="m643.9 471.9q-21.6 0-38.4-9.2-16.6-9.2-26-25.4-9.2-16.4-9.2-37.2 0-21 9.2-37.4 9.4-16.4 26-25.4 16.8-9.2 38.4-9.2t38.2 9.2q16.8 9 26 25.4 9.4 16.2 9.4 37.4 0 20.8-9.4 37.2-9.2 16.2-26 25.4t-38.2 9.2zm0-36.4q12.6 0 20.6-9.8 8.2-9.8 8.2-25.8 0-10.6-3.8-18.8-3.6-8.4-10.2-13-6.6-4.8-15-4.8-8.2 0-14.8 4.8-6.6 4.6-10.2 13-3.6 8.2-3.6 18.8 0 16 8 25.8t20.8 9.8z"
				/>
				<path
					d="m750.3 331.1h60.8l39.8 137.6h-47l-5.2-26.4h-35.6l-5.8 26.4h-45zm43.6 86.6-13-60.2-13.6 60.2z"
				/>
				<path
					d="m854.1 331.1h59.8q21.6 0 38.2 8.6 16.8 8.6 26 24 9.4 15.4 9.4 35.2 0 20.8-9.2 36.6-9 15.8-25.8 24.6-16.6 8.6-38.6 8.6h-59.8zm57.8 101.6q15 0 22.8-9.4 8-9.6 8-24.8 0-14.4-7.8-22.8-7.6-8.6-23-8.6h-13.6v65.6z"
				/>
			</g>
		</g>
		<rect id="reveal" x="0" y="0" width="1200" height="800" />
	</svg>
</div>

@font-face {
  font-family: "Paytone One";
  src: url("fonts/PaytoneOne-Regular.woff") format("woff");
}

:root {
  --glitch-delay: 3s;
}

body {
  height: 100dvh;
  display: grid;
  place-items: center;
  margin: 0;

  background-color: black;
}

.container {
  position: relative;

  overflow: hidden;
  width: 100%;

  animation-delay: calc(var(--glitch-delay) - 0.2s);
  animation-duration: 0.2s;
  animation-name: darken-bg;
  aspect-ratio: 1200 / 800;

  background-image: url("img/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

svg {
  width: 100%;
}

@keyframes darken-bg {
  0%,
  100% {
    filter: grayscale(90%);
  }
}

#title {
  animation-duration: 5.5s;
  animation-fill-mode: forwards;
  animation-name: grow;
  transform-origin: center center;
}

@keyframes grow {
  90% {
    transform: scale(1.2);
  }

  92% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateX(100px) scale(60);
  }
}

#reveal {
  width: 100%;
  height: 100%;

  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: reveal;
}

@keyframes reveal {
  3% {
    transform: translateX(30%);
  }

  30% {
    transform: translateX(37%);
  }

  33% {
    transform: translateX(54%);
  }

  60% {
    transform: translateX(60%);
  }

  63% {
    transform: translateX(85%);
  }

  99% {
    transform: translateX(91%);
  }

  to {
    transform: translateX(100%);
  }
}

#beam {
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: follow-reveal;
}

@keyframes follow-reveal {
  0% {
    transform: scale(0) translateX(37%);
  }

  3% {
    transform: scale(1) translateX(30%);
  }

  30% {
    transform: scale(1) translateX(37%);
  }

  33% {
    transform: translateX(54%);
  }

  60% {
    transform: translateX(60%);
  }

  63% {
    transform: translateX(85%);
  }

  99% {
    transform: translateX(91%);
  }

  to {
    transform: translateX(102%);
  }
}

.glitches {
  animation-duration: 0.1s;
  animation-name: glitch;
}

.glitches:nth-of-type(1) {
  animation-delay: var(--glitch-delay);
}

.glitches:nth-of-type(2) {
  animation-delay: calc(var(--glitch-delay) + 0.025s);
}

.glitches:nth-of-type(3) {
  animation-delay: calc(var(--glitch-delay) + 0.05s);
}

.glitches:nth-of-type(4) {
  animation-delay: calc(var(--glitch-delay) + 0.075s);
}

.glitches:nth-of-type(5) {
  animation-delay: calc(var(--glitch-delay) + 0.01s);
}

@keyframes glitch {
  0% {
    opacity: 0.75;
  }

  40% {
    transform: translate(0, -3px);
  }

  80% {
    transform: translate(-20px, 0);
  }

  100% {
    opacity: 0;
  }
}