/* ===== WORD RAINBOW HOVER ANIMATION ===== */

.word-rainbow:hover {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    45deg,
    #ff3366 0%,
    #ff5533 8.33%,
    #ffaa44 16.66%,
    #ffcc55 25%,
    #ffff99 33.33%,
    #ccffaa 41.66%,
    #99ffcc 50%,
    #88ffee 58.33%,
    #66ddff 66.66%,
    #5599ff 75%,
    #7766ff 83.33%,
    #cc66ff 91.66%,
    #ff3366 100%
  ) 0 0 / 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-animation: rainbow-slide 3s linear infinite;
  animation: rainbow-slide 3s linear infinite;
}

@keyframes rainbow-slide {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 200%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word-rainbow:hover {
    -webkit-animation: none;
    animation: none;
  }
}