/**
 * Rainbow Gradient - Reusable rainbow color gradient
 * Can be used for borders, text, backgrounds, etc.
 */

/* Rainbow color palette */
:root {
  --rainbow-white: hsl(0, 0%, 100%);
  --rainbow-cyan: hsl(180, 100%, 50%);
  --rainbow-blue: hsl(240, 100%, 50%);
  --rainbow-purple: hsl(270, 100%, 50%);
  --rainbow-pink: hsl(330, 40%, 70%);
  --rainbow-red: hsl(0, 100%, 50%);
  --rainbow-yellow: hsl(60, 100%, 50%);
  --rainbow-lime: hsl(90, 100%, 75%);
}

/* Rainbow gradient definition */
.rainbow-gradient {
  background: linear-gradient(
    to right,
    var(--rainbow-white),
    var(--rainbow-white),
    var(--rainbow-cyan),
    var(--rainbow-blue),
    var(--rainbow-purple),
    var(--rainbow-pink),
    var(--rainbow-red),
    var(--rainbow-yellow),
    var(--rainbow-lime),
    var(--rainbow-white),
    var(--rainbow-white)
  );
  background-size: 900% 100%;
}

/* Animated rainbow gradient (moves from right to left) */
.rainbow-gradient-animated {
  background: linear-gradient(
    to right,
    var(--rainbow-white),
    var(--rainbow-white),
    var(--rainbow-cyan),
    var(--rainbow-blue),
    var(--rainbow-purple),
    var(--rainbow-pink),
    var(--rainbow-red),
    var(--rainbow-yellow),
    var(--rainbow-lime),
    var(--rainbow-white),
    var(--rainbow-white)
  );
  background-size: 900% 100%;
  animation: rainbow-flow 3s ease infinite;
}

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

/* Rainbow text effect */
.rainbow-text {
  background: linear-gradient(
    to right,
    var(--rainbow-white),
    var(--rainbow-white),
    var(--rainbow-cyan),
    var(--rainbow-blue),
    var(--rainbow-purple),
    var(--rainbow-pink),
    var(--rainbow-red),
    var(--rainbow-yellow),
    var(--rainbow-lime),
    var(--rainbow-white),
    var(--rainbow-white)
  );
  background-size: 900% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}