/* ============================================================
   WebProj — background.css
   Fundo vivo azul-dominante: canvas "matrix elegante" + núcleo
   de luz + orbs (blue/cyan/azure) + noise + leak + vinheta.
   Tudo decorativo (aria-hidden), atrás de todo o conteúdo.
   ============================================================ */

.bg-root {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

/* Aurora (canvas WebGL) — desenhada em background.js */
#bg-matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: blur(1px) saturate(1.08);
}

/* Grid de pontos sutil (sobre a faixa de luz, some nas bordas) */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(150, 190, 255, .15) 1px, transparent 1.3px);
  background-size: 13px 13px;
  opacity: .75;
  -webkit-mask-image: radial-gradient(ellipse 94% 82% at 50% 36%, #000 45%, transparent 92%);
          mask-image: radial-gradient(ellipse 94% 82% at 50% 36%, #000 45%, transparent 92%);
}

/* Núcleo de luz azul (alvo de parallax → profundidade) */
.bg-core {
  position: absolute;
  top: 4%;
  left: 50%;
  width: min(1200px, 130vw);
  height: 900px;
  transform: translateX(-50%) translate(var(--px, 0px), var(--py, 0px));
  background: radial-gradient(ellipse 44% 52% at 50% 32%,
    rgba(47, 128, 255, .18),
    rgba(0, 110, 255, .06) 45%,
    transparent 70%);
  filter: blur(24px);
  will-change: transform;
}

/* ---------- Orbs de luz (radial gradients, drift lento) ---------- */

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}
.bg-orb-blue {
  top: -22%;
  left: -14%;
  width: 58vw;
  height: 58vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(closest-side, rgba(47, 128, 255, .12), transparent 70%);
  animation: orb-drift-a 34s ease-in-out infinite;
}
.bg-orb-cyan {
  top: 26%;
  right: -20%;
  width: 52vw;
  height: 52vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(closest-side, rgba(0, 212, 255, .08), transparent 70%);
  animation: orb-drift-b 42s ease-in-out infinite;
}
.bg-orb-azure {
  bottom: -28%;
  left: 18%;
  width: 56vw;
  height: 56vw;
  max-width: 860px;
  max-height: 860px;
  background: radial-gradient(closest-side, rgba(41, 171, 226, .09), transparent 70%);
  animation: orb-drift-c 48s ease-in-out infinite;
}

@keyframes orb-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 4vh, 0) scale(1.08); }
}
@keyframes orb-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vw, -5vh, 0) scale(1.1); }
}
@keyframes orb-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vw, -6vh, 0) scale(1.06); }
}

/* ---------- Light leak superior ---------- */

.bg-leak {
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  width: min(1100px, 90vw);
  height: 420px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%,
    rgba(190, 220, 255, .06), rgba(47, 128, 255, .04) 45%, transparent 75%);
}

/* ---------- Noise (feTurbulence em data-URI) ---------- */

.bg-noise {
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Vinheta (foco no centro) ---------- */

.bg-vignette {
  position: absolute;
  inset: 0;
  /* scrim constante no miolo (.14) para manter o texto legível sobre a faixa de luz */
  background:
    radial-gradient(ellipse 120% 90% at 50% 20%, transparent 45%, rgba(3, 3, 3, .62) 100%),
    linear-gradient(180deg, rgba(3, 3, 3, .45), rgba(3, 3, 3, .14) 20%, rgba(3, 3, 3, .14) 80%, rgba(3, 3, 3, .58));
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .bg-orb-blue, .bg-orb-cyan, .bg-orb-azure { animation: none; }
}