div {
    transform-style: preserve-3d;
  }
  
  .text {
    display: flex;
    justify-content: center;
  }
  .text .l {
    font-size: 5rem;
    font-weight: 900;
    color: hsl(calc(var(--i) * 40), 75%, 75%);
  }
  .text .l:before {
    content: attr(data-val);
    color: #1f202020;
    position: absolute;
    inset: 0;
    translate: 0 0 -1px;
  }
  
  .zoom .l {
    text-shadow: 0 0 2px #000;
    animation: text 2s ease-in-out infinite alternate calc(var(--i) * .1s);
    position: relative;
  }
  .zoom .l:before {
    animation: shadow 2s ease-in-out infinite alternate calc(var(--i) * .1s);
  }
  .text.zoom .l {
    font-size: 8rem;
  }
  
  @keyframes text {
    0%, 100% {
      transform: translatez(0);
      text-shadow: 0 0 2px #000;
      color: hsl(calc(var(--i) * 40), 75%, 75%, 0.5);
    }
    50% {
      color: hsl(calc(var(--i) * 40), 75%, 75%, 1);
      transform: translatez(1.5em);
      text-shadow: 1px 1px 0 hsl(calc(var(--i) * 40), 75%, 65%), 2px 2px 0 hsl(calc(var(--i) * 40), 75%, 55%), 3px 3px 0 hsl(calc(var(--i) * 40), 75%, 45%), 4px 4px 0 hsl(calc(var(--i) * 40), 75%, 35%), 5px 5px 0 hsl(calc(var(--i) * 40), 75%, 25%);
    }
  }
  @keyframes shadow {
    0%, 100% {
      color: hsl(calc(var(--i) * 40), 75%, 75%, 0.1);
      transform: translatez(-1px);
    }
    50% {
      color: #1f202050;
      transform: translatez(-1.5em);
      filter: blur(0.05em);
    }
  }
  .jump {
    backface-visibility: hidden;
  }
  
  .jump .l {
    backface-visibility: hidden;
    animation: jump 3s ease-in-out infinite alternate calc(var(--i) * .1s);
    transform-origin: 100% 0;
  }
  .jump .l:before {
    backface-visibility: hidden;
    animation: jump-shadow 3s ease-in-out infinite alternate calc(var(--i) * .1s);
    transform-origin: 0 100%;
  }
  
  @keyframes jump {
    0%, 100% {
      transform: rotatex(-360deg) translatey(0) translatez(0);
      text-shadow: 0 0 2px #0001;
      color: hsl(calc(var(--i) * 40), 75%, 75%, 0.7);
    }
    50% {
      color: hsl(calc(var(--i) * 40), 75%, 75%, 1);
      transform: rotatex(0deg) translatey(-1.5em) translatez(0.5em);
      text-shadow: 1px 1px 0 hsl(calc(var(--i) * 40), 75%, 65%), 2px 2px 0 hsl(calc(var(--i) * 40), 75%, 55%), 3px 3px 0 hsl(calc(var(--i) * 40), 75%, 45%), 4px 4px 0 hsl(calc(var(--i) * 40), 75%, 35%), 5px 5px 0 hsl(calc(var(--i) * 40), 75%, 25%);
    }
  }
  @keyframes jump-shadow {
    0%, 100% {
      color: #0000;
      transform: translatey(0) translatez(-1px);
    }
    50% {
      color: #0000;
      transform: translatey(1.5em) translatez(-0.5em);
    }
  }


  .color .l {
    text-shadow: 0 0 2px #000;
    animation: text 2s ease-in-out infinite alternate calc(var(--i) * .1s);
    position: relative;
  }
  .color .l:before {
    animation: colos 2s ease-in-out infinite alternate calc(var(--i) * .1s);
  }
  
  @keyframes text {
    0%, 100% {
      transform: translatez(0);
      text-shadow: 0 0 2px #000;
      color: hsl(calc(var(--i) * 40), 75%, 75%, 0.5);
    }
    50% {
      color: hsl(calc(var(--i) * 40), 75%, 75%, 1);
      transform: translatez(1.5em);
      text-shadow: 1px 1px 0 hsl(calc(var(--i) * 40), 75%, 65%), 2px 2px 0 hsl(calc(var(--i) * 40), 75%, 55%), 3px 3px 0 hsl(calc(var(--i) * 40), 75%, 45%), 4px 4px 0 hsl(calc(var(--i) * 40), 75%, 35%), 5px 5px 0 hsl(calc(var(--i) * 40), 75%, 25%);
    }
  }
  @keyframes colos {
    0%, 100% {
      color: hsl(calc(var(--i) * 40), 75%, 75%, 0.1);
      transform: translatez(-1px);
    }
    50% {
      color: #1f202050;
      transform: translatez(-1.5em);
      filter: blur(0.05em);
    }
  }