/* ═══════════════════════════════════════════════════════
   3d.css — Three.js real-time scene overlay
   Applied on top of styles.css. Makes every section
   transparent so the canvas renders through the page.
   ═══════════════════════════════════════════════════════ */

/* ─── Lenis smooth scroll ─── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ─── Three.js canvas (fixed, full-screen, behind everything) ─── */
#ci-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  display: block;
}

/* ─── Dark vignette so text stays readable ─── */
#scene-vignette {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 130% 85% at 50% 50%,
      transparent 25%, rgba(5, 10, 18, 0.60) 100%),
    linear-gradient(to bottom,
      rgba(5, 10, 18, 0.30) 0%,
      transparent 18%,
      transparent 78%,
      rgba(5, 10, 18, 0.45) 100%);
  z-index: -1;
  pointer-events: none;
}

/* ─── Body: dark bg shows behind transparent canvas regions ─── */
body {
  background: var(--bg-primary, #0a0e17) !important;
}

/* ─── Strip opaque backgrounds so the scene shows through ─── */
.hero {
  background: transparent !important;
}

/* Keep the hero headline readable over the glowing 3D model behind it */
.hero__content h1 {
  text-shadow:
    0 2px 28px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(5, 8, 16, 0.85),
    0 0 4px rgba(5, 8, 16, 0.9);
}

.section,
.bounty-section,
.oss {
  background: transparent !important;
}

/* Disable circuit-canvas animation (replaced by 3D scene) */
#circuit-canvas {
  display: none !important;
}

/* ─── Content blocks — dark glass for readability ─── */
.value-block {
  background: rgba(10, 14, 23, 0.58) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
}

.product__info,
.product__interactive {
  background: rgba(10, 14, 23, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 1.5rem;
}

.repo-card {
  background: rgba(10, 14, 23, 0.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hacker-card {
  background: rgba(10, 14, 23, 0.62) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Interactive demo widgets — more opaque so UX stays clear */
.chat-window,
.browser-frame,
.pipeline-demo,
.vote-demo,
.detection-demo {
  background: rgba(8, 12, 22, 0.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Contact section */
#contact > .container > .contact__grid > div {
  background: rgba(10, 14, 23, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 1.5rem;
}

/* Bounty area */
.bounty-counters,
.bounty-cta {
  background: transparent !important;
}

/* Nav stays opaque so it's always readable */
.nav {
  background: rgba(8, 12, 20, 0.80) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Footer slight glass */
.footer {
  background: rgba(5, 8, 16, 0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── Loading overlay ─── */
#ci-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05080f;
  transition: opacity 0.8s ease;
}
#ci-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
#ci-loading-inner .mono {
  color: var(--accent-cyan, #00d4ff);
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  opacity: 0.85;
}
#ci-loading-track {
  width: 200px;
  height: 2px;
  background: rgba(0, 212, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
#ci-loading-bar {
  width: 0%;
  height: 100%;
  background: var(--accent-cyan, #00d4ff);
  box-shadow: 0 0 12px var(--accent-cyan, #00d4ff);
  transition: width 0.3s ease;
}