.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-grid {
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(201, 162, 39, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 39, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(0, 245, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.02) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
  animation: grid-drift 40s linear infinite;
  transform: perspective(500px) rotateX(60deg) scale(2);
  transform-origin: center top;
  opacity: 0.6;
}

.ambient-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, var(--bg-void) 75%);
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: float-orb 12s ease-in-out infinite;
}

.ambient-orb-cyan {
  width: 400px;
  height: 400px;
  background: rgba(0, 245, 255, 0.12);
  top: 10%;
  right: 5%;
  animation-delay: 0s;
}

.ambient-orb-magenta {
  width: 350px;
  height: 350px;
  background: rgba(255, 45, 166, 0.08);
  bottom: 20%;
  left: 10%;
  animation-delay: -4s;
}

.ambient-orb-amber {
  width: 300px;
  height: 300px;
  background: rgba(255, 176, 32, 0.06);
  top: 50%;
  left: 40%;
  animation-delay: -8s;
}

.ambient-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(0, 245, 255, 0.15), transparent);
  animation: scanline 8s linear infinite;
  opacity: 0.5;
}

.ambient-gear {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 3px dashed rgba(201, 162, 39, 0.15);
  border-radius: 50%;
  opacity: 0.25;
}

.ambient-gear::before {
  content: '';
  position: absolute;
  inset: 20%;
  border: 2px solid rgba(201, 162, 39, 0.2);
  border-radius: 50%;
}

.ambient-gear-1 {
  top: 15%;
  left: 5%;
  animation: gear-spin 60s linear infinite;
}

.ambient-gear-2 {
  bottom: 10%;
  right: 8%;
  width: 80px;
  height: 80px;
  animation: gear-spin 45s linear infinite reverse;
}

/* ── Sacred geometry watermark ── */
.ambient-sacred-geo {
  position: absolute;
  /* Centre in the main content area (offset for the 260px sidebar) */
  left: calc(260px + (100vw - 260px) / 2 - min(38vw, 680px) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: min(38vw, 680px);
  height: min(38vw, 680px);
  opacity: 0.07;
  animation: sacred-geo-rotate 120s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(201, 162, 39, 0.3));
}

@keyframes sacred-geo-rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
