Text Gradient

/* Gradient Text Effects */

/* Basic Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 48px;
}

/* Animated Gradient */
.text-gradient-animated {
  background: linear-gradient(
    90deg,
    #667eea,
    #764ba2,
    #f093fb,
    #4facfe,
    #667eea
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-flow 3s ease infinite;
  font-weight: 700;
  font-size: 48px;
}

@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Rainbow Gradient */
.text-rainbow {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #9400d3
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow-shift 3s linear infinite;
  font-weight: 700;
}

@keyframes rainbow-shift {
  to { background-position: 200% center; }
}

/* Metallic Gold */
.text-gold {
  background: linear-gradient(
    180deg,
    #ffd700 0%,
    #ffed4e 25%,
    #ffd700 50%,
    #b8860b 75%,
    #ffd700 100%
  );
  background-size: 100% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-shine 2s ease-in-out infinite;
  font-weight: 700;
}

@keyframes gold-shine {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
}

/* Neon Glow */
.text-neon {
  color: #fff;
  text-shadow: 
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #00ffff,
    0 0 40px #00ffff;
  animation: neon-pulse 1.5s ease-in-out infinite;
  font-weight: 700;
}

@keyframes neon-pulse {
  0%, 100% {
    text-shadow: 
      0 0 10px #00ffff,
      0 0 20px #00ffff,
      0 0 30px #00ffff,
      0 0 40px #00ffff;
  }
  50% {
    text-shadow: 
      0 0 5px #00ffff,
      0 0 10px #00ffff,
      0 0 15px #00ffff,
      0 0 20px #00ffff;
  }
}

/* Tailwind CSS Version */
@layer utilities {
  .text-gradient-purple {
    @apply bg-gradient-to-r from-purple-600 to-pink-600;
    @apply bg-clip-text text-transparent;
  }
  
  .text-gradient-blue {
    @apply bg-gradient-to-r from-blue-600 via-cyan-600 to-teal-600;
    @apply bg-clip-text text-transparent;
  }
  
  .text-gradient-animated {
    @apply bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600;
    @apply bg-clip-text text-transparent;
    @apply bg-[length:200%_auto];
    animation: gradient-x 3s ease infinite;
  }
  
  @keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
}