@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg) saturate(1.16) brightness(1.05);
  }

  50% {
    background-position: 100% 50%;
    filter: hue-rotate(180deg) saturate(1.32) brightness(1.14);
  }

  100% {
    background-position: 0% 50%;
    filter: hue-rotate(360deg) saturate(1.16) brightness(1.05);
  }
}

@keyframes brandDrift {
  0%,
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg) saturate(1) brightness(1);
    text-shadow: 0 0 0 rgba(103, 232, 185, 0);
    transform: translate3d(0, 0, 0) skewX(0deg);
  }

  18% {
    background-position: 36% 50%;
    filter: hue-rotate(11deg) saturate(1.1) brightness(1.04);
    text-shadow: 0.03em 0.012em 0.1em rgba(45, 212, 191, 0.12);
    transform: translate3d(0.08em, -0.02em, 0) skewX(-0.9deg);
  }

  34% {
    background-position: 54% 50%;
    filter: hue-rotate(18deg) saturate(1.16) brightness(1.06);
    text-shadow: 0.045em 0.018em 0.14em rgba(45, 212, 191, 0.15);
    transform: translate3d(0.14em, -0.035em, 0) skewX(-1.6deg);
  }

  54% {
    background-position: 96% 50%;
    filter: hue-rotate(-14deg) saturate(1.2) brightness(1.08);
    text-shadow: -0.04em 0.02em 0.16em rgba(167, 139, 250, 0.16);
    transform: translate3d(0.24em, 0.025em, 0) skewX(1.25deg);
  }

  76% {
    background-position: 48% 50%;
    filter: hue-rotate(7deg) saturate(1.1) brightness(1.03);
    text-shadow: 0.025em -0.015em 0.12em rgba(190, 242, 100, 0.12);
    transform: translate3d(0.08em, -0.014em, 0) skewX(-0.7deg);
  }
}

@keyframes brandDriftLetter {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  18% {
    transform: translate3d(
      calc(var(--letter-drift-x) * 0.42),
      calc(var(--letter-drift-y) * 0.42),
      0
    );
  }

  34% {
    transform: translate3d(
      calc(var(--letter-drift-x) * 0.75),
      calc(var(--letter-drift-y) * 0.75),
      0
    );
  }

  54% {
    transform: translate3d(var(--letter-drift-x), var(--letter-drift-y), 0);
  }

  76% {
    transform: translate3d(
      calc(var(--letter-drift-x) * 0.48),
      calc(var(--letter-drift-y) * 0.48),
      0
    );
  }
}

@keyframes brandDriftTrace {
  0%,
  100% {
    opacity: 0;
    filter: blur(0);
    transform: translate3d(0, 0, 0) skewX(0deg);
  }

  18% {
    opacity: 0.16;
    filter: blur(0.004em);
    transform: translate3d(0.14em, -0.035em, 0) skewX(-1.4deg);
  }

  34% {
    opacity: 0.22;
    filter: blur(0.006em);
    transform: translate3d(0.22em, -0.055em, 0) skewX(-2.2deg);
  }

  56% {
    opacity: 0.3;
    filter: blur(0.01em);
    transform: translate3d(0.36em, 0.04em, 0) skewX(1.7deg);
  }

  78% {
    opacity: 0.14;
    filter: blur(0.004em);
    transform: translate3d(0.12em, -0.018em, 0) skewX(-0.9deg);
  }
}