/* =====================================================================
   space-bg.css — shared deep-space background treatment.
   Ported verbatim from the portfolio site so the client portal (login +
   onboarding) sits on the exact same atmosphere, colors, and globe.
   Pairs with space-bg.js (nebula/star field canvas + Three.js Earth).
   ===================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

/* ---- Brand color tokens (identical to the portfolio) ---- */
:root{
  --p:#6c63ff;--s:#00d4ff;--a:#ff6584;
  --d:#030610;--d2:#080d1c;--d3:#0c0a1e;
  --t:#e8e8f5;--tm:#7878a0;
  --g:rgba(255,255,255,0.04);--gb:rgba(255,255,255,0.07)
}

html{scroll-behavior:smooth}
body{background:var(--d);color:var(--t);overflow-x:hidden}

/* ---- Film grain overlay (z 9990) ---- */
#grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* ---- Nebula + star field canvas (z 0) ---- */
#stars-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---- Planet system canvas (z 0, above the stars, below the Earth) ---- */
/* The radial mask fades planets out of the centre reading column so text
   and UI stay readable; planets live in the periphery. */
#planets-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.92;mask-image:radial-gradient(ellipse 68% 62% at 50% 46%,transparent 0%,rgba(0,0,0,.4) 42%,#000 80%);-webkit-mask-image:radial-gradient(ellipse 68% 62% at 50% 46%,transparent 0%,rgba(0,0,0,.4) 42%,#000 80%)}

/* ---- WebGL Earth globe (z 1) ---- */
#earth-wrap{position:fixed;z-index:1;pointer-events:none;top:0;left:0;width:380px;height:380px;will-change:transform;opacity:.55;filter:drop-shadow(0 0 100px rgba(50,130,255,.18)) drop-shadow(0 0 220px rgba(0,70,200,.10));mask-image:radial-gradient(circle at 50% 50%,black 38%,rgba(0,0,0,.65) 56%,transparent 80%);-webkit-mask-image:radial-gradient(circle at 50% 50%,black 38%,rgba(0,0,0,.65) 56%,transparent 80%)}
#earth-canvas{display:block;width:380px;height:380px}