/* Deep-space layer for the public site: twinkling stars, nebulae, shooting stars, glass surfaces and glow.
   Dark theme only; light mode keeps its own look. Motion stops when the visitor asks for reduced motion. */
html:not([data-theme=light]) body{background:radial-gradient(ellipse 70% 55% at 10% 0%,#3b2a8a70,transparent 60%),radial-gradient(ellipse 55% 45% at 95% 25%,#0e6a8255,transparent 62%),radial-gradient(ellipse 60% 40% at 30% 60%,#5a1d7a33,transparent 65%),radial-gradient(ellipse 70% 50% at 60% 100%,#3a1d6466,transparent 65%),#04061a}

/* stars: three layers that drift and twinkle at different speeds */
html:not([data-theme=light])::after,html:not([data-theme=light]) body::after{content:'';position:fixed;inset:-50%;pointer-events:none;z-index:-1}
html:not([data-theme=light])::after{
 background-image:radial-gradient(1.6px 1.6px at 24px 36px,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 140px 90px,#cfd8ff 60%,transparent),radial-gradient(1.8px 1.8px at 230px 170px,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 300px 50px,#b9c6ff 60%,transparent),radial-gradient(1.6px 1.6px at 370px 240px,#fff 60%,transparent),radial-gradient(1.8px 1.8px at 70px 280px,#efe9ff 60%,transparent),radial-gradient(1.6px 1.6px at 190px 330px,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 100px 160px,#9fe3d3 60%,transparent),radial-gradient(1.6px 1.6px at 330px 140px,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 420px 360px,#ffe9b8 60%,transparent);
 background-size:440px 400px;opacity:.95;animation:cx-drift 240s linear infinite,cx-twinkle 6s ease-in-out infinite alternate}
html:not([data-theme=light]) body::after{
 background-image:radial-gradient(2.6px 2.6px at 60px 120px,#fff 60%,transparent),radial-gradient(2.1px 2.1px at 520px 300px,#d8d0ff 60%,transparent),radial-gradient(2.6px 2.6px at 800px 80px,#fff 60%,transparent),radial-gradient(2.1px 2.1px at 300px 520px,#bfe9ff 60%,transparent),radial-gradient(2.9px 2.9px at 700px 600px,#fff 60%,transparent);
 background-size:900px 700px;opacity:1;filter:drop-shadow(0 0 3px #c9c2ff);animation:cx-drift 400s linear infinite reverse,cx-twinkle 9s ease-in-out infinite alternate-reverse}
@keyframes cx-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-440px,400px,0)}}
@keyframes cx-twinkle{0%{opacity:.55}50%{opacity:1}100%{opacity:.7}}

/* shooting stars */
.cx-shoot{position:fixed;top:0;left:0;width:200px;height:2px;pointer-events:none;z-index:-1;border-radius:2px;background:linear-gradient(90deg,transparent,#fff 70%,#c9c2ff);filter:drop-shadow(0 0 6px #b9b0ff);opacity:0}
.cx-shoot--a{top:14%;left:78%;animation:cx-shoot 11s linear infinite 3s}
.cx-shoot--b{top:46%;left:96%;animation:cx-shoot 17s linear infinite 9s}
@keyframes cx-shoot{0%{opacity:0;transform:rotate(-28deg) translateX(0)}2%{opacity:1}8%{opacity:0;transform:rotate(-28deg) translateX(-700px)}100%{opacity:0;transform:rotate(-28deg) translateX(-700px)}}
html[data-theme=light] .cx-shoot{display:none}

/* glass header with a soft violet horizon line */
html:not([data-theme=light]) body[data-page]>.header{background:linear-gradient(180deg,#0a0f26d9,#070b1ecc);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid #a99cff22;box-shadow:0 1px 0 #ffffff08,0 10px 40px #0007}
html:not([data-theme=light]) body[data-page]>.header::after{content:'';position:absolute;left:10%;right:10%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#a99cff99,#5fd3ff88,transparent)}

/* headings glow like starlight */
html:not([data-theme=light]) :is(.hero__title,.page-head h1,.section__title){text-shadow:0 0 30px #8b7cff40,0 0 2px #fff3}
html:not([data-theme=light]) body[data-page=home] .hero__line--alt{background:linear-gradient(90deg,#c9c2ff,#7fd8ff,#e3b8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px #8b7cff66)}

/* glass cards that catch light on hover */
html:not([data-theme=light]) body[data-page] :is(.card,.pathway,.feature,.founder,.cta,.form-card,.step,.platform,.sub,.person,.fact,.counter,.subs__tier,.game,.listing,.job){background:linear-gradient(160deg,#151d40b3,#0a1029d9)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #a6b4ff24!important;box-shadow:inset 0 1px 0 #ffffff10,0 18px 50px #0006;transition:transform .25s,box-shadow .25s,border-color .25s}
html:not([data-theme=light]) body[data-page] :is(.card,.pathway,.person,.sub,.game,.listing,.job):hover{transform:translateY(-4px);border-color:#a99cff66!important;box-shadow:inset 0 1px 0 #ffffff14,0 22px 60px #000a,0 0 34px #6c5ce733}

/* buttons with a nebula glow */
html:not([data-theme=light]) .btn--primary{background:linear-gradient(135deg,#7c6cf0,#4f7cf0)!important;border-color:#a99cff88!important;color:#fff!important;box-shadow:0 0 20px #6c5ce755}
html:not([data-theme=light]) .btn--primary:hover{background:linear-gradient(135deg,#8d7ef5,#5f8af5)!important;box-shadow:0 0 30px #7c6cf099}
html:not([data-theme=light]) .btn--ghost{background:#0e1533b3!important;border-color:#5b6aa066!important;backdrop-filter:blur(6px)}
html:not([data-theme=light]) .btn--ghost:hover{border-color:#a99cff88!important;box-shadow:0 0 18px #6c5ce733}

/* the pixel-art scene floats like a viewport window */
html:not([data-theme=light]) body[data-page=home] .hero__scene{box-shadow:0 0 0 1px #a99cff33,0 30px 80px #000b,0 0 60px #6c5ce740;animation:cx-float 9s ease-in-out infinite}
@keyframes cx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* inputs */
html:not([data-theme=light]) body[data-page] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:#0b1330d9!important;border-color:#3d4a7a!important}
html:not([data-theme=light]) body[data-page] :is(input,select,textarea):focus{border-color:#a99cff!important;box-shadow:0 0 0 3px #7c6cf033!important;outline:none}

/* a planet horizon glowing under the footer */
html:not([data-theme=light]) .footer{position:relative;border-top-color:transparent!important;background:radial-gradient(ellipse 70% 120% at 50% 130%,#3a2f8a66,#120f3a33 45%,transparent 70%)}
html:not([data-theme=light]) .footer::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#a99cff77,#5fd3ff66,transparent)}

@media(prefers-reduced-motion:reduce){html::after,html body::after,.cx-shoot,.section__title::before,body[data-page=home] .hero__scene{animation:none!important}.cx-shoot{display:none}}
@media(max-width:700px){html:not([data-theme=light]) body::after{opacity:.4}.cx-shoot--b{display:none}}

/* extra sparkle: a few bright four-point stars that pulse */
html:not([data-theme=light]) body[data-page]::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
 background-image:radial-gradient(3.9px 3.9px at 12% 22%,#fff 60%,transparent),radial-gradient(3.2px 3.2px at 86% 64%,#e5dcff 60%,transparent),radial-gradient(3.9px 3.9px at 64% 12%,#c8f1ff 60%,transparent),radial-gradient(3.2px 3.2px at 30% 84%,#fff 60%,transparent),radial-gradient(2.6px 2.6px at 48% 46%,#ffe8c2 60%,transparent),
  radial-gradient(1.8px 1.8px at 20px 30px,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 90px 120px,#dfe5ff 60%,transparent),radial-gradient(1.6px 1.6px at 170px 60px,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 230px 200px,#cfeaff 60%,transparent),radial-gradient(1.6px 1.6px at 60px 210px,#fff 60%,transparent);
 background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,260px 240px,260px 240px,260px 240px,260px 240px,260px 240px;
 filter:drop-shadow(0 0 4px #b9b0ff);animation:cx-twinkle 4s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){html body[data-page]::after{animation:none!important}}