<div class="title">
  <h1 aria-label="Alien">
    <div class="letter" aria-hidden="true">A<i></i><i></i><i></i></div>
    <div class="letter" aria-hidden="true">L<i></i><i></i></div>
    <div class="letter" aria-hidden="true">I</div>
    <div class="letter" aria-hidden="true">
      E <i></i><i></i><i></i><i></i>
    </div>
    <div class="letter" aria-hidden="true">N<i></i><i></i><i></i></div>
  </h1>

</div>

/*

This is a slow paced animation, watch for at least 20 seconds to appreciate what it is! I did not include the eerie music but it plays a big part!

Part of Title Sequences collection:
https://codepen.io/collection/nNmwgP

*/

:root {
  --text-color-initial: #08146d;
  --text-color-final: white;

  --animation-delay-title-reveal: 12.5s;
  --animation-delay-segment: 4s;
  --animation-duration-segment: 3.75s;
}

@font-face {
  font-family: "HomepageBaukasten";
  src: url("https://raw.githubusercontent.com/robole/title-sequences/main/alien/homepagebaukasten-bold.ttf");
}

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

body {
  display: grid;
  overflow: hidden;
  height: 100dvh;
  margin: 0;
  background-color: black;

  place-items: center;
}

.title {
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 1080;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;

  background: black;

  background-image: url("https://raw.githubusercontent.com/robole/title-sequences/main/alien/img/bg.webp");
  background-size: 200%;
  background-position: 0% 50%;

  animation-name: bg-scroll, fadeout;
  animation-duration: 210s, 1s;
  animation-timing-function: linear, ease-out;
  animation-fill-mode: forwards, forwards;
  animation-delay: 0s, 120s;
}

@keyframes bg-scroll {
  to {
    background-position: 200% 50%;
  }
}

@keyframes fadeout {
  to {
    opacity: 0;
  }
}

h1 {
  color: white;
  font-family: "HomepageBaukasten";
  font-size: clamp(1.5rem, 6vw + 0.5rem, 6rem);

  margin: 0 10%;
  margin-block-start: 1.25rem;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
}

p {
  color: var(--text-color-final);
  font-family: Roboto, sans-serif;
  font-size: clamp(1rem, 2vw + 0.25rem, 2.25rem);
  place-self: center;
  opacity: 0;

  animation: show-credit 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 5s;
}

@keyframes show-credit {
  10%,
  100% {
    opacity: 1;
  }
}

.letter {
  position: relative;
  width: min-content;
  color: transparent;
}

.letter i {
  position: absolute;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: transparent;

  animation: reveal-bg-color var(--animation-duration-segment);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Letter A */
.letter:nth-of-type(1) {
  justify-self: start;
}

/* horizontal bar of A */
.letter:nth-of-type(1) i:nth-of-type(1) {
  clip-path: polygon(9.32% 71%, 17.78% 55%, 80% 55%, 90% 71%);

  animation-fill-mode: forwards;
  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 10) +
      (var(--animation-delay-segment) * 10) + 0.5s
  );
}

/*inside leg of A */
.letter:nth-of-type(1) i:nth-of-type(2) {
  clip-path: polygon(38% 18.6%, 63% 18.6%, 99.08% 85%, 76% 85%);

  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 5) +
      (var(--animation-delay-segment) * 5)
  );
}

/*outer leg of A*/
.letter:nth-of-type(1) i:nth-of-type(3) {
  clip-path: polygon(37.86% 18.6%, 62% 18.6%, 23.54% 85%, 0% 85%);

  animation-delay: calc(
    var(--animation-delay-title-reveal) + var(--animation-duration-segment) +
      var(--animation-delay-segment)
  );
}

/* Letter L */

/* vertical bar of L */
.letter:nth-of-type(2) i:nth-of-type(1) {
  clip-path: polygon(8.24% 18.07%, 40% 18.1%, 40% 84%, 7.82% 84%);

  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 3) +
      (var(--animation-delay-segment) * 3)
  );
}

/* horizontal bar of L */
.letter:nth-of-type(2) i:nth-of-type(2) {
  clip-path: polygon(39% 69%, 100% 69%, 100% 84%, 39% 84%);

  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 8) +
      (var(--animation-delay-segment) * 8)
  );
}

/* letter I */
.letter:nth-of-type(3) {
  animation: reveal-color var(--animation-duration-segment);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: var(--animation-delay-title-reveal);
}

/* letter E */

/* vertical bar of E */
.letter:nth-of-type(4) i:nth-of-type(1) {
  display: inline-block;
  position: absolute;
  left: 12%;
  top: 17%;

  width: 30%;
  height: 67%;

  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 4) +
      (var(--animation-delay-segment) * 4)
  );
}

/* top horizontal bar of E*/
.letter:nth-of-type(4) i:nth-of-type(2) {
  display: inline-block;
  position: absolute;

  left: 42%;
  top: 17%;

  width: 56.5%;
  height: 16.25%;
}

/* mid horizontal bar of E*/
.letter:nth-of-type(4) i:nth-of-type(3) {
  display: inline-block;
  position: absolute;
  left: 42%;
  top: 42.5%;

  width: 49.5%;
  height: 15.8%;

  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 10) +
      (var(--animation-delay-segment) * 10)
  );
}

/* bottom horizontal bar of E*/
.letter:nth-of-type(4) i:nth-of-type(4) {
  display: inline-block;
  position: absolute;

  top: 68%;
  left: 42%;

  width: 56.5%;
  height: 16.25%;
}

.letter:nth-of-type(4) i:nth-of-type(2),
.letter:nth-of-type(4) i:nth-of-type(4) {
  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 7) +
      (var(--animation-delay-segment) * 7)
  );
}

/* inner leg of N */
.letter:nth-of-type(5) {
  justify-self: end;
}

/* outer leg of N */
.letter:nth-of-type(5) i:nth-of-type(1) {
  clip-path: polygon(67% 18.01%, 92% 18.05%, 92% 83.86%, 67% 83.87%);

  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 6) +
      (var(--animation-delay-segment) * 6)
  );
}

.letter:nth-of-type(5) i:nth-of-type(2) {
  clip-path: polygon(7% 18%, 31% 18%, 31% 84%, 10% 84%);

  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 9) +
      (var(--animation-delay-segment) * 9)
  );
}

/* diagonal leg of N */
.letter:nth-of-type(5) i:nth-of-type(3) {
  clip-path: polygon(6% 19.14%, 32% 19.18%, 93% 83%, 68% 83%);

  animation-delay: calc(
    var(--animation-delay-title-reveal) +
      (var(--animation-duration-segment) * 2) +
      (var(--animation-delay-segment) * 2)
  );
}

@keyframes reveal-color {
  0% {
    color: transparent;
  }

  33%,
  100% {
    color: var(--text-color-initial);
    opacity: 1;
  }

  100% {
    color: var(--text-color-final);
  }
}

@keyframes reveal-bg-color {
  0% {
    background-color: transparent;
  }

  33%,
  100% {
    background-color: var(--text-color-initial);
  }

  100% {
    background-color: var(--text-color-final);
  }
}