/* ============================================
   EFECTOS VISUALES PARA BADGES v3.0
   Animaciones ÉPICAS y dramáticas
   Actualizado: Efectos súper visibles e impactantes
   ============================================ */

/* === EFECTO: GLOW (Brillo Eléctrico) === */
.badge-effect-glow {
  display: inline-block;
  animation: glowAnimation 1.5s ease-in-out infinite;
  font-weight: 900;
  color: #60a5fa !important;
}

@keyframes glowAnimation {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(59, 130, 246, 1),
      0 0 20px rgba(59, 130, 246, 0.9),
      0 0 30px rgba(59, 130, 246, 0.7),
      0 0 40px rgba(59, 130, 246, 0.5);
    filter: brightness(1.3) contrast(1.2);
    transform: scale(1);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(59, 130, 246, 1),
      0 0 35px rgba(59, 130, 246, 1),
      0 0 50px rgba(59, 130, 246, 0.9),
      0 0 70px rgba(59, 130, 246, 0.7),
      0 0 90px rgba(59, 130, 246, 0.5);
    filter: brightness(1.6) contrast(1.4);
    transform: scale(1.05);
  }
}

/* === EFECTO: SPARKLE (Destello Mágico) === */
.badge-effect-sparkle {
  display: inline-block;
  position: relative;
  animation: sparkleAnimation 1.2s ease-in-out infinite;
  font-weight: 900;
  color: #c084fc !important;
}

@keyframes sparkleAnimation {
  0%, 100% {
    text-shadow: 
      0 0 8px rgba(168, 85, 247, 0.8),
      0 0 15px rgba(168, 85, 247, 0.6);
    filter: brightness(1.2) saturate(1.5);
    transform: rotate(-1deg) scale(1);
  }
  25% {
    text-shadow: 
      0 0 20px rgba(168, 85, 247, 1),
      0 0 40px rgba(168, 85, 247, 1),
      0 0 60px rgba(168, 85, 247, 0.8),
      2px 2px 2px rgba(255, 255, 255, 0.5);
    filter: brightness(1.8) saturate(2);
    transform: rotate(1deg) scale(1.08);
  }
  50% {
    text-shadow: 
      0 0 8px rgba(168, 85, 247, 0.8),
      0 0 15px rgba(168, 85, 247, 0.6);
    filter: brightness(1.2) saturate(1.5);
    transform: rotate(-1deg) scale(1);
  }
  75% {
    text-shadow: 
      0 0 20px rgba(168, 85, 247, 1),
      0 0 40px rgba(168, 85, 247, 1),
      0 0 60px rgba(168, 85, 247, 0.8),
      -2px -2px 2px rgba(255, 255, 255, 0.5);
    filter: brightness(1.8) saturate(2);
    transform: rotate(1deg) scale(1.08);
  }
}

/* === EFECTO: RAINBOW (Arcoíris Psicodélico) === */
.badge-effect-rainbow {
  display: inline-block;
  animation: rainbowAnimation 2s linear infinite, rainbowPulse 1s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000,
    #ff7f00
  );
  background-size: 600% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
  filter: saturate(1.5) brightness(1.3);
}

@keyframes rainbowAnimation {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 600% center;
  }
}

@keyframes rainbowPulse {
  0%, 100% {
    transform: scale(1);
    filter: saturate(1.5) brightness(1.3);
  }
  50% {
    transform: scale(1.06);
    filter: saturate(2) brightness(1.5);
  }
}

/* === EFECTO: FIRE (Llamas Infernales) === */
.badge-effect-fire {
  display: inline-block;
  animation: fireAnimation 0.6s ease-in-out infinite;
  font-weight: 900;
  color: #fb923c !important;
}

@keyframes fireAnimation {
  0%, 100% {
    text-shadow: 
      0 0 15px rgba(251, 146, 60, 1),
      0 0 25px rgba(251, 146, 60, 0.9),
      0 0 35px rgba(245, 158, 11, 0.8),
      0 -3px 10px rgba(239, 68, 68, 0.7);
    transform: translateY(0) rotate(-1deg);
    filter: brightness(1.4) saturate(1.5);
  }
  25% {
    text-shadow: 
      0 0 25px rgba(239, 68, 68, 1),
      0 0 40px rgba(239, 68, 68, 1),
      0 0 55px rgba(239, 68, 68, 0.9),
      0 -5px 15px rgba(220, 38, 38, 0.8);
    transform: translateY(-3px) rotate(1deg) scale(1.05);
    filter: brightness(1.7) saturate(2);
  }
  50% {
    text-shadow: 
      0 0 15px rgba(251, 191, 36, 1),
      0 0 25px rgba(251, 191, 36, 0.9),
      0 0 35px rgba(245, 158, 11, 0.8),
      0 -3px 10px rgba(251, 146, 60, 0.7);
    transform: translateY(0) rotate(-1deg);
    filter: brightness(1.4) saturate(1.5);
  }
  75% {
    text-shadow: 
      0 0 25px rgba(239, 68, 68, 1),
      0 0 40px rgba(239, 68, 68, 1),
      0 0 55px rgba(239, 68, 68, 0.9),
      0 -5px 15px rgba(220, 38, 38, 0.8);
    transform: translateY(-3px) rotate(1deg) scale(1.05);
    filter: brightness(1.7) saturate(2);
  }
}

/* === EFECTO: PULSE (Pulso Radioactivo) === */
.badge-effect-pulse {
  display: inline-block;
  animation: pulseAnimation 1.2s ease-in-out infinite;
  font-weight: 900;
  color: #f43f5e !important;
}

@keyframes pulseAnimation {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    text-shadow: 
      0 0 10px rgba(225, 29, 72, 1),
      0 0 20px rgba(225, 29, 72, 0.8),
      0 0 30px rgba(225, 29, 72, 0.6);
    filter: brightness(1.3) hue-rotate(0deg);
  }
  50% {
    transform: scale(1.15) rotate(2deg);
    text-shadow: 
      0 0 25px rgba(225, 29, 72, 1),
      0 0 45px rgba(225, 29, 72, 1),
      0 0 65px rgba(225, 29, 72, 0.9),
      0 0 85px rgba(225, 29, 72, 0.7),
      0 0 3px rgba(255, 255, 255, 0.8);
    filter: brightness(1.8) hue-rotate(10deg);
  }
}

/* === EFECTO: SHIMMER (Destello Cristalino) === */
.badge-effect-shimmer {
  display: inline-block;
  position: relative;
  font-weight: 900;
  animation: shimmerTextAnimation 1.5s linear infinite;
  color: #ec4899 !important;
}

@keyframes shimmerTextAnimation {
  0%, 100% {
    text-shadow: 
      0 0 8px rgba(236, 72, 153, 0.7),
      3px 0 10px rgba(255, 255, 255, 0.3);
    filter: brightness(1.2);
    transform: translateX(0) scale(1);
  }
  25% {
    text-shadow: 
      0 0 20px rgba(236, 72, 153, 1),
      0 0 35px rgba(236, 72, 153, 0.9),
      5px 0 15px rgba(255, 255, 255, 0.7);
    filter: brightness(1.6) saturate(1.5);
    transform: translateX(2px) scale(1.04);
  }
  50% {
    text-shadow: 
      0 0 8px rgba(236, 72, 153, 0.7),
      -3px 0 10px rgba(255, 255, 255, 0.3);
    filter: brightness(1.2);
    transform: translateX(0) scale(1);
  }
  75% {
    text-shadow: 
      0 0 20px rgba(236, 72, 153, 1),
      0 0 35px rgba(236, 72, 153, 0.9),
      -5px 0 15px rgba(255, 255, 255, 0.7);
    filter: brightness(1.6) saturate(1.5);
    transform: translateX(-2px) scale(1.04);
  }
}

/* === ESTILOS PARA TÍTULO DE BADGE === */
.badge-title {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* === ESTILOS RESPONSIVE === */
@media (max-width: 768px) {
  /* Reducir LIGERAMENTE intensidad en móviles (pero mantener wow factor) */
  .badge-effect-glow,
  .badge-effect-sparkle,
  .badge-effect-fire,
  .badge-effect-pulse,
  .badge-effect-shimmer {
    animation-duration: calc(1.5 * var(--base-duration, 1s));
  }
  
  .badge-effect-rainbow {
    animation-duration: 2.5s;
  }
  
  /* Escala máxima más pequeña en móvil */
  @keyframes pulseAnimation {
    50% {
      transform: scale(1.08) rotate(2deg);
    }
  }
}

/* === PREFERENCIAS DE MOVIMIENTO REDUCIDO === */
@media (prefers-reduced-motion: reduce) {
  .badge-effect-glow,
  .badge-effect-sparkle,
  .badge-effect-rainbow,
  .badge-effect-fire,
  .badge-effect-pulse,
  .badge-effect-shimmer {
    animation: none;
    /* Mantener estilo estático pero visible */
    text-shadow: 0 0 8px currentColor;
    filter: brightness(1.3);
  }
  
  .badge-effect-glow { color: #60a5fa !important; }
  .badge-effect-sparkle { color: #c084fc !important; }
  .badge-effect-fire { color: #fb923c !important; }
  .badge-effect-pulse { color: #f43f5e !important; }
  .badge-effect-shimmer { color: #ec4899 !important; }
}