.wave-text {
  position: relative;
  display: inline-block;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.wave-base {
  color: var(--base-color, #fff);
}

.wave-front {
  position: absolute;
  inset: 0;
  color: var(--wave-color, #00d0ff);

  /* A repeating “band” pattern so the animation can loop seamlessly */
  -webkit-mask-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 42%,
    #000 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 200% 100%;
  -webkit-mask-position: 0 0;

  mask-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 42%,
    #000 50%,
    transparent 58%,
    transparent 100%
  );
  mask-size: 200% 100%;
  mask-position: 0 0;

  animation: wave-sweep 10s linear infinite reverse;
  will-change: -webkit-mask-position, mask-position;
}

@keyframes wave-sweep {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: 200% 0; mask-position: 200% 0; }
}