/* ===========================================================
   GALAXY STARFIELD — global background
   ===========================================================
   Sits behind every page. Canvas is vector-rendered so it
   stays crisp at any resolution (HiDPI / 4K). All content
   sections keep their own backgrounds — when those are solid
   they act as the "subtle darkening behind text blocks"
   readability scrim the spec asks for.
   =========================================================== */

/* Solid fallback in case the canvas never paints (no JS, etc.) */
html {
  background-color: #030712;
}

/* Body is fully transparent so the canvas shows through. */
body {
  background: transparent !important;
}

/* The canvas itself. */
.galaxy-starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* Sections that previously rendered as solid black/dark now get
   a lighter translucent dark scrim so the starfield bleeds
   through clearly on desktop AND mobile. Text stays readable
   thanks to the high contrast of white-on-near-black scrim. */
section.section-void {
  background-color: rgba(3, 7, 18, 0.48) !important;
}
section.section-deep {
  background-color: rgba(13, 17, 23, 0.42) !important;
}

/* Footer (every page) — semi-transparent scrim so the starfield
   continues all the way to the bottom of the viewport without
   readability loss for footer text. */
footer {
  background-color: rgba(3, 7, 18, 0.70) !important;
}

/* Reduced motion: the JS already paints a single static frame
   rather than animating. Nothing more needed in CSS. */