/* Fondo animado del diseño noche: se carga cuando otro diseño lo usa como fondo. */
/* Fondo animado: aurora (tres luces de color que se desplazan y respiran) y estrellas que titilan */
html[data-bg="noche"] { --bga: var(--t-a, var(--accent)); --c2: color-mix(in srgb, var(--bga) 45%, #6d5bff); --c3: color-mix(in srgb, var(--bga) 40%, #22c8ee); --blob: .30; }
html[data-bg="noche"].waso-dark { --blob: .42; }
html[data-bg="noche"] .deep-bg, html[data-bg="noche"].waso-dark .deep-bg { background: var(--bg); }
html[data-bg="noche"] .bg-glow { display: none; }
html[data-bg="noche"] .bg-bar { display: block; left: var(--x); top: var(--y); width: 78vmax; height: 78vmax; border-radius: 50%; box-shadow: none; opacity: var(--blob);
  background: radial-gradient(closest-side, var(--col), transparent 72%); transform: translate3d(0, 0, 0); animation: aurora var(--t) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
html[data-bg="noche"] .bg-bar.b1 { --col: var(--bga); --x: -34vmax; --y: -38vmax; --t: 17s; --mx: 26vw; --my: 12vh; }
html[data-bg="noche"] .bg-bar.b2 { --col: var(--c2); --x: 30vw; --y: 4vh; --t: 22s; --d: -7s; --mx: -30vw; --my: 18vh; }
html[data-bg="noche"] .bg-bar.b4 { --col: var(--c3); --x: -20vw; --y: 46vh; --t: 26s; --d: -12s; --mx: 34vw; --my: -14vh; }
html[data-bg="noche"] .bg-bar.b3, html[data-bg="noche"] .bg-bar.b5, html[data-bg="noche"] .bg-bar.b6, html[data-bg="noche"] .bg-bar.b7 { display: none; }
@keyframes aurora { from { transform: translate3d(0, 0, 0) scale(.9); } to { transform: translate3d(var(--mx), var(--my), 0) scale(1.18); } }
html[data-bg="noche"] .deep-bg::before, html[data-bg="noche"] .deep-bg::after { content: ""; display: block; position: absolute; inset: 0; top: 0; left: 0; width: auto; height: auto; transform: none;
  background: radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 78% 9%, #fff, transparent 60%), radial-gradient(1.8px 1.8px at 44% 31%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 44%, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 23% 58%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 63% 71%, #fff, transparent 60%), radial-gradient(1.7px 1.7px at 8% 86%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 92% 90%, #fff, transparent 60%);
  animation: twinkle 3.6s ease-in-out infinite alternate; }
html[data-bg="noche"] .deep-bg::after { background-position: 37vw 23vh; background-size: 100% 100%; animation-duration: 5.2s; animation-delay: -2s; transform: scale(1.4) rotate(18deg); }
html[data-bg="noche"]:not(.waso-dark) .deep-bg::before, html[data-bg="noche"]:not(.waso-dark) .deep-bg::after { display: none; }
@keyframes twinkle { from { opacity: .12; } to { opacity: .8; } }