/* MobDial · Cosmos backdrop — realistic deep-space theme
Hubble-style nebula, mixed-temperature stars, milky-way band, properly
shaded planet with atmospheric ring, cross-flare bright stars.
*/
.md-cosmos{
position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
background:
radial-gradient(ellipse 90% 70% at 22% 18%, rgba(40,55,140,.16), transparent 55%),
radial-gradient(ellipse 80% 55% at 78% 78%, rgba(120,30,140,.10), transparent 55%),
radial-gradient(ellipse 120% 70% at 50% 100%, rgba(10,40,80,.18), transparent 65%),
radial-gradient(circle at 50% 50%, #050811 0%, #020308 70%, #010104 100%)
}
/* ── NEBULA — Hubble-style emission cloud ────────────────── */
.md-cosmos__nebula{
position:absolute;inset:-10%;
background:
radial-gradient(ellipse 38% 28% at 28% 38%, rgba(255,100,140,.10), rgba(255,80,120,0) 60%),
radial-gradient(ellipse 42% 30% at 35% 42%, rgba(180,80,220,.12), rgba(180,60,220,0) 65%),
radial-gradient(ellipse 28% 20% at 30% 35%, rgba(100,180,255,.14), rgba(80,180,255,0) 55%),
radial-gradient(ellipse 35% 25% at 72% 62%, rgba(120,180,255,.08), rgba(120,180,255,0) 60%),
radial-gradient(ellipse 30% 18% at 55% 88%, rgba(80,200,180,.06), rgba(80,200,180,0) 60%);
filter:blur(28px) saturate(110%);
transform:translateZ(0)
}
/* ── MILKY WAY BAND — diagonal dust band ─────────────────── */
.md-cosmos__milkyway{
position:absolute;left:-20%;right:-20%;top:30%;height:42%;
background:
linear-gradient(180deg, transparent 0%, rgba(220,210,200,.04) 30%, rgba(220,200,200,.07) 50%, rgba(220,210,200,.04) 70%, transparent 100%),
radial-gradient(ellipse 60% 80% at 30% 50%, rgba(255,240,210,.06), transparent 70%),
radial-gradient(ellipse 55% 80% at 75% 50%, rgba(240,210,255,.05), transparent 70%);
transform:rotate(-12deg) translateZ(0);
filter:blur(4px);
opacity:.55
}
/* ── STAR FIELDS — three parallax layers, varied colors ─── */
.md-cosmos__stars{position:absolute;inset:0;will-change:transform}
/* FAR — tiny pinpricks, many colors (real stellar types) */
.md-cosmos__stars{contain:layout style paint}
.md-cosmos__stars--far{
background-image:
radial-gradient(1px 1px at 7% 12%, rgba(255,255,255,.85) 50%, transparent),
radial-gradient(1px 1px at 18% 28%, rgba(220,235,255,.75) 50%, transparent),
radial-gradient(.5px .5px at 33% 7%, rgba(255,255,255,.6) 50%, transparent),
radial-gradient(1px 1px at 41% 45%, rgba(255,240,210,.75) 50%, transparent),
radial-gradient(.5px .5px at 56% 18%, rgba(255,255,255,.5) 50%, transparent),
radial-gradient(1px 1px at 68% 62%, rgba(220,235,255,.75) 50%, transparent),
radial-gradient(.5px .5px at 79% 33%, rgba(255,255,255,.55) 50%, transparent),
radial-gradient(1px 1px at 88% 71%, rgba(255,200,180,.65) 50%, transparent),
radial-gradient(1px 1px at 14% 78%, rgba(220,235,255,.7) 50%, transparent),
radial-gradient(.5px .5px at 26% 91%, rgba(255,255,255,.45) 50%, transparent),
radial-gradient(1px 1px at 48% 84%, rgba(255,255,255,.75) 50%, transparent),
radial-gradient(.5px .5px at 62% 96%, rgba(255,240,210,.55) 50%, transparent),
radial-gradient(1px 1px at 92% 4%, rgba(220,235,255,.8) 50%, transparent),
radial-gradient(.5px .5px at 3% 51%, rgba(255,255,255,.5) 50%, transparent),
radial-gradient(1px 1px at 22% 53%, rgba(255,255,255,.7) 50%, transparent),
radial-gradient(.5px .5px at 11% 38%, rgba(255,200,180,.5) 50%, transparent),
radial-gradient(1px 1px at 73% 22%, rgba(255,255,255,.75) 50%, transparent),
radial-gradient(.5px .5px at 84% 49%, rgba(220,235,255,.55) 50%, transparent);
background-size:340px 340px;
opacity:.7
}
/* MID — medium, blue-white + warm */
.md-cosmos__stars--mid{
background-image:
radial-gradient(1.5px 1.5px at 13% 24%, rgba(255,255,255,.95), transparent 60%),
radial-gradient(1.4px 1.4px at 38% 58%, rgba(180,210,255,.85), transparent 60%),
radial-gradient(1.2px 1.2px at 64% 13%, rgba(255,255,255,.7), transparent 60%),
radial-gradient(1.5px 1.5px at 82% 41%, rgba(255,240,215,.75), transparent 60%),
radial-gradient(1.3px 1.3px at 9% 73%, rgba(220,235,255,.85), transparent 60%),
radial-gradient(1.5px 1.5px at 50% 88%, rgba(255,255,255,.8), transparent 60%),
radial-gradient(1.4px 1.4px at 73% 76%, rgba(255,210,190,.7), transparent 60%),
radial-gradient(1.5px 1.5px at 91% 17%, rgba(220,235,255,.85), transparent 60%),
radial-gradient(1.3px 1.3px at 28% 36%, rgba(255,255,255,.7), transparent 60%);
background-size:520px 520px;
opacity:.82;
animation:md-cosmos-twinkle 8s ease-in-out infinite
}
/* NEAR — bright, large, color-saturated */
.md-cosmos__stars--near{
background-image:
radial-gradient(2px 2px at 12% 26%, rgba(255,255,255,1), transparent 65%),
radial-gradient(2.5px 2.5px at 32% 71%, rgba(140,200,255,.95), transparent 65%),
radial-gradient(2px 2px at 51% 18%, rgba(255,255,255,.95), transparent 65%),
radial-gradient(2.2px 2.2px at 69% 49%, rgba(255,235,210,.9), transparent 65%),
radial-gradient(2.5px 2.5px at 86% 81%, rgba(255,200,235,.8), transparent 65%),
radial-gradient(2px 2px at 6% 89%, rgba(255,255,255,.9), transparent 65%),
radial-gradient(2.2px 2.2px at 23% 5%, rgba(160,210,255,.9), transparent 65%);
background-size:720px 720px;
opacity:.95
}
@keyframes md-cosmos-twinkle{0%,100%{opacity:.78}50%{opacity:.95}}
/* ── BRIGHT FOREGROUND STARS — with cross-flare ─────────── */
.md-cosmos__bright{position:absolute;inset:0;pointer-events:none}
.md-cosmos__bright span{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.85),0 0 16px rgba(200,220,255,.5);will-change:opacity}
.md-cosmos__bright span::before,
.md-cosmos__bright span::after{content:'';position:absolute;background:linear-gradient(currentColor,transparent);left:50%;top:50%;border-radius:1px;opacity:.55}
.md-cosmos__bright span::before{width:1px;height:36px;transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,rgba(255,255,255,.7),transparent)}
.md-cosmos__bright span::after{width:36px;height:1px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.md-cosmos__bright span:nth-child(1){top:18%;left:12%;animation:md-cosmos-bright 5s ease-in-out infinite}
.md-cosmos__bright span:nth-child(2){top:34%;left:68%;animation:md-cosmos-bright 7s ease-in-out infinite .8s}
.md-cosmos__bright span:nth-child(3){top:72%;left:24%;animation:md-cosmos-bright 6s ease-in-out infinite 2.1s}
.md-cosmos__bright span:nth-child(4){top:58%;left:84%;animation:md-cosmos-bright 8s ease-in-out infinite 3.4s}
.md-cosmos__bright span:nth-child(5){top:12%;left:50%;width:2.5px;height:2.5px;animation:md-cosmos-bright 9s ease-in-out infinite 1.4s}
@keyframes md-cosmos-bright{0%,100%{opacity:.55}50%{opacity:1}}
/* ── DISTANT PLANET — proper shading + atmosphere ───────── */
.md-cosmos__planet{
position:absolute;top:-18%;right:-12%;width:380px;height:380px;border-radius:50%;
background:
radial-gradient(circle at 28% 26%,
rgba(180,255,220,.42) 0%,
rgba(80,160,220,.30) 22%,
rgba(40,80,140,.20) 42%,
rgba(15,25,55,.50) 60%,
rgba(2,4,12,.85) 80%);
box-shadow:
inset -20px -20px 50px rgba(2,4,12,.65),
inset 18px 18px 38px rgba(220,235,255,.06),
0 0 60px rgba(80,180,255,.10);
opacity:.72;
transform:translateZ(0)
}
.md-cosmos__planet::before{
content:'';position:absolute;inset:-12px;border-radius:50%;
background:radial-gradient(circle at 28% 26%, rgba(140,210,255,.16), transparent 60%);
filter:blur(10px)
}
/* ── BEAMS — disabled ───────────────────────────────────── */
.md-cosmos__beam{display:none}
/* ── BOTTOM HORIZON GLOW — subtle, warm ─────────────────── */
.md-cosmos::after{
content:'';position:absolute;left:50%;bottom:-32%;width:140%;height:85%;
transform:translateX(-50%) translateZ(0);
background:radial-gradient(ellipse at center,
rgba(80,170,220,.10) 0%,
rgba(50,90,140,.06) 28%,
rgba(20,40,80,.04) 55%,
transparent 70%);
filter:blur(22px);
opacity:.9
}
/* ── FILM GRAIN ─────────────────────────────────────────── */
.md-cosmos__noise{display:none}
/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.md-cosmos__stars,
.md-cosmos__bright span{animation:none}
}