/**
 * Gradient Theme Styles
 * Rainbow gradient text with flowing animation
 */

.theme-gradient {
  background-color: var(--gradient-bg, #0a0a0a);
  font-family: 'Arial Black', 'Impact', sans-serif;
  overflow: hidden;
  position: relative;
}

/* Base Gradient Text */
.theme-gradient .gradient-sign-text,
.theme-gradient .gradient-flow-text {
  font-weight: 900;
  white-space: nowrap;
  user-select: none;
  line-height: 1.1;
  
  /* Text Fill */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Background properties set by JS or defaults below */
  background-size: 300% 300%;
  animation: gradient-shift 5s ease infinite;
  
  /* Subtle drop shadow to lift text off background */
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

/* SIGN mode */
.theme-gradient .gradient-sign-text {
  /* No specific overrides */
}

/* FLOW mode */
.theme-gradient .gradient-flow-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

.theme-gradient .gradient-flow-text {
  padding: 0 0.5em;
  flex-shrink: 0;
}

/* Gradient Animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}