:root{
  --space-pan-speed: 120s;
  --stars-drift-x: 48s;
  --stars-drift-y: 72s;
}

/* Dark fallback so you never see white */
html{ background:#030816; }
body{ position: relative; min-height:100vh; }

/* All page content sits above the backdrop */
body > *{ position: relative; z-index: 1; }

/* Deep space image */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  /* DEFAULT = space.png. Pages can override --space-image. */
  background-image: var(--space-image, url("/assets/ui/space.png"));
  background-size: cover;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.02) brightness(.95);
  animation: spacePan var(--space-pan-speed) linear infinite alternate;
}

/* Star overlay */
body::after{
  content:"";
  position:fixed; inset:-10vh -10vw;
  z-index:0;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(220,235,255,.7) 60%, transparent 61%) repeat,
    radial-gradient(1px 1px at 60% 50%, rgba(180,210,255,.8) 60%, transparent 61%) repeat,
    radial-gradient(1px 1px at 85% 75%, rgba(200,220,255,.75) 60%, transparent 61%) repeat;
  background-size: 520px 520px, 420px 420px, 680px 680px;
  opacity:.7;
  animation:
    starsDriftX var(--stars-drift-x) linear infinite,
    starsDriftY var(--stars-drift-y) ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes spacePan{ from{background-position:0% 50%} to{background-position:100% 50%} }
@keyframes starsDriftX{ from{transform:translateX(-1.5%)} to{transform:translateX(1.5%)} }
@keyframes starsDriftY{ from{transform:translateY(-1%)} to{transform:translateY(1%)} }