/* ========================================
   🎮 SISTEMA DE GAMIFICACIÓN AVANZADA
   Efectos Visuales Espectaculares
   ======================================== */

/* Variables CSS para efectos */
:root {
  --particle-gold: #ffd700;
  --particle-silver: #c0c0c0;
  --particle-bronze: #cd7f32;
  --glow-intensity: 0.8;
  --animation-speed: 1s;
  --hologram-opacity: 0.7;
}

/* ========================================
   🎆 EFECTOS DE PARTÍCULAS
   ======================================== */

/* Contenedor de partículas */
.particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* Partícula individual */
.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
}

/* Partícula dorada */
.particle-gold {
  background: radial-gradient(circle, var(--particle-gold), #ffed4e);
  box-shadow: 0 0 10px var(--particle-gold);
  animation: particleExplosion 2s ease-out forwards;
}

/* Partícula plateada */
.particle-silver {
  background: radial-gradient(circle, var(--particle-silver), #e8e8e8);
  box-shadow: 0 0 8px var(--particle-silver);
  animation: particleExplosion 1.8s ease-out forwards;
}

/* Partícula de bronce */
.particle-bronze {
  background: radial-gradient(circle, var(--particle-bronze), #daa520);
  box-shadow: 0 0 6px var(--particle-bronze);
  animation: particleExplosion 1.6s ease-out forwards;
}

/* Animación de explosión de partículas */
@keyframes particleExplosion {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: var(--glow-intensity);
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Efecto de lluvia de partículas */
@keyframes particleRain {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.particle-rain {
  animation: particleRain 3s linear infinite;
}

/* ========================================
   🌟 EFECTOS HOLOGRÁFICOS
   ======================================== */

/* Efecto holográfico base */
.hologram-effect {
  position: relative;
  animation: hologramFlicker 3s infinite;
}

/* Flicker holográfico */
@keyframes hologramFlicker {
  0%, 100% { 
    opacity: 1; 
    filter: brightness(1);
  }
  25% { 
    opacity: 0.8; 
    filter: brightness(1.2);
  }
  50% { 
    opacity: 0.9; 
    filter: brightness(0.8);
  }
  75% { 
    opacity: 0.85; 
    filter: brightness(1.1);
  }
}

/* Efecto de escaneo holográfico */
@keyframes hologramScan {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.hologram-scan::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
  animation: hologramScan 2s infinite;
  pointer-events: none;
}

/* ========================================
   ⚡ EFECTOS GLITCH
   ======================================== */

/* Efecto glitch base */
.glitch-effect {
  position: relative;
  animation: glitchShake 0.3s infinite;
}

/* Shake glitch */
@keyframes glitchShake {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Efecto de distorsión RGB */
.glitch-rgb::before,
.glitch-rgb::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glitch-rgb::before {
  animation: glitchRGB 0.3s infinite;
  color: #ff0000;
  z-index: -1;
}

.glitch-rgb::after {
  animation: glitchRGB 0.3s infinite reverse;
  color: #0000ff;
  z-index: -2;
}

@keyframes glitchRGB {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* ========================================
   🌊 EFECTOS DE ONDA Y RIPPLE
   ======================================== */

/* Efecto ripple base */
.ripple-effect {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Onda de ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.3);
  transform: scale(0);
  animation: rippleAnimation 0.6s linear;
  pointer-events: none;
}

@keyframes rippleAnimation {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Efecto de onda expansiva */
@keyframes waveExpand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

.wave-effect {
  position: absolute;
  border: 2px solid var(--particle-gold);
  border-radius: 50%;
  animation: waveExpand 1s ease-out;
  pointer-events: none;
}

/* ========================================
   ✨ EFECTOS DE BRILLO Y SHIMMER
   ======================================== */

/* Efecto shimmer */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 2s infinite;
  pointer-events: none;
}

/* Efecto de brillo pulsante */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px var(--particle-gold);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px var(--particle-gold);
    transform: scale(1.05);
  }
}

.pulse-glow {
  animation: pulseGlow 2s infinite;
}

/* ========================================
   🎯 EFECTOS DE MEDALLAS
   ======================================== */

/* Medalla común */
.medal-common {
  border: 3px solid var(--particle-bronze);
  box-shadow: 0 0 15px var(--particle-bronze);
}

/* Medalla rara */
.medal-rare {
  border: 3px solid var(--particle-silver);
  box-shadow: 0 0 20px var(--particle-silver);
  animation: medalRareGlow 3s infinite;
}

@keyframes medalRareGlow {
  0%, 100% {
    box-shadow: 0 0 20px var(--particle-silver);
  }
  50% {
    box-shadow: 0 0 30px var(--particle-silver), 0 0 40px var(--particle-silver);
  }
}

/* Medalla épica */
.medal-epic {
  border: 3px solid var(--particle-gold);
  box-shadow: 0 0 25px var(--particle-gold);
  animation: medalEpicGlow 2s infinite;
}

@keyframes medalEpicGlow {
  0%, 100% {
    box-shadow: 0 0 25px var(--particle-gold);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 35px var(--particle-gold), 0 0 45px var(--particle-gold);
    transform: scale(1.02);
  }
}

/* Medalla legendaria */
.medal-legendary {
  border: 3px solid var(--particle-gold);
  box-shadow: 0 0 30px var(--particle-gold);
  animation: medalLegendaryGlow 1.5s infinite;
  position: relative;
}

.medal-legendary::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid var(--particle-gold);
  border-radius: inherit;
  animation: medalLegendaryRing 2s infinite;
  pointer-events: none;
}

@keyframes medalLegendaryGlow {
  0%, 100% {
    box-shadow: 0 0 30px var(--particle-gold);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px var(--particle-gold), 0 0 50px var(--particle-gold);
    transform: scale(1.03);
  }
}

@keyframes medalLegendaryRing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* ========================================
   🎮 EFECTOS DE INTERACCIÓN
   ======================================== */

/* Efecto de hover 3D */
.hover-3d {
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-3d:hover {
  transform: translateY(-15px) rotateX(10deg) rotateY(5deg);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(255, 215, 0, 0.4);
}

/* Efecto de click */
.click-effect {
  transition: transform 0.1s ease;
}

.click-effect:active {
  transform: scale(0.95);
}

/* Efecto de focus */
.focus-glow:focus {
  outline: none;
  box-shadow: 0 0 20px rgba(100, 181, 246, 0.5);
}

/* ========================================
   📱 RESPONSIVE Y ACCESIBILIDAD
   ======================================== */

/* Reducir animaciones para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .particle,
  .hologram-effect,
  .glitch-effect,
  .ripple,
  .shimmer-effect {
    animation: none !important;
  }
}

/* Optimización para dispositivos móviles */
@media (max-width: 768px) {
  .particle {
    width: 6px;
    height: 6px;
  }
  
  .hover-3d:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(3deg);
  }
  
  .medal-legendary::before {
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
  }
}

/* Optimización para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .particle {
    width: 10px;
    height: 10px;
  }
  
  .shimmer-effect::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  }
}

/* ========================================
   🎨 UTILIDADES DE EFECTOS
   ======================================== */

/* Clases de utilidad para aplicar efectos */
.effect-particle-gold { animation: particleExplosion 2s ease-out forwards; }
.effect-particle-silver { animation: particleExplosion 1.8s ease-out forwards; }
.effect-particle-bronze { animation: particleExplosion 1.6s ease-out forwards; }
.effect-hologram { animation: hologramFlicker 3s infinite; }
.effect-glitch { animation: glitchShake 0.3s infinite; }
.effect-ripple { animation: rippleAnimation 0.6s linear; }
.effect-shimmer { animation: shimmer 2s infinite; }
.effect-pulse { animation: pulseGlow 2s infinite; }

/* Estados de efectos */
.effect-active { animation-play-state: running; }
.effect-paused { animation-play-state: paused; }
.effect-disabled { animation: none !important; }

/* Z-index para efectos */
.z-particle { z-index: 10000; }
.z-effect { z-index: 9999; }
.z-hologram { z-index: 9998; }
.z-glitch { z-index: 9997; }