/* Aurora ambiental: acompaña ambos temas y nunca intercepta clics. */
#visionAurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .14;
  filter: saturate(1.18) brightness(1.12);
  transform: translateZ(0);
  transition: opacity 1.2s ease;
}

/* En Inicio, el modo claro muestra una aurora pastel claramente perceptible. */
body:not(.dark):has(#home.view.active) #visionAurora {
  opacity: .52;
  filter: saturate(1.32) brightness(1.1);
}

body:not(.dark):has(#home.view.active)::before {
  content: '';
  position: fixed;
  z-index: 0;
  inset: -18%;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      transparent 18%,
      rgba(45, 212, 191, .16) 31%,
      rgba(125, 211, 252, .24) 38%,
      transparent 51%),
    linear-gradient(68deg,
      transparent 42%,
      rgba(244, 114, 182, .18) 54%,
      rgba(196, 181, 253, .22) 63%,
      transparent 75%),
    linear-gradient(124deg,
      transparent 57%,
      rgba(129, 140, 248, .16) 69%,
      transparent 82%);
  filter: blur(24px) saturate(1.22);
  opacity: .86;
  mix-blend-mode: multiply;
  animation: lightAuroraDrift 22s ease-in-out infinite alternate;
}

@keyframes lightAuroraDrift {
  from { transform: translate3d(-2%, -1%, 0) skewX(-1deg); }
  to { transform: translate3d(2%, 1%, 0) skewX(1deg); }
}

body.dark #visionAurora {
  opacity: .72;
  filter: none;
}

#visionAurora.aurora-fallback {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(124, 255, 103, .34), transparent 48%),
    radial-gradient(ellipse at 54% -8%, rgba(180, 151, 207, .4), transparent 55%),
    radial-gradient(ellipse at 92% 2%, rgba(82, 39, 255, .48), transparent 50%);
  filter: blur(28px) saturate(1.08);
}

body.jxp-abierto #visionAurora {
  opacity: .28;
}

@media (max-width: 760px) {
  body:not(.dark) #visionAurora { opacity: .1; }
  body:not(.dark):has(#home.view.active) #visionAurora { opacity: .3; }
  body.dark #visionAurora { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  #visionAurora { transition: opacity .2s ease; }
  body:not(.dark):has(#home.view.active)::before { animation: none; }
}