The Marvelous Mrs Maisel title animation

<div class="curtain"></div>
<div class="curtain"></div>
<div class="curtain"></div>
<div class="curtain"></div>
<div class="curtain"></div>
<div class="curtain"></div>
<div class="curtain"></div>

<svg viewBox="0 0 1200 800">
	<g id="title">
		<text
			x="530.745"
			y="248.517"
			font-family="Fontdinerdotcom"
			font-size="80"
		>
			The
		</text>

		<text
			x="400.183"
			y="352.084"
			font-family="Fontdinerdotcom"
			font-size="140"
		>
			Marvelous
		</text>

		<text
			x="619.488"
			y="442.004"
			font-family="Fontdinerdotcom"
			font-size="80"
		>
			Mrs.
		</text>

		<text
			x="674.057"
			y="311.245"
			font-family="Fontdinerdotcom Sparkly"
			font-size="120"
		>
			*
		</text>

		<text
			x="465.468"
			y="548.199"
			font-family="Fontdinerdotcom"
			font-size="190"
		>
			Maisel
		</text>
		
		<text
			x="409.372"
			y="542.419"
			font-family="Fontdinerdotcom Sparkly"
			font-size="120"
		>
			*
		</text>
	</g>
</svg>

@font-face {
  font-family: Fontdinerdotcom;
  src: url("fonts/Fontdinerdotcom.woff") format("woff");
}

@font-face {
  font-family: "Fontdinerdotcom Sparkly";
  src: url("fonts/FontdinerdotcomSparkly.woff") format("woff");
}

:root {
  --delay: 0.3s;
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;
}

.curtain {
  width: 100%;
  height: 100%;

  grid-row: 1;
  grid-column: 1;
}

.curtain:nth-of-type(1) {
  background-color: hsl(256, 30%, 7%);
}

.curtain:nth-of-type(2) {
  background-color: hsl(201, 62%, 57%);
}

.curtain:nth-of-type(3) {
  background-color: hsl(27, 47%, 53%);
}

.curtain:nth-of-type(4) {
  background-color: hsl(63, 47%, 54%);
}

.curtain:nth-of-type(5) {
  background-color: hsl(315, 42%, 65%);
}

.curtain:nth-of-type(6) {
  background-color: hsl(0, 82%, 70%);
}

svg {
  width: 100%;
  height: 100%;

  grid-row: 1;
  grid-column: 1;

  mix-blend-mode: difference;
}

@keyframes scale-up {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

text {
  animation-name: scale-up;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;

  fill: papayawhip;

  transform-origin: center;
}

@keyframes slide-out {
  to {
    transform: translateX(-100%);
  }
}

.curtain {
  animation-name: slide-out;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

.curtain:nth-of-type(1) {
  animation-delay: calc(var(--delay) * 5);
}

.curtain:nth-of-type(2) {
  animation-delay: calc(var(--delay) * 4);
}

.curtain:nth-of-type(3) {
  animation-delay: calc(var(--delay) * 3);
}

.curtain:nth-of-type(4) {
  animation-delay: calc(var(--delay) * 2);
}

.curtain:nth-of-type(5) {
  animation-delay: var(--delay);
}

.curtain:nth-of-type(6) {
  animation: none;
}