/* ========================================
   🎮 SISTEMA DE GAMIFICACIÓN AVANZADA
   Animaciones Fluidas y Dinámicas
   ======================================== */

/* Variables CSS para animaciones */
:root {
  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --animation-quick: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-slow: cubic-bezier(0.4, 0, 0.6, 1);
}

/* ========================================
   🚀 ANIMACIONES DE ENTRADA ESPECTACULARES
   ======================================== */

/* Entrada tipo Matrix */
@keyframes matrixRain {
  0% {
    transform: translateY(-100vh) rotateX(90deg);
    opacity: 0;
    filter: blur(10px);
  }
  10% {
    opacity: 0.8;
    filter: blur(5px);
  }
  50% {
    opacity: 1;
    filter: blur(0px);
  }
  90% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
    filter: blur(0px);
  }
}

.matrix-entrance {
  animation: matrixRain 1.2s var(--animation-bounce) forwards;
  transform-style: preserve-3d;
}

/* Entrada desde arriba con rebote */
@keyframes slideInFromTop {
  0% {
    transform: translateY(-50px) rotateX(90deg);
    opacity: 0;
  }
  60% {
    transform: translateY(10px) rotateX(-10deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
  }
}

.slide-in-top {
  animation: slideInFromTop 0.8s var(--animation-bounce) forwards;
  transform-style: preserve-3d;
}

/* Entrada desde la izquierda */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotateY(0deg);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInFromLeft 0.6s var(--animation-smooth) forwards;
  transform-style: preserve-3d;
}

/* Entrada desde la derecha */
@keyframes slideInFromRight {
  0% {
    transform: translateX(100px) rotateY(-90deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotateY(0deg);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slideInFromRight 0.6s var(--animation-smooth) forwards;
  transform-style: preserve-3d;
}

/* Entrada con zoom y rotación */
@keyframes zoomInRotate {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(90deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.zoom-in-rotate {
  animation: zoomInRotate 0.8s var(--animation-elastic) forwards;
}

/* Entrada con flip */
@keyframes flipIn {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
    opacity: 0.8;
  }
  60% {
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flip-in {
  animation: flipIn 0.8s var(--animation-smooth) forwards;
  transform-style: preserve-3d;
}

/* ========================================
   📊 ANIMACIONES DE PROGRESO DINÁMICAS
   ======================================== */

/* Barra de progreso con flujo de energía */
@keyframes energyFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.progress-bar-advanced {
  background: linear-gradient(
    90deg,
    #1e3c72 0%,
    #64b5f6 25%,
    #ffd700 50%,
    #64b5f6 75%,
    #1e3c72 100%
  );
  background-size: 200% 100%;
  animation: energyFlow 2s linear infinite;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* Efecto shimmer en barra de progreso */
@keyframes progressShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.progress-bar-advanced::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: progressShimmer 2s infinite;
  pointer-events: none;
}

/* Animación de llenado de barra */
@keyframes progressFill {
  0% {
    width: 0%;
  }
  100% {
    width: var(--progress-width, 100%);
  }
}

.progress-fill-animated {
  animation: progressFill 1.5s var(--animation-smooth) forwards;
}

/* Contador animado */
@keyframes countUp {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.count-up {
  animation: countUp 0.6s var(--animation-bounce) forwards;
}

/* ========================================
   🎯 ANIMACIONES DE HOVER INTERACTIVAS
   ======================================== */

/* Hover con transformación 3D */
.hover-3d-advanced {
  transform-style: preserve-3d;
  transition: all 0.4s var(--animation-smooth);
  perspective: 1000px;
}

.hover-3d-advanced: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);
}

/* Hover con efecto de levitación */
@keyframes levitate {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.hover-levitate:hover {
  animation: levitate 2s ease-in-out infinite;
}

/* Hover con efecto de pulso */
@keyframes hoverPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
  }
}

.hover-pulse:hover {
  animation: hoverPulse 1s ease-in-out infinite;
}

/* Hover con efecto de rotación */
@keyframes hoverRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hover-rotate:hover {
  animation: hoverRotate 0.8s var(--animation-smooth) forwards;
}

/* Hover con efecto de inclinación */
@keyframes hoverTilt {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.hover-tilt:hover {
  animation: hoverTilt 0.6s var(--animation-smooth) forwards;
}

/* ========================================
   🎪 ANIMACIONES DE MEDALLAS
   ======================================== */

/* Animación de obtención de medalla */
@keyframes medalEarned {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

.medal-earned {
  animation: medalEarned 1s var(--animation-elastic) forwards;
}

/* Animación de medalla brillante */
@keyframes medalShine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.medal-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: medalShine 2s infinite;
  pointer-events: none;
}

/* Animación de medalla flotante */
@keyframes medalFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(1deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-1deg);
  }
}

.medal-float {
  animation: medalFloat 3s ease-in-out infinite;
}

/* ========================================
   🎊 ANIMACIONES DE CELEBRACIÓN
   ======================================== */

/* Confeti */
@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--confetti-color, #ffd700);
  animation: confettiFall 3s linear forwards;
  pointer-events: none;
  z-index: 10000;
}

/* Fuegos artificiales */
@keyframes firework {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.firework {
  position: fixed;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #ffd700, transparent);
  border-radius: 50%;
  animation: firework 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 10000;
}

/* Estallido de estrellas */
@keyframes starBurst {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

.star-burst {
  position: fixed;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffd700"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') center/contain no-repeat;
  animation: starBurst 1s ease-out forwards;
  pointer-events: none;
  z-index: 10000;
}

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

/* Efecto de click */
@keyframes clickEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.click-effect {
  animation: clickEffect 0.1s ease;
}

/* Efecto de focus */
@keyframes focusGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(100, 181, 246, 0.4);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(100, 181, 246, 0);
  }
}

.focus-glow:focus {
  animation: focusGlow 0.3s ease-out;
}

/* Efecto de carga */
@keyframes loadingSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  animation: loadingSpinner 1s linear infinite;
}

/* Efecto de carga con puntos */
@keyframes loadingDots {
  0%, 20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.loading-dots::after {
  content: '...';
  animation: loadingDots 1.5s infinite;
}

/* ========================================
   📱 ANIMACIONES RESPONSIVE
   ======================================== */

/* Animaciones optimizadas para móviles */
@media (max-width: 768px) {
  .hover-3d-advanced:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(3deg);
  }
  
  .matrix-entrance {
    animation-duration: 0.8s;
  }
  
  .slide-in-top {
    animation-duration: 0.6s;
  }
  
  .confetti {
    width: 8px;
    height: 8px;
  }
  
  .firework {
    width: 3px;
    height: 3px;
  }
  
  .star-burst {
    width: 16px;
    height: 16px;
  }
}

/* Animaciones optimizadas para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .hover-3d-advanced:hover {
    transform: translateY(-12px) rotateX(8deg) rotateY(4deg);
  }
  
  .matrix-entrance {
    animation-duration: 1s;
  }
}

/* ========================================
   🎨 UTILIDADES DE ANIMACIÓN
   ======================================== */

/* Clases de utilidad para aplicar animaciones */
.animate-matrix { animation: matrixRain 1.2s var(--animation-bounce) forwards; }
.animate-slide-top { animation: slideInFromTop 0.8s var(--animation-bounce) forwards; }
.animate-slide-left { animation: slideInFromLeft 0.6s var(--animation-smooth) forwards; }
.animate-slide-right { animation: slideInFromRight 0.6s var(--animation-smooth) forwards; }
.animate-zoom-rotate { animation: zoomInRotate 0.8s var(--animation-elastic) forwards; }
.animate-flip { animation: flipIn 0.8s var(--animation-smooth) forwards; }
.animate-medal-earned { animation: medalEarned 1s var(--animation-elastic) forwards; }
.animate-levitate { animation: levitate 2s ease-in-out infinite; }
.animate-pulse { animation: hoverPulse 1s ease-in-out infinite; }
.animate-rotate { animation: hoverRotate 0.8s var(--animation-smooth) forwards; }
.animate-tilt { animation: hoverTilt 0.6s var(--animation-smooth) forwards; }

/* Estados de animación */
.animation-paused { animation-play-state: paused; }
.animation-running { animation-play-state: running; }
.animation-reverse { animation-direction: reverse; }
.animation-alternate { animation-direction: alternate; }

/* Delays de animación */
.animation-delay-1 { animation-delay: 0.1s; }
.animation-delay-2 { animation-delay: 0.2s; }
.animation-delay-3 { animation-delay: 0.3s; }
.animation-delay-4 { animation-delay: 0.4s; }
.animation-delay-5 { animation-delay: 0.5s; }

/* Duraciones de animación */
.animation-fast { animation-duration: 0.3s; }
.animation-normal { animation-duration: 0.6s; }
.animation-slow { animation-duration: 1s; }
.animation-slower { animation-duration: 1.5s; }
.animation-slowest { animation-duration: 2s; }

/* ========================================
   🎯 ANIMACIONES DE PERFORMANCE
   ======================================== */

/* Optimización para hardware acceleration */
.hardware-accelerated {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Animaciones optimizadas para GPU */
.gpu-optimized {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reducir animaciones para mejor performance */
.performance-mode * {
  animation-duration: 0.3s !important;
  transition-duration: 0.2s !important;
}