/* Firefly Animation Effect - Versión Infinita Optimizada */
.firefly-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.firefly {
  width: 4px;
  height: 4px;
  background: #2fff8c;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  box-shadow: 0 0 6px #2fff8c, 0 0 12px #2fff8c, 0 0 18px #2fff8c;
  animation: firefly-dance 8s linear infinite, firefly-glow 2s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Clase para pausar todas las animaciones */
.firefly.paused {
  animation-play-state: paused;
}

/* Animación principal de movimiento infinito */
@keyframes firefly-dance {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: translate(100px, -50px) rotate(90deg);
    opacity: 0.8;
  }
  30% {
    transform: translate(-50px, 100px) rotate(180deg);
    opacity: 1;
  }
  40% {
    transform: translate(150px, 50px) rotate(270deg);
    opacity: 0.6;
  }
  50% {
    transform: translate(-100px, -100px) rotate(360deg);
    opacity: 1;
  }
  60% {
    transform: translate(80px, 120px) rotate(450deg);
    opacity: 0.7;
  }
  70% {
    transform: translate(-120px, 30px) rotate(540deg);
    opacity: 0.9;
  }
  80% {
    transform: translate(60px, -80px) rotate(630deg);
    opacity: 0.5;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translate(0, 0) rotate(720deg);
    opacity: 0;
  }
}

/* Animación de brillo */
@keyframes firefly-glow {
  0% {
    box-shadow: 0 0 6px #2fff8c, 0 0 12px #2fff8c, 0 0 18px #2fff8c;
  }
  100% {
    box-shadow: 0 0 12px #2fff8c, 0 0 24px #2fff8c, 0 0 36px #2fff8c;
  }
}

/* Configuraciones individuales para movimiento infinito verdadero */
.firefly:nth-child(1) {
  left: 10%; top: 20%;
  animation: firefly-dance 12s linear infinite, firefly-glow 3s ease-in-out infinite alternate;
  animation-delay: 0s, 0.5s;
}

.firefly:nth-child(2) {
  left: 30%; top: 40%;
  animation: firefly-dance 8s linear infinite, firefly-glow 2.5s ease-in-out infinite alternate;
  animation-delay: 2s, 1s;
}

.firefly:nth-child(3) {
  left: 50%; top: 60%;
  animation: firefly-dance 15s linear infinite, firefly-glow 4s ease-in-out infinite alternate;
  animation-delay: 1s, 0.2s;
}

.firefly:nth-child(4) {
  left: 70%; top: 80%;
  animation: firefly-dance 10s linear infinite, firefly-glow 2s ease-in-out infinite alternate;
  animation-delay: 3s, 1.5s;
}

.firefly:nth-child(5) {
  left: 90%; top: 30%;
  animation: firefly-dance 18s linear infinite, firefly-glow 3.5s ease-in-out infinite alternate;
  animation-delay: 0.5s, 2s;
}

.firefly:nth-child(6) {
  left: 15%; top: 70%;
  animation: firefly-dance 13s linear infinite, firefly-glow 2.8s ease-in-out infinite alternate;
  animation-delay: 2.5s, 0.8s;
}

.firefly:nth-child(7) {
  left: 35%; top: 10%;
  animation: firefly-dance 9s linear infinite, firefly-glow 1.8s ease-in-out infinite alternate;
  animation-delay: 1.5s, 1.2s;
}

.firefly:nth-child(8) {
  left: 65%; top: 50%;
  animation: firefly-dance 16s linear infinite, firefly-glow 4.2s ease-in-out infinite alternate;
  animation-delay: 4s, 0.3s;
}

.firefly:nth-child(9) {
  left: 85%; top: 90%;
  animation: firefly-dance 11s linear infinite, firefly-glow 2.2s ease-in-out infinite alternate;
  animation-delay: 3.5s, 1.8s;
}

.firefly:nth-child(10) {
  left: 25%; top: 85%;
  animation: firefly-dance 14s linear infinite, firefly-glow 3.8s ease-in-out infinite alternate;
  animation-delay: 0.8s, 0.6s;
}

.firefly:nth-child(11) {
  left: 45%; top: 25%;
  animation: firefly-dance 7s linear infinite, firefly-glow 1.5s ease-in-out infinite alternate;
  animation-delay: 2.2s, 2.2s;
}

.firefly:nth-child(12) {
  left: 75%; top: 15%;
  animation: firefly-dance 19s linear infinite, firefly-glow 4.5s ease-in-out infinite alternate;
  animation-delay: 1.8s, 1.1s;
}

.firefly:nth-child(13) {
  left: 5%; top: 45%;
  animation: firefly-dance 13s linear infinite, firefly-glow 3.2s ease-in-out infinite alternate;
  animation-delay: 3.2s, 0.4s;
}

.firefly:nth-child(14) {
  left: 55%; top: 75%;
  animation: firefly-dance 8.5s linear infinite, firefly-glow 2.3s ease-in-out infinite alternate;
  animation-delay: 0.3s, 1.6s;
}

.firefly:nth-child(15) {
  left: 95%; top: 65%;
  animation: firefly-dance 17s linear infinite, firefly-glow 3.9s ease-in-out infinite alternate;
  animation-delay: 2.8s, 0.9s;
}

.firefly:nth-child(16) {
  left: 8%; top: 55%;
  animation: firefly-dance 12.5s linear infinite, firefly-glow 2.7s ease-in-out infinite alternate;
  animation-delay: 1.2s, 1.4s;
}

.firefly:nth-child(17) {
  left: 38%; top: 35%;
  animation: firefly-dance 20s linear infinite, firefly-glow 5s ease-in-out infinite alternate;
  animation-delay: 4.1s, 0.7s;
}

.firefly:nth-child(18) {
  left: 68%; top: 95%;
  animation: firefly-dance 9.5s linear infinite, firefly-glow 1.9s ease-in-out infinite alternate;
  animation-delay: 0.9s, 2.1s;
}

.firefly:nth-child(19) {
  left: 88%; top: 25%;
  animation: firefly-dance 15.5s linear infinite, firefly-glow 3.7s ease-in-out infinite alternate;
  animation-delay: 2.4s, 1.3s;
}

.firefly:nth-child(20) {
  left: 18%; top: 5%;
  animation: firefly-dance 11.2s linear infinite, firefly-glow 2.4s ease-in-out infinite alternate;
  animation-delay: 4.2s, 0.1s;
}

.firefly:nth-child(21) {
  left: 48%; top: 85%;
  animation: firefly-dance 16.8s linear infinite, firefly-glow 4.1s ease-in-out infinite alternate;
  animation-delay: 1.6s, 1.9s;
}

.firefly:nth-child(22) {
  left: 78%; top: 45%;
  animation: firefly-dance 8.7s linear infinite, firefly-glow 2.1s ease-in-out infinite alternate;
  animation-delay: 3.4s, 0.5s;
}

.firefly:nth-child(23) {
  left: 98%; top: 75%;
  animation: firefly-dance 14.3s linear infinite, firefly-glow 3.4s ease-in-out infinite alternate;
  animation-delay: 0.2s, 2.3s;
}

.firefly:nth-child(24) {
  left: 28%; top: 15%;
  animation: firefly-dance 18.6s linear infinite, firefly-glow 4.6s ease-in-out infinite alternate;
  animation-delay: 2.6s, 1.7s;
}

.firefly:nth-child(25) {
  left: 58%; top: 55%;
  animation: firefly-dance 10.4s linear infinite, firefly-glow 2.6s ease-in-out infinite alternate;
  animation-delay: 4.4s, 0.8s;
}

.firefly:nth-child(26) {
  left: 3%; top: 35%;
  animation: firefly-dance 13.7s linear infinite, firefly-glow 3.3s ease-in-out infinite alternate;
  animation-delay: 1.4s, 1.5s;
}

.firefly:nth-child(27) {
  left: 33%; top: 95%;
  animation: firefly-dance 17.2s linear infinite, firefly-glow 4.3s ease-in-out infinite alternate;
  animation-delay: 3.6s, 2.4s;
}

.firefly:nth-child(28) {
  left: 63%; top: 5%;
  animation: firefly-dance 9.1s linear infinite, firefly-glow 1.7s ease-in-out infinite alternate;
  animation-delay: 0.4s, 1.1s;
}

.firefly:nth-child(29) {
  left: 93%; top: 85%;
  animation: firefly-dance 15.9s linear infinite, firefly-glow 3.6s ease-in-out infinite alternate;
  animation-delay: 2.2s, 0.6s;
}

.firefly:nth-child(30) {
  left: 23%; top: 65%;
  animation: firefly-dance 12.1s linear infinite, firefly-glow 2.9s ease-in-out infinite alternate;
  animation-delay: 4.6s, 1.8s;
}

/* Asegurar que el contenido esté por encima */
.container {
  position: relative;
  z-index: 2;
}

/* Optimizaciones responsive */
@media (max-width: 768px) {
  .firefly {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 4px #2fff8c, 0 0 8px #2fff8c, 0 0 12px #2fff8c;
  }
  
  /* Reducir número de fireflies en tablets */
  .firefly:nth-child(n+21) {
    display: none;
  }
}

@media (max-width: 480px) {
  .firefly {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 3px #2fff8c, 0 0 6px #2fff8c, 0 0 9px #2fff8c;
  }
  
  /* Solo mostrar 15 fireflies en móviles */
  .firefly:nth-child(n+16) {
    display: none;
  }
}

@media (max-width: 320px) {
  /* Solo mostrar 10 fireflies en pantallas muy pequeñas */
  .firefly:nth-child(n+11) {
    display: none;
  }
}

/* Respetar preferencias de usuario para animaciones */
@media (prefers-reduced-motion: reduce) {
  .firefly {
    animation: none;
    opacity: 0.2;
  }
}

.firefly:nth-child(2) {
  left: 30%; top: 40%;
  animation: firefly-dance 8s linear infinite, firefly-glow 2.5s ease-in-out infinite alternate;
  animation-delay: 2s, 1s;
}

.firefly:nth-child(3) {
  left: 50%; top: 60%;
  animation: firefly-dance 15s linear infinite, firefly-glow 4s ease-in-out infinite alternate;
  animation-delay: 1s, 0.2s;
}

.firefly:nth-child(4) {
  left: 70%; top: 80%;
  animation: firefly-dance 10s linear infinite, firefly-glow 2s ease-in-out infinite alternate;
  animation-delay: 3s, 1.5s;
}

.firefly:nth-child(5) {
  left: 90%; top: 30%;
  animation: firefly-dance 18s linear infinite, firefly-glow 3.5s ease-in-out infinite alternate;
  animation-delay: 0.5s, 2s;
}

.firefly:nth-child(6) {
  left: 15%; top: 70%;
  animation: firefly-dance 13s linear infinite, firefly-glow 2.8s ease-in-out infinite alternate;
  animation-delay: 2.5s, 0.8s;
}

.firefly:nth-child(7) {
  left: 35%; top: 10%;
  animation: firefly-dance 9s linear infinite, firefly-glow 1.8s ease-in-out infinite alternate;
  animation-delay: 1.5s, 1.2s;
}

.firefly:nth-child(8) {
  left: 65%; top: 50%;
  animation: firefly-dance 16s linear infinite, firefly-glow 4.2s ease-in-out infinite alternate;
  animation-delay: 4s, 0.3s;
}

.firefly:nth-child(9) {
  left: 85%; top: 90%;
  animation: firefly-dance 11s linear infinite, firefly-glow 2.2s ease-in-out infinite alternate;
  animation-delay: 3.5s, 1.8s;
}

.firefly:nth-child(10) {
  left: 25%; top: 85%;
  animation: firefly-dance 14s linear infinite, firefly-glow 3.8s ease-in-out infinite alternate;
  animation-delay: 0.8s, 0.6s;
}

.firefly:nth-child(11) {
  left: 45%; top: 25%;
  animation: firefly-dance 7s linear infinite, firefly-glow 1.5s ease-in-out infinite alternate;
  animation-delay: 2.2s, 2.2s;
}

.firefly:nth-child(12) {
  left: 75%; top: 15%;
  animation: firefly-dance 19s linear infinite, firefly-glow 4.5s ease-in-out infinite alternate;
  animation-delay: 1.8s, 1.1s;
}

.firefly:nth-child(13) {
  left: 5%; top: 45%;
  animation: firefly-dance 13s linear infinite, firefly-glow 3.2s ease-in-out infinite alternate;
  animation-delay: 3.2s, 0.4s;
}

.firefly:nth-child(14) {
  left: 55%; top: 75%;
  animation: firefly-dance 8.5s linear infinite, firefly-glow 2.3s ease-in-out infinite alternate;
  animation-delay: 0.3s, 1.6s;
}

.firefly:nth-child(15) {
  left: 95%; top: 65%;
  animation: firefly-dance 17s linear infinite, firefly-glow 3.9s ease-in-out infinite alternate;
  animation-delay: 2.8s, 0.9s;
}

.firefly:nth-child(16) {
  left: 8%;
  top: 55%;
  animation-delay: 1.2s;
  animation-duration: 5.2s;
}

.firefly:nth-child(17) {
  left: 38%;
  top: 35%;
  animation-delay: 3.8s;
  animation-duration: 7.8s;
}

.firefly:nth-child(18) {
  left: 68%;
  top: 95%;
  animation-delay: 0.6s;
  animation-duration: 4.6s;
}

.firefly:nth-child(19) {
  left: 88%;
  top: 25%;
  animation-delay: 2.4s;
  animation-duration: 6.4s;
}

.firefly:nth-child(20) {
  left: 18%;
  top: 5%;
  animation-delay: 4.2s;
  animation-duration: 8.2s;
}

.firefly:nth-child(21) {
  left: 48%;
  top: 85%;
  animation-delay: 1.6s;
  animation-duration: 5.6s;
}

.firefly:nth-child(22) {
  left: 78%;
  top: 45%;
  animation-delay: 3.4s;
  animation-duration: 7.4s;
}

.firefly:nth-child(23) {
  left: 98%;
  top: 75%;
  animation-delay: 0.2s;
  animation-duration: 4.2s;
}

.firefly:nth-child(24) {
  left: 28%;
  top: 15%;
  animation-delay: 2.6s;
  animation-duration: 6.6s;
}

.firefly:nth-child(25) {
  left: 58%;
  top: 55%;
  animation-delay: 4.4s;
  animation-duration: 8.4s;
}

.firefly:nth-child(26) {
  left: 3%;
  top: 35%;
  animation-delay: 1.4s;
  animation-duration: 5.4s;
}

.firefly:nth-child(27) {
  left: 33%;
  top: 95%;
  animation-delay: 3.6s;
  animation-duration: 7.6s;
}

.firefly:nth-child(28) {
  left: 63%;
  top: 5%;
  animation-delay: 0.4s;
  animation-duration: 4.4s;
}

.firefly:nth-child(29) {
  left: 93%;
  top: 85%;
  animation-delay: 2.2s;
  animation-duration: 6.2s;
}

.firefly:nth-child(30) {
  left: 23%;
  top: 65%;
  animation-delay: 4.6s;
  animation-duration: 8.6s;
}

@keyframes firefly-glow {
  0% {
    opacity: 0;
    transform: translateY(0px) translateX(0px) scale(0.5);
  }
  25% {
    opacity: 1;
    transform: translateY(-40px) translateX(30px) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-80px) translateX(-20px) scale(0.8);
  }
  75% {
    opacity: 1;
    transform: translateY(-60px) translateX(40px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(0px) scale(0.3);
  }
}

/* Variaciones de movimiento para más naturalidad */
.firefly:nth-child(odd) {
  animation-name: firefly-glow-alt;
}

@keyframes firefly-glow-alt {
  0% {
    opacity: 0;
    transform: translateY(0px) translateX(0px) scale(0.3);
  }
  20% {
    opacity: 0.6;
    transform: translateY(30px) translateX(-25px) scale(0.8);
  }
  40% {
    opacity: 1;
    transform: translateY(-20px) translateX(35px) scale(1.1);
  }
  60% {
    opacity: 0.7;
    transform: translateY(-70px) translateX(-15px) scale(0.9);
  }
  80% {
    opacity: 1;
    transform: translateY(-50px) translateX(20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) translateX(-30px) scale(0.4);
  }
}

/* Tercera variación para más diversidad */
.firefly:nth-child(3n) {
  animation-name: firefly-glow-wide;
}

@keyframes firefly-glow-wide {
  0% {
    opacity: 0;
    transform: translateY(0px) translateX(0px) scale(0.4);
  }
  15% {
    opacity: 0.5;
    transform: translateY(-15px) translateX(50px) scale(0.7);
  }
  30% {
    opacity: 1;
    transform: translateY(20px) translateX(-40px) scale(1);
  }
  45% {
    opacity: 0.9;
    transform: translateY(-90px) translateX(60px) scale(1.3);
  }
  60% {
    opacity: 0.6;
    transform: translateY(-30px) translateX(-50px) scale(0.8);
  }
  75% {
    opacity: 1;
    transform: translateY(-110px) translateX(30px) scale(1.1);
  }
  90% {
    opacity: 0.8;
    transform: translateY(-60px) translateX(-70px) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateY(-140px) translateX(0px) scale(0.2);
  }
}

/* Cuarta variación - movimiento circular */
.firefly:nth-child(4n) {
  animation-name: firefly-glow-circular;
}

@keyframes firefly-glow-circular {
  0% {
    opacity: 0;
    transform: translateY(0px) translateX(0px) scale(0.5) rotate(0deg);
  }
  25% {
    opacity: 0.8;
    transform: translateY(-30px) translateX(30px) scale(1) rotate(90deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-60px) translateX(0px) scale(1.2) rotate(180deg);
  }
  75% {
    opacity: 0.9;
    transform: translateY(-30px) translateX(-30px) scale(0.9) rotate(270deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-90px) translateX(0px) scale(0.3) rotate(360deg);
  }
}

/* Asegurar que el contenido esté por encima */
.container {
  position: relative;
  z-index: 2;
}

/* Responsive optimizations para fireflies */
@media (max-width: 768px) {
  .firefly {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 4px #2fff8c, 0 0 8px #2fff8c, 0 0 12px #2fff8c;
  }
  
  /* Reducir número de fireflies en tablets para mejor rendimiento */
  .firefly:nth-child(n+21) {
    display: none;
  }
}

@media (max-width: 480px) {
  .firefly {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 3px #2fff8c, 0 0 6px #2fff8c, 0 0 9px #2fff8c;
  }
  
  /* Solo mostrar 15 fireflies en móviles pequeños */
  .firefly:nth-child(n+16) {
    display: none;
  }
  
  /* Animaciones más suaves en móviles */
  .firefly {
    animation-duration: 5s !important;
  }
}

@media (max-width: 320px) {
  /* Solo mostrar 12 fireflies en pantallas muy pequeñas */
  .firefly:nth-child(n+13) {
    display: none;
  }
}

/* Deshabilitar fireflies en dispositivos con batería baja o conexión lenta */
@media (prefers-reduced-motion: reduce) {
  .firefly {
    animation: none;
    opacity: 0.3;
  }
}