/* Text Effects CSS */
/* Reusable text animation and styling effects */

/* Base text effect class */
.text-effect {
  position: relative;
}



/* Rainbow Effect */
.text-effect--rainbow {
  background: linear-gradient(45deg, #ff0066, #ff6600, #ffcc00, #66ff00, #00ff66, #0066ff, #6600ff, #ff0066) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: rainbowCycle 2s linear infinite;
  font-weight: 700 !important;
}

.text-effect--rainbow::before {
  background: linear-gradient(90deg, 
    #ff0000, #ff8000, #ffff00, #80ff00, 
    #00ff00, #00ffff, #0080ff, #8000ff, #ff0000
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes rainbowCycle {
  0% { filter: hue-rotate(0deg); }
  25% { filter: hue-rotate(90deg); }
  50% { filter: hue-rotate(180deg); }
  75% { filter: hue-rotate(270deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Matrix Effect */
.text-effect--matrix {
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
  animation: terminalBlink 1s infinite;
}

.text-effect--matrix::before {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

@keyframes terminalBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.7; }
}

/* Fire Effect (passionate) */
.text-effect--fire {
  background: linear-gradient(45deg, #ff4757, #ff6348, #ff7675);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 15px rgba(255, 71, 87, 0.5);
  animation: fireFlicker 1.5s ease-in-out infinite alternate;
}

@keyframes fireFlicker {
  0% { 
    text-shadow: 0 0 15px rgba(255, 71, 87, 0.5);
    transform: scale(1);
  }
  100% { 
    text-shadow: 0 0 20px rgba(255, 99, 72, 0.7), 0 0 30px rgba(255, 118, 117, 0.3);
    transform: scale(1.02);
  }
}

/* Jitter Effect (distracted) */
.text-effect--jitter {
  color: #6c757d;
  animation: jitter 0.1s infinite;
}

@keyframes jitter {
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(-1px, -1px); }
}

/* Dreaming Effect (ethereal floating with color shifts) */
.text-effect--dreaming {
  color: #ff69b4;
  background: linear-gradient(45deg, #ff69b4, #ffb6c1, #ffc0cb, #ff1493, #ff69b4);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: dreamyFloat 4s ease-in-out infinite, dreamyColors 6s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
  position: relative;
}

.text-effect--dreaming::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle, rgba(255, 105, 180, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: dreamyGlow 3s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes dreamyFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg);
    filter: blur(0px);
  }
  25% { 
    transform: translateY(-4px) rotate(0.5deg);
    filter: blur(0.5px);
  }
  50% { 
    transform: translateY(-6px) rotate(0deg);
    filter: blur(0px);
  }
  75% { 
    transform: translateY(-2px) rotate(-0.5deg);
    filter: blur(0.3px);
  }
}

@keyframes dreamyColors {
  0% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  25% { 
    background-position: 100% 50%;
    filter: hue-rotate(15deg);
  }
  50% { 
    background-position: 100% 100%;
    filter: hue-rotate(30deg);
  }
  75% { 
    background-position: 0% 100%;
    filter: hue-rotate(15deg);
  }
  100% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
}

@keyframes dreamyGlow {
  0% { 
    opacity: 0.2;
    transform: scale(1);
  }
  100% { 
    opacity: 0.4;
    transform: scale(1.1);
  }
}

/* Laser Focus Effect */
.text-effect--laser-focus {
  color: #ff4444;
  font-weight: 800;
  letter-spacing: 1px;
  animation: laserFocus 1s ease-in-out infinite alternate;
}

@keyframes laserFocus {
  0% { 
    text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
    letter-spacing: 1px;
  }
  100% { 
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.8), 0 0 30px rgba(255, 68, 68, 0.4);
    letter-spacing: 2px;
  }
}