/* ========================================
   Gradient Text Effects
   Creative typography with animated gradients
   ======================================== */

.gradient-text {
  background: linear-gradient(
    135deg,
    var(--accent-pink),
    var(--accent-purple),
    var(--accent-cyan)
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

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

/* Outlined text effect */
.outlined-text {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  color: transparent;
  -webkit-text-stroke: 2px var(--primary-500);
  text-stroke: 2px var(--primary-500);
  position: relative;
}

.outlined-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-500);
  -webkit-text-stroke: 0;
  text-stroke: 0;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  animation: fill-text 3s ease-in-out infinite;
}

@keyframes fill-text {
  0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%); }
  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Member-specific gradient variations */
.gradient-pink {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-purple {
  background: linear-gradient(135deg, #a855f7, #c084fc);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-cyan {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-yellow {
  background: linear-gradient(135deg, #fbbf24, #fcd34d);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .gradient-text,
  .outlined-text::before {
    animation: none !important;
  }
}