@import url("https://fonts.googleapis.com/css2?family=Sarpanch:wght@900&display=swap");
:root {
  --background: #8c2e2f;
  --color: #f2aec1;
  --color-2: #f26388;
  --color-3: transparent;
}

html {
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--background);
}

[data-splitting] {
  font-size: 20vw;
  font-family: "Sarpanch", sans-serif;
  letter-spacing: -0.05em;
  color: var(--color);
}
[data-splitting] .char {
  background: linear-gradient(-45deg, var(--color) 45%, var(--color-2) 45%, var(--color-2) 50%, var(--color-3) 50%);
  background-size: 2em 3em;
  z-index: calc(var(--char-total) - var(--char-index));
  position: relative;
  -webkit-animation: bg-pos 2s cubic-bezier(0.6, 0, 0, 1) infinite alternate;
          animation: bg-pos 2s cubic-bezier(0.6, 0, 0, 1) infinite alternate;
  -webkit-animation-delay: calc((var(--char-index)) * 0.1s);
          animation-delay: calc((var(--char-index)) * 0.1s);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@-webkit-keyframes bg-pos {
  0% {
    background-position: 0 0;
  }
  80%, 100% {
    background-position: -1em -1.5em;
  }
}
@keyframes bg-pos {
  0% {
    background-position: 0 0;
  }
  80%, 100% {
    background-position: -1em -1.5em;
  }
}