/* Animated Musical Backgrounds for Cancionealo Landing
 * Este archivo contiene animaciones de fondo para hacer la página más dinámica
 */

/* Contenedor común para los fondos animados */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1; /* Aumentado para asegurar consistencia entre secciones */
  pointer-events: none; /* Asegura que no interfiera con clicks */
}

/* Íconos musicales flotantes */
.musical-bubble {
  position: absolute;
  color: rgba(255, 255, 255, 0.05); /* Color muy sutil */
  opacity: 0;
  z-index: -1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: float-up;
  filter: blur(0.5px); /* Efecto suave */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.1); /* Brillo sutil */
}

/* Variantes para Hero Section */
.hero-section .musical-bubble {
  color: rgba(255, 255, 255, 0.08);
}

/* Variantes para Example Section */
.example-section .musical-bubble {
  color: rgba(235, 220, 255, 0.06);
}

/* Variantes para Offer Section */
.offer-section .musical-bubble {
  color: rgba(255, 245, 220, 0.06);
  z-index: 1; /* Aseguramos que estén por encima del fondo pero debajo del contenido */
}

/* Variantes para How it works Section */
.how-it-works-section .musical-bubble {
  color: rgba(255, 230, 180, 0.05);
}

/* Variantes para Testimonials Section */
.testimonials-section .musical-bubble {
  color: rgba(220, 200, 255, 0.07);
}

/* Variantes para Signup Section */
.signup-section .musical-bubble {
  color: rgba(255, 255, 255, 0.04);
}

/* Animación de flotar hacia arriba como burbujas */
@keyframes float-up {
  0% {
    transform: translateY(40%) scale(0.5) rotate(0deg); /* Empezando desde una posición más elevada */
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-80%) scale(1) rotate(15deg); /* Subiendo más para compensar la posición inicial */
    opacity: 0;
  }
}

/* Animación de oscilación horizontal */
@keyframes oscillate {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Animación de rotación lenta */
@keyframes rotate-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Animación de pulso */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* Clases para tamaños de íconos */
.bubble-small { font-size: 1.2rem; }
.bubble-medium { font-size: 2.5rem; }
.bubble-large { font-size: 3.5rem; }

/* Clases para velocidades de animación (30% más rápido) */
.duration-slow { animation-duration: 10.5s; } /* Reducido de 15s */
.duration-medium { animation-duration: 8.4s; } /* Reducido de 12s */
.duration-fast { animation-duration: 6.3s; } /* Reducido de 9s */

/* Clases para retrasos de animación */
.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 1s; }
.delay-2 { animation-delay: 2s; }
.delay-3 { animation-delay: 3s; }
.delay-4 { animation-delay: 4s; }
.delay-5 { animation-delay: 5s; }
.delay-6 { animation-delay: 6s; }
.delay-7 { animation-delay: 7s; }
.delay-8 { animation-delay: 8s; }

/* Clases para animaciones secundarias */
.oscillate {
  animation: oscillate 5s ease-in-out infinite;
  animation-delay: calc(var(--delay) * 1s);
}

.rotate {
  animation: rotate-slow 20s linear infinite;
}

.pulse {
  animation: pulse 4s ease-in-out infinite;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .musical-bubble {
    opacity: 0.6; /* Reducir visibilidad en móvil */
  }
  
  .bubble-large {
    font-size: 2.5rem; /* Tamaños más pequeños en móvil */
  }
  
  .bubble-medium {
    font-size: 1.8rem;
  }
}