/* bg-cyberspace.css — FUNDO ÚNICO do LAxy: o do cyberspace, igual em todas as páginas.
   Edite AQUI e index, cyberspace, livecrypto, cyberquant e x-portal mudam juntos (mesma ideia do bg-galaxy.js).
   Camadas, de trás para frente: cor da página · .aurora-bg (gradientes em deriva) · canvas #galaxy (desenhado por bg-galaxy.js) · .hud-grid.
   Matiz: aurora e galáxia giram o espectro do LAxy juntas (30 s por volta, lentas de propósito); a galáxia nasce verde e o filtro a leva ao violeta.
   hue-rotate roda no compositor; no celular / sem mouse / "reduzir movimento" as cores ficam fixas.
   Uso em cada página: <link rel="stylesheet" href="bg-cyberspace.css"> no <head> e, no começo do <body>:
     <div class="aurora-bg" aria-hidden="true"></div>
     <canvas id="galaxy" aria-hidden="true" data-fx="spin"></canvas>
     <div class="hud-grid"></div>
   e <script src="bg-galaxy.js"></script> no fim do <body>. Só o fundo: o espectro --lx-hue do layout (cores de botões, bordas, textos) não está aqui. */

body { background-color: #000; }

/* Aurora em camada própria animada por transform (GPU/compositor) em vez de background-position
   (que força repaint da tela inteira a cada frame, pra sempre). Cores = pontos do espectro do LAxy (165° · 265° · 335°). */
.aurora-bg {
  position: fixed;
  top: -6%; left: -6%; width: 112%; height: 112vh; height: 112lvh;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(60% 50% at 12% -10%, hsl(165 100% 60% / 0.14), transparent 60%),
    radial-gradient(55% 45% at 105% 15%, hsl(265 100% 66% / 0.14), transparent 60%),
    radial-gradient(70% 55% at 50% 120%, hsl(335 100% 64% / 0.10), transparent 60%);
  animation: auroraDrift 22s ease-in-out infinite alternate, lxBgHueA 30s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0%, 0%, 0); }
  100% { transform: translate3d(1.5%, 2%, 0); }
}

/* Galáxia (canvas): o desenho vem do bg-galaxy.js; aqui só a posição e o matiz (gira junto com a aurora). */
#galaxy {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: .85;
  filter: hue-rotate(120deg); animation: lxBgHueG 30s linear infinite;
}

/* Fina grade de instrumentação atrás do conteúdo — textura de painel técnico, quase imperceptível,
   some perto das bordas para não competir com o conteúdo. */
.hud-grid {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 0%, #000 20%, transparent 80%);
  mask-image: radial-gradient(75% 60% at 50% 0%, #000 20%, transparent 80%);
}

@keyframes lxBgHueA { from { filter: hue-rotate(0deg); }   to { filter: hue-rotate(360deg); } }
@keyframes lxBgHueG { from { filter: hue-rotate(120deg); } to { filter: hue-rotate(480deg); } }
@media (prefers-reduced-motion: reduce) {
  .aurora-bg { animation: none; }
  #galaxy { animation: none; }
}