/* Nexovias — deep-space background layer (loads after site.css/home.css).
   The page content is unchanged and fully readable; this only replaces the flat
   body background with a living star-tunnel. CSS deep-space gradient is the base
   (and the no-WebGL / reduced-motion fallback); space.js draws the moving stars. */

html {
  /* deep-space base — visible immediately, and the fallback when WebGL is absent */
  background:
    radial-gradient(120% 95% at 50% 28%, #0a1714 0%, #060d0b 58%, #040908 100%),
    #040908;
  background-attachment: fixed;
}

body { background: transparent; }

/* fixed WebGL canvas behind all content */
#space {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* panels become lightly translucent so the moving space shows through the layout,
   while text stays on a readable surface (contrast preserved) */
.triad .t,
.card,
.pframe,
.site-footer {
  background: color-mix(in srgb, var(--nx-color-bg-deep) 74%, transparent);
  backdrop-filter: blur(7px);
}
.site-header {
  background: color-mix(in srgb, var(--nx-color-bg) 72%, transparent);
}

/* section dividers are subtler over space */
.section + .section { border-top-color: color-mix(in srgb, var(--nx-color-border) 70%, transparent); }

/* ---- readability over the moving corridor (only when the engine is on) ----
   the camera flies through bright particle fields, so every text block gets a
   dark translucent backing and headings get a dark halo. Layout is unchanged. */
html.space-on .eco-prose,
html.space-on .eco-node,
html.space-on .beat-sec .beat {
  background: color-mix(in srgb, var(--nx-color-bg-deep) 80%, transparent);
  backdrop-filter: blur(7px);
  border-radius: var(--nx-radius-md);
  padding: clamp(16px, 2vw, 24px);
}
/* keep the beat's dark backing box hugging the text, but centered in the section
   (inline-block would otherwise sit left-aligned in the wrap) */
html.space-on .beat-sec { text-align: center; }
html.space-on .beat-sec .beat { display: inline-block; text-align: center; }

/* headings / inline copy sitting directly on the background: dark halo so they
   stay legible over glowing particles without a boxy panel */
html.space-on h1,
html.space-on h2,
html.space-on h3,
html.space-on .hero .lead,
html.space-on .kicker,
html.space-on .sys-line,
html.space-on .eco-tier,
html.space-on .eco-name,
html.space-on .eco-desc {
  text-shadow: 0 2px 22px rgba(2, 7, 12, .92), 0 0 4px rgba(2, 7, 12, .85);
}

/* hero sits over the BRIGHT nebula core, where the halo alone is not enough:
   give the lead, the system line and the ghost button a dark translucent
   backing so they stay legible. Boxes hug their content (inline). */
html.space-on .hero .kicker,
html.space-on .hero .lead,
html.space-on .hero .sys-line {
  background: color-mix(in srgb, var(--nx-color-bg-deep) 80%, transparent);
  backdrop-filter: blur(6px);
  border-radius: var(--nx-radius-md);
  padding: 10px 16px;
}
html.space-on .hero .kicker { display: inline-block; padding: 6px 12px; }
html.space-on .hero .lead { display: inline-block; }
html.space-on .hero .sys-line { display: inline-flex; }
html.space-on .hero .btn-ghost {
  background: color-mix(in srgb, var(--nx-color-bg-deep) 74%, transparent);
  backdrop-filter: blur(6px);
}

/* Nexora product card — its live app is light-only; there is no real dark
   screenshot yet. Until the user supplies a real dark PNG, re-tone the REAL
   light screenshot toward dark (invert + hue-rotate keeps brand colours) so
   the card reads dark like the rest of the site. This is a reversible display
   filter on the genuine screenshot — not a fabricated UI. */
.pframe figure img[src*="nexora-board"] {
  filter: invert(0.9) hue-rotate(180deg) brightness(0.97) contrast(0.92) saturate(1.05);
}

/* Post Base dashboard is wide (≈2:1). Zoom in a touch to fill the card,
   anchored LEFT so the sidebar panel stays in frame (crops the right edge). */
.pframe figure:has(img[src*="postbase-dark"]) { background: var(--nx-color-bg-deep); }
.pframe figure img[src*="postbase-dark"] { object-fit: cover; object-position: left center; }

/* honour reduced-motion: no star streaming (space.js renders a single static frame);
   the CSS deep-space base above remains. */
@media (prefers-reduced-motion: reduce) {
  #space { opacity: .9; }
}