/* Partículas flotantes y efectos especiales */

/* Partículas flotantes */
.particle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: float 6s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes float {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0);
  }
}

/* Partículas de diferentes tamaños */
.particle.small {
  width: 5px;
  height: 5px;
  background: rgba(0, 123, 255, 0.6);
  border-radius: 50%;
}

.particle.medium {
  width: 8px;
  height: 8px;
  background: rgba(40, 167, 69, 0.5);
  border-radius: 50%;
}

.particle.large {
  width: 12px;
  height: 12px;
  background: rgba(255, 193, 7, 0.7);
  border-radius: 50%;
}

/* Partículas con diferentes formas */
.particle.square {
  border-radius: 2px;
  background: rgba(108, 117, 125, 0.5);
}

.particle.triangle {
  width: 0;
  height: 0;
  background: transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid rgba(220, 53, 69, 0.5);
}

/* Partículas con diferentes colores */
.particle.blue {
  background: rgba(0, 123, 255, 0.5);
}

.particle.green {
  background: rgba(40, 167, 69, 0.5);
}

.particle.yellow {
  background: rgba(255, 193, 7, 0.5);
}

.particle.red {
  background: rgba(220, 53, 69, 0.5);
}

.particle.purple {
  background: rgba(102, 16, 242, 0.5);
}

/* Partículas con diferentes velocidades */
.particle.slow {
  animation-duration: 8s;
}

.particle.fast {
  animation-duration: 4s;
}

/* Partículas con diferentes direcciones */
.particle.left {
  animation-name: floatLeft;
}

@keyframes floatLeft {
  0% {
    opacity: 0;
    transform: translateX(20px) translateY(0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateX(-20px) translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-40px) translateY(-40px) scale(0);
  }
}

.particle.right {
  animation-name: floatRight;
}

@keyframes floatRight {
  0% {
    opacity: 0;
    transform: translateX(-20px) translateY(0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateX(20px) translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(40px) translateY(-40px) scale(0);
  }
}

/* Partículas con efectos de brillo */
.particle.glow {
  box-shadow: 0 0 10px currentColor;
}

.particle.glow.blue {
  color: rgba(0, 123, 255, 0.8);
}

.particle.glow.green {
  color: rgba(40, 167, 69, 0.8);
}

.particle.glow.yellow {
  color: rgba(255, 193, 7, 0.8);
}

/* Partículas con efectos de rotación */
.particle.rotate {
  animation: floatRotate 6s ease-in-out infinite;
}

@keyframes floatRotate {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(180deg);
  }
  80% {
    opacity: 1;
    transform: translateY(-20px) scale(1) rotate(360deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0) rotate(540deg);
  }
}

/* Partículas con efectos de rebote */
.particle.bounce {
  animation: floatBounce 6s ease-in-out infinite;
}

@keyframes floatBounce {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-10px) scale(1);
  }
  60% {
    transform: translateY(-20px) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(-30px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0);
  }
}

/* Partículas con efectos de ondulación */
.particle.wave {
  animation: floatWave 6s ease-in-out infinite;
}

@keyframes floatWave {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0) translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1) translateX(0);
  }
  40% {
    transform: translateY(-10px) scale(1) translateX(10px);
  }
  60% {
    transform: translateY(-20px) scale(1) translateX(-10px);
  }
  80% {
    opacity: 1;
    transform: translateY(-30px) scale(1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0) translateX(0);
  }
}

/* Partículas con efectos de espiral */
.particle.spiral {
  animation: floatSpiral 6s ease-in-out infinite;
}

@keyframes floatSpiral {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(90deg);
  }
  40% {
    transform: translateY(-10px) scale(1) rotate(180deg);
  }
  60% {
    transform: translateY(-20px) scale(1) rotate(270deg);
  }
  80% {
    opacity: 1;
    transform: translateY(-30px) scale(1) rotate(360deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0) rotate(450deg);
  }
}

/* Partículas con efectos de zoom */
.particle.zoom {
  animation: floatZoom 6s ease-in-out infinite;
}

@keyframes floatZoom {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-10px) scale(1.2);
  }
  60% {
    transform: translateY(-20px) scale(0.8);
  }
  80% {
    opacity: 1;
    transform: translateY(-30px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0);
  }
}

/* Partículas con efectos de parpadeo */
.particle.blink {
  animation: floatBlink 6s ease-in-out infinite;
}

@keyframes floatBlink {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0.3;
  }
  80% {
    opacity: 1;
    transform: translateY(-30px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0);
  }
}

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

/* Partículas en el fondo */
.particles-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Partículas en primer plano */
.particles-foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Responsive para partículas */
@media (max-width: 768px) {
  .particle {
    animation-duration: 4s;
  }
  
  .particle.large {
    width: 5px;
    height: 5px;
  }
  
  .particle.medium {
    width: 3px;
    height: 3px;
  }
  
  .particle.small {
    width: 2px;
    height: 2px;
  }
}

/* Optimización de rendimiento para partículas */
.particle {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Partículas con diferentes opacidades */
.particle.opacity-25 { opacity: 0.25; }
.particle.opacity-50 { opacity: 0.5; }
.particle.opacity-75 { opacity: 0.75; }

/* Partículas con diferentes velocidades de animación */
.particle.duration-2s { animation-duration: 2s; }
.particle.duration-4s { animation-duration: 4s; }
.particle.duration-6s { animation-duration: 6s; }
.particle.duration-8s { animation-duration: 8s; }
.particle.duration-10s { animation-duration: 10s; }