/* ============================================================
   GALAXY.CSS — Deep space backdrop (calm version)
   A single photographic nebula layer anchored left, a gentle
   static colour wash, and a readability scrim so paragraph
   text always sits on a calm, settled surface. No drifting
   clouds, no aurora sweep, no cursor-follow glow — kept quiet
   on purpose so the background supports the copy instead of
   competing with it.
   ============================================================ */

html, body {
  background: var(--void);
}

/* Photographic nebula backdrop — fixed, not animated, anchored left and
   feathered into the page void colour so it never crowds the content. */
.nebula-photo {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -6;
  pointer-events: none;
  background-image: url('../images/hero-nebula-bg.webp');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  background-color: var(--void);
}

@supports not (background-image: url('x.webp')) {
  .nebula-photo { background-image: url('../images/hero-nebula-bg.jpg'); }
}

@media (max-width: 900px) {
  .nebula-photo {
    background-image: url('../images/hero-nebula-bg-mobile.webp');
    background-position: top left;
  }
}

#galaxy-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -5;
  display: block;
}

/* One very soft, static colour wash for warmth — no animation, no movement */
.nebula-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 35% at 85% 50%, rgba(0,200,150,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 10% 20%, rgba(76,217,100,0.03) 0%, transparent 60%);
}

/* Readability scrim — sits over the whole page beneath content so every
   paragraph reads on a calm, evenly-dark surface regardless of what photo
   or 3D element is rendering behind it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,9,7,0.35) 0%, rgba(3,9,7,0.55) 100%),
    radial-gradient(ellipse 80% 60% at 50% 0%, transparent 30%, rgba(2,8,5,0.55) 100%);
}

/* Very fine grain to prevent flat colour banding — static, low opacity */
.noise-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

@media (max-width: 768px) {
  body::before {
    background:
      linear-gradient(180deg, rgba(3,9,7,0.45) 0%, rgba(3,9,7,0.65) 100%),
      radial-gradient(ellipse 80% 60% at 50% 0%, transparent 20%, rgba(2,8,5,0.6) 100%);
  }
}