@use "sass:math";
@use "sass:color";
@use "../variables" as *;


@keyframes waltuh-gradient-anim {
  $r: 6em;
  $pd: math.div(2*math.$pi,10);
  from {
    background-position: 6em 0em;
  }
  @for $i from 1 through 9 {
    #{$i*10}% {
      background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
    }
  }
  to {
    background-position: 6em 0em;
  }
}
@keyframes wipeIn {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

span.waltuh-gradient {
  font-weight: 600;

  color: transparent;
  $grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
  $grad2: color.adjust($grad1, $lightness: +30%);
  background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
  background-size: 30vmin 30vmin;
  background-clip: text;

  animation: waltuh-gradient-anim 12s linear infinite,
  wipeIn 0.25s ease-in;

}

span.waltuh-gradient-underline {
  position: relative;

  &::after {
    @extend span, .waltuh-gradient;
    background-clip: unset;
    border-radius: 2rem;

    content: "";
    position: absolute;
    bottom: 0.2rem;
    left: 10%;
    height: 0.4rem;
    width: 80%;
  }
}