.name(data-value="NETFLIX")

@import url('https://fonts.googleapis.com/css?family=Oswald:700&display=swap')

@function makelongshadow($count,$angle)
  $val: 10px 10px 100px #C2C1C2
  @for $i from 1 through $count
    $val: #{$val}, #{$i}px #{$i*$angle}px #9CA5B4
  @return $val

body
  font-family: 'Oswald', sans-serif
  font-size: 15vw
  display: flex
  justify-content: center
  align-items: center
  min-height: 100vh
  background-color: #DEDADC
  box-shadow: 0 0 300px 10px rgba(0,0,0,0.4) inset
  padding: 0
  margin: 0
  
  .name
    color: transparent
    letter-spacing: 1.5vw
    display: flex
    perspective: 600px
    animation: grow 1s ease forwards
    
  .container
    transform-style: preserve-3d
    
@keyframes zoom
  0%
    transform: scale(1)
    color: transparent
  10%
    color: white
  50%
    transform: scale(1.1)
    color: white
  100%
    transform: scale(0.9)
    color: white
  
    
@keyframes shrink
  0%
    transform: scale(1.2)
  100%
    transform: scale(0.9)
    
@keyframes grow
  0%
    transform: scale(0.9)
  100%
    transform: scale(1.2)
 
@keyframes long-shadow
  0%
    text-shadow: none  
  50%
    text-shadow: makelongshadow(100, 1.5)
  100%
    text-shadow: none  

const name = document.querySelector(".name");
const nameValue = name.getAttribute("data-value");

function insert(x, i, t) {
  let s = 0;
  let ss = 1;
  if (i === 0) {
    s = 20;
    ss = 1.15;
  } else if (i === 1) {
    s = 15;
    ss = 1.1;
  } else if (i === 2) {
    s = 5;
    ss = 1.03;
  } else if (i === 3) {
    s = 0;
    ss = 1;
  } else if (i === 4) {
    s = -5;
    ss = 1.03;
  } else if (i === 5) {
    s = -15;
    ss = 1.1;
  } else if (i === 6) {
    s = -20;
    ss = 1.15;
  }

  const container = document.createElement("div");
  container.classList.add("container");
  const div = document.createElement("div");
  div.textContent = x;
  div.classList.add("character");
  div.style.transform = `rotateY(${s}deg) scale(${ss})`;
  container.appendChild(div);
  name.appendChild(container);
  container.style.animation = `zoom 1.5s ${i /
    20}s cubic-bezier(.23,1.62,.65,.87) forwards`;
  div.style.animation = `long-shadow 1.5s ${i /
    20}s cubic-bezier(.23,1.62,.65,.87) forwards`;
}

function animate() {
  [...nameValue].forEach((x, i) => insert(x, i, nameValue.length));

  setTimeout(() => {
    name.style.animation = "shrink 4s ease-out forwards";
    const characters = document.querySelectorAll(".character");
    characters.forEach(c => {
      c.style.color = "red";
    });
  }, 1000);

  setTimeout(() => {
    name.innerHTML = "";
    name.style.animation = "grow 1s ease forwards";
  }, 4000);
}

animate();

setInterval(animate, 5000);