.solar-section {
    position: relative;
    height: 700px;
    background: radial-gradient(circle at center, #1a0a2e, #0a0015);
    overflow: hidden;
}

.solar-system {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sun {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, #ffcc00, #ff6600);
    border-radius: 50%;
    box-shadow: 0 0 60px #ff9900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit {
    position: absolute;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    animation: rotateAnti 40s linear infinite;
}

/* Orbit sizes */
.orbit-1 { width: 150px; height: 150px; margin: -75px; animation-duration: 8s; }
.orbit-2 { width: 220px; height: 220px; margin: -110px; animation-duration: 12s; }
.orbit-3 { width: 300px; height: 300px; margin: -150px; animation-duration: 16s; }
.orbit-4 { width: 380px; height: 380px; margin: -190px; animation-duration: 20s; }
.orbit-5 { width: 470px; height: 470px; margin: -235px; animation-duration: 26s; }
.orbit-6 { width: 560px; height: 560px; margin: -280px; animation-duration: 32s; }
.orbit-7 { width: 650px; height: 650px; margin: -325px; animation-duration: 40s; }
.orbit-8 { width: 750px; height: 750px; margin: -375px; animation-duration: 48s; }

.planet {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}


/* Planet sizes */
.mercury { width: 10px; height: 10px; background: #b1b1b1; }
.venus   { width: 16px; height: 16px; background: #e6b566; }
.earth   { width: 18px; height: 18px; background: #2a7fff; position: relative; }
.mars    { width: 14px; height: 14px; background: #c1440e; }
.jupiter { width: 34px; height: 34px; background: #d9a066; }
.saturn  { width: 28px; height: 28px; background: #000000; }
.uranus  { width: 22px; height: 22px; background: #7fffd4; }
.neptune { width: 22px; height: 22px; background: #4169e1; }


/* Planet Colors */
.mercury { background: #b1b1b1; }
.venus   { background: #e6b566; }
.earth   { background: #2a7fff; }
.mars    { background: #c1440e; }
.jupiter { background: #d9a066; }
.saturn  { background: radial-gradient(circle at 30% 30%, #f4e7c3, #c9a f66) ;}
.uranus  { background: #7fffd4; }
.neptune { background: #4169e1; }

/* Moon */
.moon-orbit {
    position: absolute;
    width: 34px;
    height: 34px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: moonRotate 4s linear infinite;
}

.moon {
    width: 6px;
    height: 6px;
    background: #ddd;
    border-radius: 50%;
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
}

.saturn::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 18px;
    border: 2px solid rgba(0,170,255,0.5);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(70deg);
}

.saturn::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(244,170,255,0.25), transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}


@keyframes moonRotate {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to   { transform: translate(-50%, -50%) rotate(0deg); }
}



/* Anti-clockwise animation */
@keyframes rotateAnti {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}



/* ===== STAR FIELD ===== */

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: twinkle 2s infinite ease-in-out alternate;
}

/* Twinkle animation */
@keyframes twinkle {
    from { opacity: 0.2; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1.2); }
}