/* ============================================================
   Shared ambient background — included on landing, docs, and
   dashboard so all three render the exact same atmosphere
   behind their content. True-black base with two soft cyan
   glows and a faint grid, fixed to the viewport so it stays
   put while content scrolls.

   Depends on --accent being defined by whichever token file
   loads before this one (landing.css / tokens.css / docs.css).
   ============================================================ */

.pg-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #000000;
  overflow: hidden;
}

/* Two radial glows — top-left and bottom-right — giving the black
   a subtle depth without competing with foreground content. Stronger
   than the old 0.04–0.06 opacities (which read as flat on most screens)
   but still restrained. */
.pg-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(0, 217, 255, 0.10) 0%, transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(0, 217, 255, 0.06) 0%, transparent 45%);
}

/* Faint grid — gives the black surface a sense of structure and
   "developer tool" texture that matches the terminal motif on the
   landing page hero. Masked to fade out toward the edges. */
.pg-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 35%, transparent 80%);
}

/* A single slow-drifting accent orb for ambient life. Disabled under
   reduced-motion. Kept very low opacity so it never distracts. */
.pg-bg-orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 217, 255, 0.07) 0%, transparent 70%);
  animation: pg-orb-drift 22s ease-in-out infinite;
}

@keyframes pg-orb-drift {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-42%) translateY(36px); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-bg-orb { animation: none; }
}