/**
 * BH.dotGrid CSS — positions a dot-grid canvas behind content.
 * Import via: <link rel="stylesheet" href="/components/dot-grid.css" />
 *
 * Usage:
 *   <div class="bh-dot-grid">
 *     <canvas class="bh-dot-grid__canvas" aria-hidden="true"></canvas>
 *     <div class="bh-dot-grid__content">Your content here</div>
 *   </div>
 *
 *   <script>
 *     var destroy = initDotGrid(document.querySelector('.bh-dot-grid__canvas'));
 *   </script>
 *
 * The canvas is positioned behind content with pointer-events: none,
 * so clicks pass through to the content layer.
 */

/* ── Dot grid wrapper ─────────────────────────────────────────────────────── */
.bh-dot-grid {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md, 14px);
}

/* ── Canvas layer: fills parent, sits behind content ────────────────────── */
.bh-dot-grid__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* let clicks pass through to content */
  z-index: 0;
  display: block;
}

/* ── Content layer: sits above canvas ──────────────────────────────────── */
.bh-dot-grid__content {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* ── Landing card example: subtle dark card with dot grid background ─────── */
.bh-dot-grid--card {
  background: var(--bg-subtle, #161614);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.075));
  padding: 32px;
}

/* ── Full-viewport hero dot grid ────────────────────────────────────────── */
.bh-dot-grid--hero {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

/* ── Subtle radial gradient vignette over the dot grid ─────────────────── */
.bh-dot-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(19, 19, 18, 0.55) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Reduced motion: hide canvas decorative layer, keep content visible ── */
@media (prefers-reduced-motion: reduce) {
  .bh-dot-grid__canvas {
    opacity: 0.5;
  }
}