:root{

    --void:#07101f;
    --void-deep:#020611;

    --nebula-cyan: rgba(0,120,255,.12);
    --nebula-violet: rgba(70,90,255,.12);
    --nebula-amber: rgba(30,80,180,.08);

    --star-core:#ffffff;
    --star-gold:#d9f6ff;
    --star-amber:#8ee7ff;
    --star-orange:#55cfff;

}

*{ box-sizing:border-box; }

body{
    margin:0;
    min-height:100vh;

    background:
    linear-gradient(
        rgba(7,16,31,.65),
        rgba(2,6,17,.85)
    ),
    url("../images/galaxy.webp");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    position:relative;
    overflow-x:hidden;
}

/* ---------- Ambient nebula glow ---------- */
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(
circle at 15% 15%,
rgba(0,210,255,.10),
transparent 35%
),
radial-gradient(
circle at 85% 25%,
rgba(70,90,255,.12),
transparent 40%
),
radial-gradient(
circle at 50% 80%,
rgba(0,140,255,.08),
transparent 45%
);
pointer-events:none;
z-index:-4;
animation:nebulaDrift 45s ease-in-out infinite alternate;
}
@keyframes nebulaDrift{
    from{ transform:scale(1) translate(0,0); filter:brightness(1); }
    to{   transform:scale(1.08) translate(-1%, 1%); filter:brightness(1.18); }
}

/* ---------- Dense warm star dust (no image needed) ---------- */
.star-layer{
    position:fixed;
    inset:-10%;
    pointer-events:none;
    z-index:-3;
}

.star-layer.dust{
    background-image:
        radial-gradient(1px 1px at 8% 15%, var(--star-gold), transparent 100%),
        radial-gradient(1px 1px at 18% 40%, #fff, transparent 100%),
        radial-gradient(1px 1px at 28% 65%, var(--star-amber), transparent 100%),
        radial-gradient(1px 1px at 37% 20%, #fff, transparent 100%),
        radial-gradient(1px 1px at 46% 85%, var(--star-gold), transparent 100%),
        radial-gradient(1px 1px at 55% 10%, #fff, transparent 100%),
        radial-gradient(1px 1px at 63% 50%, var(--star-amber), transparent 100%),
        radial-gradient(1px 1px at 72% 30%, #fff, transparent 100%),
        radial-gradient(1px 1px at 80% 70%, var(--star-gold), transparent 100%),
        radial-gradient(1px 1px at 88% 45%, #fff, transparent 100%),
        radial-gradient(1px 1px at 95% 90%, var(--star-amber), transparent 100%),
        radial-gradient(1px 1px at 5% 92%, #fff, transparent 100%),
        radial-gradient(1px 1px at 25% 5%, var(--star-gold), transparent 100%),
        radial-gradient(1px 1px at 62% 78%, #fff, transparent 100%);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity:.6;
    animation: driftDust 170s linear infinite, twinkleSoft 5s ease-in-out infinite;
}

.star-layer.mid{
    background-image:
        radial-gradient(1.5px 1.5px at 12% 25%, var(--star-gold), transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 60%, var(--star-orange), transparent 100%),
        radial-gradient(1.5px 1.5px at 48% 12%, #fff, transparent 100%),
        radial-gradient(1.5px 1.5px at 58% 75%, var(--star-amber), transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 40%, var(--star-gold), transparent 100%),
        radial-gradient(1.5px 1.5px at 82% 85%, #fff, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 15%, var(--star-orange), transparent 100%),
        radial-gradient(1.5px 1.5px at 20% 90%, var(--star-amber), transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 40%, #fff, transparent 100%);
    background-repeat: repeat;
    background-size: 300px 300px;
    opacity:.75;
    animation: driftMid 120s linear infinite, twinkleMid 4s ease-in-out infinite;
}

.star-layer.bright{
    background-image:
        radial-gradient(2.2px 2.2px at 14% 22%, var(--star-core), transparent 100%),
        radial-gradient(2.2px 2.2px at 40% 68%, var(--star-gold), transparent 100%),
        radial-gradient(2.4px 2.4px at 64% 18%, var(--star-orange), transparent 100%),
        radial-gradient(2.2px 2.2px at 84% 50%, var(--star-amber), transparent 100%),
        radial-gradient(2.4px 2.4px at 30% 88%, var(--star-core), transparent 100%),
        radial-gradient(2.2px 2.2px at 95% 78%, var(--star-gold), transparent 100%);
    background-repeat: repeat;
    background-size: 420px 420px;
    opacity:.95;
    animation: driftBright 85s linear infinite, twinkleBright 3s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255,190,120,.7));
}

@keyframes driftDust{ from{ transform:translateY(0); } to{ transform:translateY(-180px); } }
@keyframes driftMid{ from{ transform:translateY(0); } to{ transform:translateY(-300px); } }
@keyframes driftBright{ from{ transform:translateY(0); } to{ transform:translateY(-420px); } }

@keyframes twinkleSoft{ 0%,100%{ opacity:.42; } 50%{ opacity:.72; } }
@keyframes twinkleMid{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; } }
@keyframes twinkleBright{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

/* ---------- Shooting stars: comet-style, short point-to-point travel, glow trails behind the head ---------- */
/* Each .shooting-star is a small anchor positioned somewhere on screen.       */
/* Its ::before is the glowing head, its ::after is the light trail that      */
/* fades out behind it as it moves — the trail is rotated to --angle so it    */
/* always points back the way the head came from.                            */
.shooting-star{
    position:fixed;
    width:4px;
    height:4px;
    z-index:-1;
    opacity:0;
    --angle: -35deg;
}

.shooting-star::before{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#ffffff;
    box-shadow:
        0 0 6px 2px #ffd9a0,
        0 0 14px 5px rgba(56,214,255,.65),
        0 0 26px 10px rgba(255,126,61,.3);
}

.shooting-star::after{
    content:"";
    position:absolute;
    top:1.5px;
    right:2px;
    width:70px;
    height:2px;
    background:linear-gradient(270deg, rgba(255,235,200,.9), rgba(255,158,77,.35) 55%, transparent);
    border-radius:2px;
    transform-origin:right center;
    transform: rotate(var(--angle));
}

.shooting-star.s1{ top:14%; left:20%; --angle:-30deg; animation: fly1 7s ease-in infinite 1s; }
.shooting-star.s2{ top:32%; left:65%; --angle:150deg; animation: fly2 8.5s ease-in infinite 4s; }
.shooting-star.s3{ top:60%; left:10%; --angle:-20deg; animation: fly3 6.5s ease-in infinite 6.8s; }
.shooting-star.s4{ top:20%; left:80%; --angle:160deg; animation: fly4 9s ease-in infinite 9.5s; }
.shooting-star.s5{ top:75%; left:55%; --angle:-35deg; animation: fly5 7.5s ease-in infinite 13s; }
.shooting-star.s6{ top:45%; left:35%; --angle:-25deg; animation: fly6 8s ease-in infinite 16.5s; }

/* Each keyframe: sit invisible, flick on, travel a short distance in its own
   direction, fade out before reaching any edge, then stay hidden until the
   long loop comes back around (so it never feels metronomic). */
@keyframes fly1{
    0%,60%{ opacity:0; transform:translate(0,0); }
    62%{ opacity:1; }
    72%{ opacity:1; transform:translate(120px,-70px); }
    80%{ opacity:0; transform:translate(150px,-88px); }
    100%{ opacity:0; }
}
@keyframes fly2{
    0%,40%{ opacity:0; transform:translate(0,0); }
    42%{ opacity:1; }
    54%{ opacity:1; transform:translate(-130px,60px); }
    63%{ opacity:0; transform:translate(-160px,74px); }
    100%{ opacity:0; }
}
@keyframes fly3{
    0%,70%{ opacity:0; transform:translate(0,0); }
    72%{ opacity:1; }
    83%{ opacity:1; transform:translate(140px,-45px); }
    91%{ opacity:0; transform:translate(172px,-56px); }
    100%{ opacity:0; }
}
@keyframes fly4{
    0%,25%{ opacity:0; transform:translate(0,0); }
    27%{ opacity:1; }
    39%{ opacity:1; transform:translate(-150px,55px); }
    48%{ opacity:0; transform:translate(-185px,68px); }
    100%{ opacity:0; }
}
@keyframes fly5{
    0%,55%{ opacity:0; transform:translate(0,0); }
    57%{ opacity:1; }
    68%{ opacity:1; transform:translate(110px,-80px); }
    77%{ opacity:0; transform:translate(136px,-99px); }
    100%{ opacity:0; }
}
@keyframes fly6{
    0%,10%{ opacity:0; transform:translate(0,0); }
    12%{ opacity:1; }
    23%{ opacity:1; transform:translate(130px,-60px); }
    32%{ opacity:0; transform:translate(160px,-74px); }
    100%{ opacity:0; }
}