/* ===========================
   AURORA EFFECT
=========================== */

.aurora{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:220px;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,255,180,.15),
        rgba(0,170,255,.15),
        rgba(180,0,255,.15),
        transparent
    );
    filter:blur(40px);
    animation:auroraMove 12s ease-in-out infinite alternate;
}

@keyframes auroraMove{
    from{
        transform:translateX(-80px) skewX(-10deg);
    }
    to{
        transform:translateX(80px) skewX(10deg);
    }
}

/* ===========================
   SPACE DUST
=========================== */

.space-dust{
    position:fixed;
    width:2px;
    height:2px;
    background:white;
    border-radius:50%;
    box-shadow:0 0 6px white;
    animation:dustFloat 8s linear infinite;
}

@keyframes dustFloat{
    from{
        transform:translateY(0);
        opacity:0;
    }
    20%{
        opacity:1;
    }
    80%{
        opacity:1;
    }
    to{
        transform:translateY(120vh);
        opacity:0;
    }
}

/* ===========================
   SOLAR FLARE
=========================== */

.solar-flare{
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,255,0,.4),
        rgba(255,120,0,.2),
        transparent 70%);
    animation:flarePulse 3s ease-in-out infinite;
}

@keyframes flarePulse{
    0%,100%{
        transform:scale(1);
        opacity:.6;
    }
    50%{
        transform:scale(1.2);
        opacity:1;
    }
}

/* ===========================
   PLANET SHADOW
=========================== */

.planet{
    position:absolute;
    overflow:hidden;
}

.planet::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:linear-gradient(
        to right,
        transparent,
        rgba(0,0,0,.35)
    );
}

/* ===========================
   GLOWING ORBITS
=========================== */

.orbit{
    box-shadow:
        0 0 8px rgba(255,255,255,.08),
        inset 0 0 8px rgba(255,255,255,.04);
}

/* ===========================
   SPACE TITLE
=========================== */

.title{
    position:fixed;
    top:20px;
    width:100%;
    text-align:center;
    color:white;
    font-size:32px;
    font-weight:bold;
    letter-spacing:3px;
    text-shadow:
        0 0 10px cyan,
        0 0 20px blue;
    animation:titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow{
    from{
        text-shadow:0 0 10px cyan;
    }
    to{
        text-shadow:
            0 0 20px cyan,
            0 0 40px white;
    }
}

/* ===========================
   END OF STYLE PART 5
=========================== */