html, body { background: #050204; }
html { height: 100%; display: flex; }
body { margin: auto; }

.title {
  position: relative;
  text-align: left;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.title .text {
  font-family: sans-serif;
  font-weight: 400;
  font-size: calc(30vh / var(--word-total) );
  line-height: 1.0;
}

.title .write .word {
  color: hsl(0, 0%, 18%);
  text-shadow: 0 0 0.1em currentColor;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: write linear both;
          animation: write linear both;
}

.title .laser {
  position: absolute;
  top: 0;
  left: 0;
  /* To avoid the blur getting masked by the clip-path we had to duplicate the element */
  -webkit-filter: blur(4px) contrast(10);
          filter: blur(4px) contrast(10);
  pointer-events: none;
}

.title .laser .word {
  display: inline-block;
}

.title .laser .word {
  color: #4C00FF;
  text-shadow: 0 0 0.1em currentColor;
  -webkit-transform: translateZ(5px);
          transform: translateZ(5px);
  -webkit-animation: laser linear both;
          animation: laser linear both;
}

.title .write .word,
.title .laser .word {
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-delay: calc(0.3s + var(--word-index) * 160ms);
          animation-delay: calc(0.3s + var(--word-index) * 160ms);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.title:hover .word,
.title:hover .word {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

/* .title .text .word,
.title .text .word::before {
  animation-play-state: paused;
  animation-delay: -0.4s;
} */

@-webkit-keyframes write {
  from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
  70%, to { -webkit-clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%); clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
}

@keyframes write {
  from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
  70%, to { -webkit-clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%); clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
}

@-webkit-keyframes laser {
  from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
  70%, to { -webkit-clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%); clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
}

@keyframes laser {
  from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
  70%, to { -webkit-clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%); clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
}