/* Auroras Animadas Espectaculares */
.aurora-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  background-color: #FFFFFF; /* Blanco de paz absoluto */
  pointer-events: none;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35; /* Ajustado para que el fondo siga viéndose blanco y limpio */
  animation: moveAurora 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: multiply; /* Para sombras y mezcla suave en fondos claros */
}

.aurora-blue {
  background: var(--accent-blue);
  width: 60vw;
  height: 60vh;
  top: -10%;
  left: -10%;
  animation-duration: 25s;
}

.aurora-pink {
  background: var(--accent-pink);
  width: 50vw;
  height: 50vh;
  bottom: -20%;
  right: -10%;
  animation-duration: 30s;
  animation-delay: -5s;
}

.aurora-blue-alt {
  background: rgba(0, 102, 255, 0.8);
  width: 40vw;
  height: 40vh;
  top: 30%;
  left: 50%;
  animation-duration: 35s;
  animation-delay: -15s;
}

@keyframes moveAurora {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25% { transform: translate(15vw, 10vh) scale(1.2) rotate(45deg); }
  50% { transform: translate(-5vw, 20vh) scale(0.9) rotate(90deg); }
  75% { transform: translate(-15vw, -5vh) scale(1.1) rotate(135deg); }
  100% { transform: translate(5vw, -15vh) scale(1) rotate(180deg); }
}