/* ============================================================
   KuKo Nights · AURORA (css/aurora.css)
   Fondo global: varios halos de color que derivan solos por
   toda la web, para romper la sensación lineal. Capa fija
   detrás del contenido; el blanco sigue predominando.
   Se enlaza en todas las páginas. Markup esperado en <body>:
   <div class="aurora" aria-hidden="true">
     <span class="ab a1"></span> ... <span class="ab a6"></span>
   </div>
   ============================================================ */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;contain:layout paint}
.aurora .ab{position:absolute;border-radius:50%;filter:blur(50px);will-change:transform,opacity}

/* Paleta nocturna elegante: violeta, rosa, azul y un toque cálido */
.aurora .a1{width:50vw;height:50vw;max-width:660px;max-height:660px;top:-10%;left:-6%;
  background:radial-gradient(circle,rgba(110,92,232,.60),transparent 68%);animation:ad1 14s ease-in-out infinite}
.aurora .a2{width:44vw;height:44vw;max-width:580px;max-height:580px;top:8%;right:-10%;
  background:radial-gradient(circle,rgba(228,100,182,.56),transparent 68%);animation:ad2 18s ease-in-out infinite}
.aurora .a3{width:48vw;height:48vw;max-width:620px;max-height:620px;bottom:-12%;left:6%;
  background:radial-gradient(circle,rgba(78,138,240,.54),transparent 68%);animation:ad3 16s ease-in-out infinite}
.aurora .a4{width:38vw;height:38vw;max-width:500px;max-height:500px;bottom:4%;right:10%;
  background:radial-gradient(circle,rgba(150,104,240,.50),transparent 68%);animation:ad4 20s ease-in-out infinite}
.aurora .a5{width:34vw;height:34vw;max-width:460px;max-height:460px;top:38%;left:34%;
  background:radial-gradient(circle,rgba(238,148,108,.40),transparent 68%);animation:ad5 23s ease-in-out infinite}
.aurora .a6{width:32vw;height:32vw;max-width:440px;max-height:440px;top:56%;right:30%;
  background:radial-gradient(circle,rgba(84,206,198,.38),transparent 68%);animation:ad6 26s ease-in-out infinite}

@keyframes ad1{0%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(32%,28%) scale(1.3);opacity:1}100%{transform:translate(0,0) scale(1);opacity:.85}}
@keyframes ad2{0%{transform:translate(0,0) scale(1);opacity:.82}50%{transform:translate(-30%,24%) scale(1.24);opacity:1}100%{transform:translate(0,0) scale(1);opacity:.82}}
@keyframes ad3{0%{transform:translate(0,0) scale(1);opacity:.82}50%{transform:translate(28%,-26%) scale(1.26);opacity:1}100%{transform:translate(0,0) scale(1);opacity:.82}}
@keyframes ad4{0%{transform:translate(0,0) scale(1);opacity:.8}50%{transform:translate(-32%,-22%) scale(1.2);opacity:1}100%{transform:translate(0,0) scale(1);opacity:.8}}
@keyframes ad5{0%{transform:translate(0,0) scale(1);opacity:.72}50%{transform:translate(24%,-30%) scale(1.26);opacity:1}100%{transform:translate(0,0) scale(1);opacity:.72}}
@keyframes ad6{0%{transform:translate(0,0) scale(1);opacity:.7}50%{transform:translate(-26%,30%) scale(1.22);opacity:1}100%{transform:translate(0,0) scale(1);opacity:.7}}

/* En móvil aligeramos: menos halos y menos blur para rendir bien */
@media(max-width:640px){
  .aurora .ab{filter:blur(40px)}
  .aurora .a5,.aurora .a6{display:none}
}
@media(prefers-reduced-motion:reduce){
  .aurora .ab{animation:none!important}
}