/**
 * Secure Grid — Background & Overlay Stylesheet (optional)
 * Adds the built-in background colour, overlay tint, and placeholder
 * fade-out support. Load after secure-grid.css.
 *
 * If you are providing your own background (image, gradient, or
 * transparent) via CSS on .sgd-section, you do NOT need this file.
 * The grid visualisation works perfectly without it.
 */

/* ── Fallback background colour ──────────────────────────────────────────── */

.sgd-section {
  background-color: var(--sgd-bg);
}

/* When a placeholder image is present, suppress the fallback colour
   so the placeholder shows instantly without a colour flash */
.sgd-section:has(.sgd-placeholder) {
  background-color: transparent;
}

/* ── Overlay tint — sits above canvas, below content ─────────────────────── */

.sgd-section::before {
  content:         '';
  position:        absolute;
  inset:           0;
  background:      var(--sgd-overlay);
  z-index:         2;
  pointer-events:  none;
}

/* ── Static placeholder image (shown instantly while WebGL compiles) ────── */

.sgd-placeholder {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  z-index:        3;   /* above canvas (1) and overlay (2) */
  opacity:        1;
  pointer-events: none;
  transition:     opacity 0.45s ease-out;
}

/* Fade out once the first WebGL frame has drawn */
.sgd-section.sgd-ready .sgd-placeholder {
  opacity:        0;
  pointer-events: none;
}