.container
  each val in [1, 2, 3, 4, 5, 6, 7]
    div(class='text text' + val)
      p.word.in IN
      p.word.too TOO
      p.word.deep DEEP
      span.left-side
      span.bottom-side

@font-face {
  font-family: "Public Sans Roman";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/PublicSans-Roman-VF.ttf");
}

:root {
  --dark-purple: hsl(285, 86%, 4%);
  --neon-blue: hsl(190, 100%, 75%);
  --neon-pink: hsl(303, 100%, 73%);
  --size: 10;
  --unit: calc((var(--size) / 100) * 1vmin);
}

* {
  box-sizing: border-box;
  font-family: "Public Sans Roman";
  font-variation-settings: "wght" 1000;
  margin: 0;
  padding: 0;
}

body {
  background: var(--dark-purple);
  overflow: hidden;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.text {
  position: absolute;
  left: calc(100vw / 4);
  right: calc(100vw / 4);
  transform: rotate(-45deg) skew(15deg, 15deg);
  width: calc(500 * var(--unit));
  height: calc(600 * var(--unit));
  font-size: calc(160 * var(--unit));
  -webkit-text-fill-color: #ffffff00;
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: var(--neon-pink);
  line-height: calc(160 * var(--unit));
  padding: calc(60 * var(--unit));
}

.left-side,
.bottom-side {
  position: absolute;
  width: 0px;
  height: 0px;
  background: hsl(190, 100%, 75%);
}

.left-side {
  left: 0;
  top: 0;
  height: calc(200 * var(--unit));
  width: calc(5 * var(--unit));
}

.bottom-side {
  bottom: 0;
  left: 0;
  width: calc(200 * var(--unit));
  height: calc(5 * var(--unit));
}

.text1 {
  top: 0px;
  -webkit-text-fill-color: transparent;
  filter: blur(0.5px);
  background-blend-mode: screen;
}

.text2 {
  top: calc(1 * var(--unit));
  background-blend-mode: screen;
  filter: blur(0.5px);
}

.text3 {
  top: calc(10 * var(--unit));
  opacity: 1;
  filter: blur(1px);
}

.text4 {
  top: calc(20 * var(--unit));
  opacity: 0.8;
  filter: blur(1.5px);
}

.text5 {
  top: calc(30 * var(--unit));
  opacity: 0.6;
  filter: blur(2px);
}

.text6 {
  top: calc(40 * var(--unit));
  opacity: 0.4;
  filter: blur(2.5px);
}

.text7 {
  top: calc(50 * var(--unit));
  opacity: 0.2;
  filter: blur(3px);
}

.word.in,
.word.too,
.word.deep {
  opacity: 0;
}

var tl = gsap.timeline({
  repeat: -1,
  repeatDelay: 2.5,
  defaults: { ease: "power2.inOut" }
});
tl.set(".word.in, .word.too, .word.deep", { opacity: 0 });
// tl.set(".bottom-side", )

const bgColor = "hsl(190, 100%, 75%)";

// Lines
tl.fromTo(
  ".left-side",
  {
    height: 0,
    immediateRender: false,
    autoRound: false
  },
  {
    duration: 2.3,
    height: "100%",
    ease: "power3.in"
  },
  0
);
tl.fromTo(
  ".bottom-side",
  {
    width: 0,

    immediateRender: false,
    autoRound: false
  },
  {
    duration: 2.3,
    width: "100%",
    ease: "power3.out"
  },
  2.3
);

// TOO
tl.fromTo(
  ".in",
  { opacity: 0 },
  { duration: 1.3, opacity: 1, stagger: 0.06 },
  "-=1"
);
tl.fromTo(
  ".too",
  { opacity: 0 },
  { duration: 1.3, opacity: 1, stagger: 0.06 },
  "-=0.6"
);
tl.fromTo(
  ".deep",
  { opacity: 0 },
  { duration: 1.3, opacity: 1, stagger: 0.06 },
  "-=0.6"
);

// Rotate
tl.to(
  ".text",
  {
    transform: "rotate(-20deg) skew(0deg, 0deg)",
    duration: 1.5,
    ease: "slow(0.2, 0.4, false)"
  },
  "+=1"
);

// Fade Out
tl.to(".text", 0.6, { opacity: 0, stagger: 0.06 }, "+=2");