/* ---- Galaxy background (scoped to #main) ---- */
:root{
  --bg-0:#020817;   /* near-black blue */
  --bg-1:#071a2f;   /* deep navy */
  --bg-2:#0a1f40;   /* blue tint */
  --glow-1:rgba(80,140,255,.18);
  --glow-2:rgba(56,189,248,.14);
  --glow-3:rgba(147,51,234,.12);
}

/* 1) Make the containers transparent */
#wrapper,
#main,
.page-wrapper,
.site-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2) Ensure #main forms its own stacking context */
#main {
  position: relative !important;
  isolation: isolate; /* creates a new stacking context */
}

/* 3) Put the galaxy layer inside #main at z-index:0 (not -1) */
#main .galaxy-bg {
  position: absolute;
  inset: 0;
  z-index: 0;             /* was -1; don't use negative here */
  pointer-events: none;
}

/* 4) Make all normal content sit above the galaxy layer */
#main > :not(.galaxy-bg) {
  position: relative;
  z-index: 1;
}

/* Optional: Flatsome sometimes colors .container or .row */
#main .container,
#main .row,
#main .col,
#main .entry-content {
  background: transparent !important;
  background-color: transparent !important;
}
#main.galaxy-host{ position:relative; }

/* The background wrapper that will be moved inside #main */
#main .galaxy-bg{
  position:absolute;
  inset:0;
  z-index:-1;              /* keep behind your content */
  pointer-events:none;     /* clicks pass through */
  background:
    radial-gradient(800px 600px at 18% 8%, var(--glow-1), transparent 60%),
    radial-gradient(900px 700px at 82% 28%, var(--glow-2), transparent 65%),
    radial-gradient(1100px 800px at 60% 115%, var(--glow-3), transparent 70%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 40%, var(--bg-0) 100%);
}

/* Soft vignette for depth */
#main .galaxy-bg .vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 900px at 50% 10%, transparent 40%, rgba(0,0,0,.25) 100%),
    radial-gradient(1600px 1200px at 50% 120%, transparent 60%, rgba(0,0,0,.35) 100%);
  mix-blend-mode:multiply;
}

/* Tiny twinkling stars (pure CSS) */
#main .galaxy-bg .stars{
  position:absolute; inset:0;
  opacity:.8;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.12) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.15) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,.10) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 75%, rgba(255,255,255,.14) 50%, transparent 51%);
  animation: galaxy-drift 60s linear infinite;
}

@keyframes galaxy-drift{
  from{ transform: translateY(0) }
  to{ transform: translateY(-200px) }
}

/* Canvas fills #main */
#main .galaxy-bg #net{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}