/*
 * product-bg.css
 * Background canvas + section styling for all product pages.
 * Blueprint Grid + Network Nodes + Circuit Trace + Radial Glow + Data Flow
 */

/* ── Canvas — fixed full-viewport behind everything ────────────── */
#prod-bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: prodBgFadeIn 1.2s ease 0.3s forwards;
}
@keyframes prodBgFadeIn {
  to { opacity: 1; }
}

/* ── Stacking ───────────────────────────────────────────────────── */

/* Header always on top — dropdown never clipped */
#site-header {
  position: fixed !important;
  z-index: 1000 !important;
}

/* All main sections above canvas */
main > * {
  position: relative;
  z-index: 1;
}
footer {
  position: relative;
  z-index: 1;
}

/* ── Section Backgrounds ────────────────────────────────────────────
   Alternating white / light-blue with enough transparency
   so the blueprint grid and animations show through clearly.
─────────────────────────────────────────────────────────────────── */

/* Breadcrumb — almost opaque light strip */
.breadcrumb {
  background: rgba(240, 248, 252, 0.82) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Section 1 — Product Detail — WHITE */
.product-detail {
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Section 2 — Features — LIGHT BLUE */
.features-section {
  background: rgba(224, 244, 252, 0.62) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Section 3 — Applications — WHITE */
.applications-section {
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Section 4 — Fiber Products — LIGHT BLUE */
.fo-products-section {
  background: rgba(224, 244, 252, 0.62) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Page Hero — always fully opaque (has its own bg image) */
.page-hero {
  background: var(--ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Page CTA — dark, mostly opaque */
.page-cta {
  background: rgba(10, 18, 22, 0.94) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Section dividers — subtle top border between sections ──────── */
.product-detail,
.features-section,
.applications-section,
.fo-products-section {
  border-top: 1px solid rgba(33, 198, 223, 0.10);
}

/* ── Ensure card text stays fully readable over blurred bg ─────── */
.feature-card,
.app-card,
.fo-prod-card {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}