h2 {
  overflow: visible;

  padding-inline: 0.06em;
  margin-inline: -0.06em;
}

h2 span {
  display: inline;

  padding-inline: 0.07em;
  margin-inline: -0.07em;

  line-height: inherit;

  color: var(--primary);

  background-image: linear-gradient(100deg,
      var(--primary) 0%,
      var(--primary-l-1) 34%,
      var(--primary-l-2) 50%,
      var(--primary-l-1) 66%,
      var(--primary) 100%);

  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  animation:
    h2-span-gradient 6s cubic-bezier(.45, 0, .2, 1) infinite;

  transition:
    filter 300ms ease,
    background-position 500ms ease;
}

@keyframes h2-span-gradient {

  0%,
  20% {
    background-position: 0% 50%;
  }

  48%,
  68% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@media (hover: hover) and (pointer: fine) {
  h2 span:hover {
    animation-play-state: paused;

    background-position: 100% 50%;

    filter:
      saturate(1.08) brightness(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  h2 span {
    animation: none;
    background-position: 50% 50%;
  }
}


}