/*
 * Dream Chaser — Global 3D Cosmic Background (v26)
 * ------------------------------------------------
 * Loaded on EVERY page (homepage + all inner pages) via functions.php.
 * Provides a fixed, full-viewport WebGL star scene (cosmic.js renders into
 * #dc-bg) plus a nebula wash and film grain so inner pages share the exact
 * cosmic atmosphere the homepage has. Purely decorative & non-interactive
 * (pointer-events:none) — it never blocks content or links, and degrades
 * gracefully to the nebula gradient if WebGL/JS is unavailable.
 *
 * Z-INDEX MAP (matches the theme's existing layering):
 *   .dc-cosmic-bg / #dc-bg ...... 0   (this layer — behind everything)
 *   front-page .stars .......... 0   (homepage CSS nebula, if present)
 *   .grain / ::after ........... 1   (film grain)
 *   .wrap (page content) ....... 2   (untouched theme content)
 */

.dc-cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Nebula wash — gives inner pages the homepage's depth even before WebGL paints */
  background:
    radial-gradient(ellipse 60% 50% at 15% 12%, rgba(107, 40, 69, 0.42) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 85% 88%, rgba(212, 147, 141, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(61, 35, 71, 0.36) 0%, transparent 70%);
}

#dc-bg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── v29 GLOBAL READABILITY VEIL ──────────────────────────────────────
 * A single tunable ink wash laid over the WebGL canvas + nebula on EVERY
 * page (it sits inside .dc-cosmic-bg at z-index 1 — above #dc-bg, still
 * far below page content at z-index 2). This is what makes text legible
 * over the 3D scene site-wide (hero, sections, cards, nav, footer, inner
 * pages). Tune the alpha to taste: ~0.30 = very starry but lower contrast,
 * ~0.60 = maximum readability. 0.46 is the balanced default. */
.dc-cosmic-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(7, 5, 11, 0.46);
}

/* Film grain — only added on inner pages; the homepage already ships its own
   .grain element, so we don't double it there (body.is-landing = front page). */
body:not(.is-landing) .dc-cosmic-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* Inner-page article/blog wrappers are transparent so the cosmic scene shows
   through (theme already sets body bg to --ink as a safe fallback). */
body:not(.is-landing) .wrap { background: transparent; }

/* Readability scrim (accessibility): long-form text over a bright starfield
   loses contrast. Lay a soft ink wash *only behind the reading column* —
   the cosmic scene still bleeds through the page margins, so depth is kept
   while body text stays comfortably legible (WCAG-friendly). */
body:not(.is-landing) .article-wrap,
body:not(.is-landing) .archive-wrap,
body:not(.is-landing) .blog-landing { position: relative; }
body:not(.is-landing) .article-wrap::before,
body:not(.is-landing) .archive-wrap::before,
body:not(.is-landing) .blog-landing::before {
  content: "";
  position: absolute;
  inset: -48px -40px;
  z-index: -1;
  pointer-events: none;
  /* v29: alphas lowered (was .74/.5) so this local scrim no longer stacks
     too dark on top of the new global veil — long-form text stays crisp
     without the column going muddy. */
  background: radial-gradient(
    ellipse at center,
    rgba(19, 16, 26, 0.55) 0%,
    rgba(19, 16, 26, 0.34) 58%,
    transparent 100%
  );
}

/* Respect reduced-motion: keep the static nebula, skip the animated canvas. */
@media (prefers-reduced-motion: reduce) {
  #dc-bg { display: none; }
}