body {
  background: #070707;
}

a {
  font-weight: bold;
  text-transform: uppercase;
  color: transparent;
  font-size: clamp(40px, 10vw, 160px);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}



a > span {
  position: relative;
}

a > span i {
  color: transparent;
  -webkit-text-stroke: 1px #f5323c;
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  -webkit-animation: 3s infinite alternate shift ease-in-out;
          animation: 3s infinite alternate shift ease-in-out;
  will-change: transform;
}

@keyframes shift {
  0% {
    -webkit-transform: translate(-0.25em, 0);
            transform: translate(-0.25em, 0);
  }
  50% {
    -webkit-transform: translate(0.25em, 0);
            transform: translate(0.25em, 0);
  }
}

@-webkit-keyframes shift {
  0% {
    -webkit-transform: translate(-0.25em, 0);
            transform: translate(-0.25em, 0);
  }
  50% {
    -webkit-transform: translate(0.25em, 0);
            transform: translate(0.25em, 0);
  }
}

a > span:nth-child(n) {
  z-index: calc(10 - var(--i));
}

a > span {
  --i: 0;
}
a > span:nth-child(1) { --i: 1; }
a > span:nth-child(2) { --i: 2; }
a > span:nth-child(3) { --i: 3; }
a > span:nth-child(4) { --i: 4; }
a > span:nth-child(5) { --i: 5; }
a > span:nth-child(6) { --i: 6; }
a > span:nth-child(7) { --i: 7; }
a > span:nth-child(8) { --i: 8; }
a > span:nth-child(9) { --i: 9; }
a > span:nth-child(10) { --i: 10; }
a > span:nth-child(11) { --i: 11; }

a > span i:nth-child(n) {
  animation-delay: calc(var(--d) + 100ms);
}
a > span i:nth-child(1) { --d: 0ms; }
a > span i:nth-child(2) { --d: 100ms; }
a > span i:nth-child(3) { --d: 200ms; }
a > span i:nth-child(4) { --d: 300ms; }
a > span i:nth-child(5) { --d: 400ms; }
a > span i:nth-child(6) { --d: 500ms; }
a > span i:nth-child(7) { --d: 600ms; }
a > span i:nth-child(8) { --d: 700ms; }