/* aurora — velos de color que se mueven muy despacio detrás del contenido.
   Portado del `aurora-background` de la cantera. Cero JS.

   Diferencia con `fondo-ambiente`: aquel son dos conos de luz duros para una
   cabecera oscura; esto es un velo suave y ancho que funciona también en claro,
   y sirve para una sección entera, no sólo para el hero. */
[data-lui~="aurora"]{
  --lui-a1:var(--lui-acento,#c8a24a);
  --lui-a2:#4a6fc8;
  --lui-opacidad:.30;
  --lui-vel:22s;
  position:relative;
  isolation:isolate;          /* el velo no se sale a lo que haya alrededor */
  overflow:hidden;
}

/* Dos capas con el MISMO gradiente pero distinta escala y sentido de giro: es
   el cruce lo que hace que no se vea el bucle. Con una sola capa se nota
   enseguida que se repite. */
[data-lui~="aurora"]::before,
[data-lui~="aurora"]::after{
  content:"";position:absolute;
  /* Más grande que la caja para que al girar no asome ninguna esquina vacía. */
  inset:-60%;
  z-index:-1;pointer-events:none;
  opacity:var(--lui-opacidad);
  filter:blur(70px);
  background:
    radial-gradient(38% 44% at 22% 30%, var(--lui-a1) 0%, transparent 62%),
    radial-gradient(42% 40% at 78% 26%, var(--lui-a2) 0%, transparent 60%),
    radial-gradient(46% 46% at 52% 82%, var(--lui-a1) 0%, transparent 64%);
}

/* CADA capa necesita su propio keyframe con su rotación dentro. Compartir uno
   solo hace que la `transform` de la animación pise la del elemento y las dos
   capas acaben apuntando al mismo sitio: se ve una sola mancha girando. */
[data-lui~="aurora"]::before{animation:lui-aurora-a var(--lui-vel) ease-in-out infinite alternate}
[data-lui~="aurora"]::after{animation:lui-aurora-b calc(var(--lui-vel) * 1.45) ease-in-out infinite alternate}

@keyframes lui-aurora-a{
  from{transform:rotate(0deg)   scale(1)}
  to  {transform:rotate(9deg)   scale(1.14)}
}
@keyframes lui-aurora-b{
  from{transform:rotate(0deg)   scale(1.1)}
  to  {transform:rotate(-11deg) scale(.95)}
}

/* Sobre fondo oscuro conviene subir la mezcla; sobre claro, bajarla. */
[data-lui~="aurora"][data-lui-tono="oscuro"]{--lui-opacidad:.42}
[data-lui~="aurora"][data-lui-tono="suave"]{--lui-opacidad:.18}

@media (prefers-reduced-motion:reduce){
  /* Se queda quieto pero SE VE: el degradado es parte del diseño, no un adorno. */
  [data-lui~="aurora"]::before,[data-lui~="aurora"]::after{animation:none}
}