.auth-page-wrapper {
    background-color: #cbcbcbcc;
}

.header-text {
    text-align: center;
    z-index: 10;
}

    .header-text h2 {
        color: #bbb;
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .header-text p {
        color: #bbb;
        font-size: 0.9rem;
    }

/* The Solar System Wrapper */
.solar-system-container {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* The Central Text (Sun) */
.center-text {
    position: absolute;
    text-align: center;
    width: 150px;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 5;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Orbit Rings (Lines) */
.orbit-ring {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-1 {
    width: 220px;
    height: 220px;
}
/* Inner */
.ring-2 {
    width: 320px;
    height: 320px;
}
/* Middle */
.ring-3 {
    width: 420px;
    height: 420px;
}
/* Outer */

/* The Rotating Wrappers (Invisible tracks) */
.orbit-track {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    /* Move origin to center so it rotates around center */
    transform: translate(-50%, -50%);
}

/* Animation Speeds */
.track-1 {
    width: 220px;
    height: 220px;
    animation: orbit-spin 20s linear infinite;
}

.track-2 {
    width: 320px;
    height: 320px;
    animation: orbit-spin 30s linear infinite reverse;
}
/* Reverse direction */
.track-3 {
    width: 420px;
    height: 420px;
    animation: orbit-spin 40s linear infinite;
}

/* The Planet Bubbles */
.planet {
    position: absolute;
    width: 75px; /* INCREASED SIZE per request */
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    /* Position the planet on the track (top center of the ring) */
    top: -37.5px; /* Half of height to center on line */
    left: 50%;
    transform: translateX(-50%);
}

    .planet img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Counter-rotate the image so it stays upright while the track spins */
        animation: counter-spin inherit;
        /* "inherit" makes it use the same duration as the parent track */
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: inherit; /* Matches parent direction (but we reverse logic in keyframes if needed) */
    }

/* Specific Counter Rotation assignments to match track speeds */
.track-1 .planet img {
    animation: counter-spin 20s linear infinite;
}

.track-2 .planet img {
    animation: counter-spin 30s linear infinite reverse;
}

.track-3 .planet img {
    animation: counter-spin 40s linear infinite;
}



/* --- ANIMATIONS --- */
@keyframes orbit-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes counter-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* Responsive */
@media (max-width: 800px) {  
    .solar-system-container {
        transform: scale(0.6);
    }
}

@media (max-width: 1000px) {
    .solar-system-container {
        transform: scale(0.7);
    }
}