North by Northwest title animation

<div class="title">
	<section class="horizontal">
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
	</section>

	<section class="vertical">
		<div style="--i: 1" class="vertical-line line"></div>
		<div style="--i: 2" class="vertical-line line"></div>
		<div style="--i: 3" class="vertical-line line"></div>
		<div style="--i: 4" class="vertical-line line"></div>
		<div style="--i: 5" class="vertical-line line"></div>
		<div style="--i: 6" class="vertical-line line"></div>
		<div style="--i: 7" class="vertical-line line"></div>
		<div style="--i: 8" class="vertical-line line"></div>
		<div style="--i: 9" class="vertical-line line"></div>
		<div style="--i: 10" class="vertical-line line"></div>
		<div style="--i: 11" class="vertical-line line"></div>
		<div style="--i: 12" class="vertical-line line"></div>
		<div style="--i: 13" class="vertical-line line"></div>
		<div style="--i: 14" class="vertical-line line"></div>
		<div style="--i: 15" class="vertical-line line"></div>
		<div style="--i: 16" class="vertical-line line"></div>
		<div style="--i: 17" class="vertical-line line"></div>
		<div style="--i: 18" class="vertical-line line"></div>
		<div style="--i: 19" class="vertical-line line"></div>
		<div style="--i: 20" class="vertical-line line"></div>
		<div style="--i: 21" class="vertical-line line"></div>
		<div style="--i: 22" class="vertical-line line"></div>
		<div style="--i: 23" class="vertical-line line"></div>
		<div style="--i: 24" class="vertical-line line"></div>
		<div style="--i: 25" class="vertical-line line"></div>
		<div style="--i: 26" class="vertical-line line"></div>
		<div style="--i: 27" class="vertical-line line"></div>
		<div style="--i: 28" class="vertical-line line"></div>
		<div style="--i: 29" class="vertical-line line"></div>
		<div style="--i: 30" class="vertical-line line"></div>
		<div style="--i: 31" class="vertical-line line"></div>
		<div style="--i: 32" class="vertical-line line"></div>
		<div style="--i: 33" class="vertical-line line"></div>
	</section>

	<div class="credit">CARY GRANT</div>
	<div class="credit">EVA MARIE SAINT</div>
	<div class="credit">in ALFRED HITCHCOCK'S</div>
	
	
	<img
		class="credit title-credit"
		src="img/title.svg"
		alt="north by northwest"
	>
</div>

@font-face {
  font-family: "Franklin Gothic";
  src: url("./franklin-gothic.ttf");
}

:root {
  --bg-color: rgba(0, 128, 0, 0.493);
  --line-color: blue;
  --line-thickness: 1px;

  --horizontal-line-start: 4%;
  --horizontal-gap-lg: 4.5%;
  --horizontal-gap-sm: 1.5%;

  --vertical-gap: 3%;

  --font-size-md: clamp(1rem, 8dvw + 1.1rem, 12rem);
  --font-size-sm: clamp(1rem, 6dvw + 0.6rem, 12rem);

  --text-x-position: 50dvw;
  --text-y-position-up: -30dvh;
  --text-y-position-down: 130dvh;
  --text-y-position-inview: clamp(40dvw, 10dvw + 18rem, 60dvw);

  --credit-reveal-animation-duration: 1.25s;
  --credit-reveal-beginning: 8s;
  --credit-reveal-rest: 3s;
}

html {
  width: 100%;

  display: grid;
  justify-content: center;

  overflow: hidden;
}

body {
  position: relative;

  width: fit-content;
  height: 100dvh;
  perspective: 400px;

  background-color: white;
}

.title {
  position: relative;
  top: 0;
  width: 180vw;
  aspect-ratio: 3 / 4;

  transform: translate(0, -10dvw) rotateY(6deg) rotate(-28deg) skewX(-25deg);
  transform-style: preserve-3d;
  overflow: hidden;
  background-color: var(--bg-color);
}

.credit {
  position: absolute;
  color: white;
  opacity: 0;

  font-size: var(--font-size-md);
  font-family: "Franklin Gothic", sans-serif;

  animation-name: introduce-credit, exit-credit-up;
  animation-duration: var(--credit-reveal-animation-duration);
  animation-delay: var(--credit-reveal-beginning),
    calc(var(--credit-reveal-beginning) + var(--credit-reveal-rest));
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

div.credit:nth-of-type(1) {
  translate: var(--text-x-position) var(--text-y-position-up);

  animation-name: introduce-credit, exit-credit-down;
}

div.credit:nth-of-type(2) {
  --credit-reveal-beginning: 11.5s;

  translate: var(--text-x-position) var(--text-y-position-down);
  font-size: var(--font-size-md);
}

div.credit:nth-of-type(3) {
  --credit-reveal-beginning: 15.5s;

  font-size: var(--font-size-sm);
  translate: var(--text-x-position) var(--text-y-position-up);

  animation-name: introduce-credit, exit-credit-down;
}

.title-credit {
  --credit-reveal-beginning: 19.5s;

  width: 50%;
  top: -5%;

  translate: var(--text-x-position) var(--text-y-position-down);

  animation-name: introduce-credit, exit-credit-up;
}

@media screen and (min-width: 600px) {
  :root {
    --text-x-position: 60dvw;
    --text-y-position-up: -25dvh;
    --text-y-position-down: 225dvh;
    --text-y-position-inview: clamp(60dvw, 27dvw + 26rem, 80dvw);

    --font-size-md: clamp(1rem, 12dvw + 2.2rem, 12rem);
    --font-size-sm: clamp(1rem, 9dvw + 1.2rem, 12rem);

    --line-thickness: 2px;
  }

  .title {
    width: 240vw;
    transform: translate3d(0, -77dvw, -300px) rotateY(6deg) rotate(-28deg)
      skewX(-25deg);
  }
}

@media screen and (min-width: 800px) {
  :root {
    --text-y-position-up: -60dvh;
    --text-y-position-down: 260dvh;
    --text-y-position-inview: clamp(60dvw, 30dvw + 28rem, 80dvw);
  }

  body {
    perspective: 380px;
  }

  .title {
    transform: translate3d(0, -80dvw, -280px) rotateY(6deg) rotate(-28deg)
      skewX(-25deg);
  }
}

@media screen and (min-width: 900px) {
  :root {
    --text-x-position: 70dvw;
    --text-y-position-up: -110dvh;
    --text-y-position-down: 310dvh;
    --text-y-position-inview: clamp(60dvw, 40dvw + 28rem, 80dvw);
  }

  body {
    perspective: 360px;
  }

  .title {
    transform: translate3d(0, -58dvw, -230px) rotateY(6deg) rotate(-28deg)
      skewX(-25deg);
  }

  :root {
    --line-thickness: 2px;
  }
}

@media screen and (min-width: 1000px) {
  :root {
    --text-x-position: 80dvw;
  }

  body {
    perspective: 340px;
  }
}

@media screen and (min-width: 1100px) {
  :root {
    --text-x-position: 80dvw;
  }

  body {
    perspective: 320px;
  }

  .title {
    transform: translate3d(5dvw, -58dvw, -230px) rotateY(6deg) rotate(-28deg)
      skewX(-25deg);
  }
}

@media screen and (min-width: 1201px) {
  :root {
    --text-x-position: 9.5rem;
    --text-y-position-up: -20rem;
    --text-y-position-down: 90rem;
    --text-y-position-inview: 25rem;

    --font-size-md: 6rem;
    --font-size-sm: 4.5rem;
  }

  html {
    overflow: auto;
  }

  .title {
    transform: translate3d(0, -5rem, -230px) rotateY(6deg) rotate(-28deg)
      skewX(-25deg);
    max-width: 1000px;
  }

  .title-credit {
    width: 60%;
  }
}

@keyframes introduce-credit {
  1% {
    opacity: 1;
  }

  to {
    translate: var(--text-x-position) var(--text-y-position-inview);
    opacity: 1;
  }
}

@keyframes exit-credit-up {
  0%,
  99% {
    opacity: 1;
  }

  to {
    translate: var(--text-x-position) var(--text-y-position-up);
    opacity: 0;
  }
}

@keyframes exit-credit-down {
  0%,
  99% {
    opacity: 1;
  }

  to {
    translate: var(--text-x-position) var(--text-y-position-down);
    opacity: 0;
  }
}

.line {
  position: absolute;
  background-color: var(--line-color);
}

.horizontal {
  & div {
    width: 100%;
    height: var(--line-thickness);

    transform-origin: 100% 0;

    transform: scaleX(0);
    animation: grow 6s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  & div:nth-of-type(1) {
    top: var(--horizontal-line-start);
    animation-delay: 80ms;
  }

  & div:nth-of-type(2) {
    top: calc(var(--horizontal-line-start) + var(--horizontal-gap-lg));
    animation-delay: 80ms;
  }

  & div:nth-of-type(3) {
    top: calc(
      var(--horizontal-line-start) + var(--horizontal-gap-lg) +
        var(--horizontal-gap-sm)
    );
    animation-delay: 150ms;
  }

  & div:nth-of-type(4) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 2) +
        var(--horizontal-gap-sm)
    );
    animation-delay: -50ms;
  }

  & div:nth-of-type(5) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 3) +
        var(--horizontal-gap-sm)
    );

    animation-delay: 180ms;
  }

  & div:nth-of-type(6) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 3) +
        (var(--horizontal-gap-sm) * 2)
    );

    animation-delay: 140ms;
  }

  & div:nth-of-type(7) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 4) +
        (var(--horizontal-gap-sm) * 2)
    );

    animation-delay: -50ms;
  }

  & div:nth-of-type(8) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 5) +
        (var(--horizontal-gap-sm) * 2)
    );

    animation-delay: 200ms;
  }

  & div:nth-of-type(9) {
    top: 31%;

    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 5) +
        (var(--horizontal-gap-sm) * 3)
    );

    animation-delay: -150ms;
  }

  & div:nth-of-type(10) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 6) +
        (var(--horizontal-gap-sm) * 3)
    );

    animation-delay: -300ms;
  }

  & div:nth-of-type(11) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 7) +
        (var(--horizontal-gap-sm) * 3)
    );

    animation-delay: 100ms;
  }

  & div:nth-of-type(12) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 7) +
        (var(--horizontal-gap-sm) * 4)
    );

    animation-delay: -350ms;
  }

  & div:nth-of-type(13) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 8) +
        (var(--horizontal-gap-sm) * 4)
    );

    animation-delay: -280ms;
  }

  & div:nth-of-type(14) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 9) +
        (var(--horizontal-gap-sm) * 4)
    );

    animation-delay: -160ms;
  }

  & div:nth-of-type(15) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 9) +
        (var(--horizontal-gap-sm) * 5)
    );

    animation-delay: -220ms;
  }

  & div:nth-of-type(16) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 10) +
        (var(--horizontal-gap-sm) * 5)
    );
  }

  & div:nth-of-type(17) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 11) +
        (var(--horizontal-gap-sm) * 5)
    );

    animation-delay: -120ms;
  }

  & div:nth-of-type(18) {
    top: calc(
      var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 11) +
        (var(--horizontal-gap-sm) * 6)
    );

    animation-delay: -180ms;
  }
}

@keyframes grow {
  to {
    transform: scaleX(1);
  }
}

.vertical {
  & .line {
    height: 100%;
    width: var(--line-thickness);
    left: calc(var(--i, 1) * var(--vertical-gap));

    background-color: var(--line-color);

    transform-origin: 0 100%;

    transform: scaleY(0);

    animation: grow-vertical 6s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }

  & .line:nth-child(n + 16):nth-child(-n + 33) {
    transform-origin: 0 0;
  }

  & .line:nth-child(1) {
    translate: 0 10%;
  }

  & .line:nth-child(2) {
    translate: 0 22%;
  }

  & .line:nth-child(3) {
    translate: 0 15%;
  }

  & .line:nth-child(4) {
    translate: 0 29%;
  }

  & .line:nth-child(5) {
    translate: 0 3%;
  }

  & .line:nth-child(6) {
    translate: 0 13%;
  }

  & .line:nth-child(7) {
    translate: 0 6.5%;
  }

  & .line:nth-child(8) {
    translate: 0 3%;
  }

  & .line:nth-child(9) {
    translate: 0 4%;
  }

  & .line:nth-child(10) {
    translate: 0 1%;
  }

  & .line:nth-child(11) {
    translate: 0 32%;
  }

  & .line:nth-child(12) {
    translate: 0 7.5%;
  }

  & .line:nth-child(13) {
    translate: 0 15%;
  }

  & .line:nth-child(14) {
    translate: 0 34%;
  }

  & .line:nth-child(15) {
    translate: 0 5%;
  }

  & .line:nth-child(16) {
    translate: 0 -11%;
  }

  & .line:nth-child(17) {
    translate: 0 -8%;
  }

  & .line:nth-child(18) {
    translate: 0 -10%;
  }

  & .line:nth-child(19) {
    translate: 0 -22%;
  }

  & .line:nth-child(20) {
    translate: 0 -35%;
  }

  & .line:nth-child(21) {
    translate: 0 -9%;
  }

  & .line:nth-child(22) {
    translate: 0 -3%;
  }

  & .line:nth-child(23) {
    translate: 0 -23%;
  }

  & .line:nth-child(24) {
    translate: 0 -6.5%;
  }

  & .line:nth-child(25) {
    translate: 0 -3%;
  }

  & .line:nth-child(26) {
    translate: 0 -19%;
  }

  & .line:nth-child(27) {
    translate: 0 -5%;
  }

  & .line:nth-child(28) {
    translate: 0 -32%;
  }

  & .line:nth-child(29) {
    translate: 0 -10%;
  }

  & .line:nth-child(30) {
    translate: 0 -50%;
  }

  & .line:nth-child(31) {
    translate: 0 -14%;
  }

  & .line:nth-child(32) {
    translate: 0 -40%;
  }

  & .line:nth-child(33) {
    translate: 0 -2%;
  }
}

@keyframes grow-vertical {
  to {
    translate: 0 0;
    transform: scaleY(1);
  }
}