:root { --bg-dark: #0a0a0c; --aurora-1: #4f46e5; --aurora-2: #06b6d4; --aurora-3: #a855f7; }
.bg-live-aurora, .bg-live-clouds, .bg-live-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-dark); overflow: hidden; }

/* Aurora: Manchas desplazándose */
.bg-live-aurora::before, .bg-live-aurora::after {
  content: ''; position: absolute; width: 150%; height: 150%; top: -25%; left: -25%;
  filter: opacity(0.4); animation: aurora-move 40s ease-in-out infinite alternate;
}
.bg-live-aurora::before { background: radial-gradient(circle at 20% 30%, var(--aurora-1), transparent 40%); }
.bg-live-aurora::after { background: radial-gradient(circle at 80% 70%, var(--aurora-2), var(--aurora-3), transparent 40%); animation-delay: -20s; }

/* Clouds: Gradientes radiales lentos */
.bg-live-clouds::before, .bg-live-clouds::after {
  content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 50%);
  animation: clouds-move 90s linear infinite;
}
.bg-live-clouds::after { animation-delay: -45s; transform: scale(1.2); }

/* Stars: Titileo mediante opacidad */
.bg-live-stars::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)), radial-gradient(1px 1px at 100px 150px, #fff, rgba(0,0,0,0)), radial-gradient(1px 1px at 200px 50px, #fff, rgba(0,0,0,0));
  background-size: 300px 300px; animation: stars-twinkle 4s ease-in-out infinite;
}

@keyframes aurora-move { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(-5%, -5%) rotate(5deg); } }
@keyframes clouds-move { 0% { transform: translate(0,0); } 100% { transform: translate(-20%, -10%); } }
@keyframes stars-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }

@media (prefers-reduced-motion: reduce) {
  .bg-live-aurora::before, .bg-live-aurora::after, .bg-live-clouds::before, .bg-live-clouds::after, .bg-live-stars::before { animation: none !important; }
}

