:root {
  --text-weight: 500;
  --text-width: 100;
  --text-slant: 0;
}

.line1,
.line2 {
  display: block;
}

.line1 {
  font-size: 3vw;
  font-weight: 845;
  color: #ffffff2e;
}

.splitting {
  --text-weight-min: 100;
  --text-weight-max: 900;
  --text-slant-min: 1;
  --text-slant-max: 12;
  --text-width-min: 75;
  --text-width-max: 100;
  --glow-hue-min: 0;
  --glow-hue-max: 255;
  --glow-size-min: 0;
  --glow-size-max: 15;
  --glow-lightness: 57%;
  --delay: 0;
  --duration: 3s;
  --percent: 0;
}

.char {
  font-stretch: var(--text-width);
  font-style: oblique var(--text-slant);
  font-weight: var(--text-weight);
  /*animation: wave var(--duration) ease-in-out var(--delay) infinite alternate;*/
  font-variation-settings: "wght" var(--text-weight-max), "wdth" var(--text-width-max), "slnt" var(--text-slant-max);
  text-shadow: 0 0 calc(var(--glow-size-max) * 1px) hsla(calc(var(--glow-hue) + 255), 100%, var(--glow-lightness), 1);
  animation-fill-mode: backwards;
  --percent: calc(var(--char-index) / var(--char-total));
  --delay: calc(var(--percent) * var(--duration));
  --glow-hue: calc(var(--percent) * 510);
}

.char_animation{
  animation: wave var(--duration) ease-in-out var(--delay) infinite alternate;
}

@keyframes wave {
  0% {
    font-variation-settings: "wght" var(--text-weight-min), "wdth" var(--text-width-min), "slnt" var(--text-slant-min);
    text-shadow: 0 0 calc(var(--glow-size-min) * 1px) hsla(var(--glow-hue), 100%, var(--glow-lightness), 1);
  }
  50% {
    font-variation-settings: "wght" var(--text-weight-max), "wdth" var(--text-width-max), "slnt" var(--text-slant-max);
    text-shadow: 0 0 calc(var(--glow-size-max) * 1px) hsla(calc(var(--glow-hue) + 255), 100%, var(--glow-lightness), 1);
  }
  100% {
    font-variation-settings: "wght" var(--text-weight-min), "wdth" var(--text-width-min), "slnt" var(--text-slant-min);
    text-shadow: 0 0 calc(var(--glow-size-min) * 1px) hsla(var(--glow-hue), 100%, var(--glow-lightness), 1);
  }
}