/* Galaxy background — matches animated_3d_galaxy_no_flying_stars.html structure */

body.galaxy-auth-page {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(90, 40, 180, 0.34), transparent 30%),
        radial-gradient(circle at 25% 70%, rgba(0, 190, 255, 0.18), transparent 35%),
        linear-gradient(180deg, #050927 0%, #02030d 70%, #000000 100%);
    perspective: 1000px;
}

body.galaxy-auth-page #galaxy-starfield {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    pointer-events: none;
}

body.galaxy-auth-page .galaxy-scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    transform-style: preserve-3d;
    z-index: 2;
    pointer-events: none;
}

body.galaxy-auth-page .galaxy-nebula {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 420px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-18deg);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22), transparent 7%),
        radial-gradient(circle at 38% 52%, rgba(123, 60, 255, 0.55), transparent 30%),
        radial-gradient(circle at 62% 48%, rgba(0, 212, 255, 0.35), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 170, 0.18), transparent 54%);
    filter: blur(18px);
    opacity: 0.75;
    animation: galaxyRotate 28s linear infinite, galaxyPulse 8s ease-in-out infinite alternate;
}

body.galaxy-auth-page .galaxy-nebula::before,
body.galaxy-auth-page .galaxy-nebula::after {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 35px rgba(123, 60, 255, 0.25),
        inset 0 0 45px rgba(0, 212, 255, 0.16);
}

body.galaxy-auth-page .galaxy-nebula::after {
    inset: 20%;
    opacity: 0.65;
}

body.galaxy-auth-page .galaxy-moon-wrap {
    position: absolute;
    top: 8vh;
    right: 8vw;
    width: min(22vw, 180px);
    height: min(22vw, 180px);
    transform-style: preserve-3d;
    animation: galaxyMoonFloat 8s ease-in-out infinite;
}

body.galaxy-auth-page .galaxy-moon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, #ffffff 0%, #f8f2d6 28%, #d8cfa6 62%, #9e9270 100%);
    box-shadow:
        0 0 35px rgba(255, 247, 195, 0.72),
        0 0 100px rgba(255, 247, 195, 0.28),
        inset -34px -22px 45px rgba(40, 34, 24, 0.38),
        inset 18px 14px 28px rgba(255, 255, 255, 0.42);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

body.galaxy-auth-page .galaxy-moon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 33% 34%, rgba(95, 85, 65, 0.38) 0 8%, transparent 9%),
        radial-gradient(circle at 63% 47%, rgba(95, 85, 65, 0.30) 0 10%, transparent 11%),
        radial-gradient(circle at 45% 72%, rgba(95, 85, 65, 0.25) 0 6%, transparent 7%),
        radial-gradient(circle at 73% 27%, rgba(95, 85, 65, 0.22) 0 5%, transparent 6%);
    mix-blend-mode: multiply;
    opacity: 0.8;
}

body.galaxy-auth-page .galaxy-moon::after {
    content: "";
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.42), transparent 40%, rgba(0, 0, 0, 0.18) 75%);
    animation: galaxyMoonLight 10s ease-in-out infinite alternate;
}

body.galaxy-auth-page .galaxy-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 142%;
    height: 36%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.14);
    transform: translate(-50%, -50%) rotateX(72deg) rotateZ(-20deg);
    opacity: 0.65;
}

body.galaxy-auth-page .galaxy-planet {
    position: absolute;
    left: 9vw;
    bottom: 12vh;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.75), transparent 13%),
        radial-gradient(circle at 35% 35%, #246bff, #15227a 58%, #050822 100%);
    box-shadow:
        0 0 55px rgba(0, 150, 255, 0.28),
        inset -25px -18px 38px rgba(0, 0, 0, 0.45);
    opacity: 0.85;
    transform: translateZ(-120px);
    animation: galaxyPlanetFloat 11s ease-in-out infinite;
}

@keyframes galaxyRotate {
    from { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-18deg); }
    to { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(342deg); }
}

@keyframes galaxyPulse {
    from { opacity: 0.55; filter: blur(22px) brightness(1); }
    to { opacity: 0.88; filter: blur(16px) brightness(1.22); }
}

@keyframes galaxyMoonFloat {
    0%, 100% { transform: translate3d(0, 0, 140px) rotateY(-8deg); }
    50% { transform: translate3d(-16px, 22px, 190px) rotateY(12deg); }
}

@keyframes galaxyMoonLight {
    from { transform: translateX(-8%) rotate(0deg); }
    to { transform: translateX(8%) rotate(10deg); }
}

@keyframes galaxyPlanetFloat {
    0%, 100% { transform: translate3d(0, 0, -120px) rotateZ(0deg); }
    50% { transform: translate3d(28px, -18px, -80px) rotateZ(6deg); }
}

@media (max-width: 700px) {
    body.galaxy-auth-page .galaxy-moon-wrap {
        top: 6vh;
        right: 6vw;
        width: 105px;
        height: 105px;
    }

    body.galaxy-auth-page .galaxy-ring {
        display: none;
    }

    body.galaxy-auth-page .galaxy-nebula {
        width: 620px;
        height: 320px;
    }

    body.galaxy-auth-page .galaxy-planet {
        width: 90px;
        height: 90px;
        left: 8vw;
        bottom: 10vh;
    }
}

/* Login content above galaxy (replaces .content from demo) */

body.galaxy-auth-page .galaxy-auth-content {
    position: relative;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translateZ(0);
}

body.galaxy-auth-page .galaxy-auth-content .container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

body.galaxy-auth-page .galaxy-login-shell {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    flex: 0 0 auto;
    pointer-events: auto;
}

body.galaxy-auth-page .galaxy-auth-footer {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    pointer-events: none;
}

body.galaxy-auth-page .galaxy-auth-card {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 1rem;
    box-shadow:
        0 0 60px rgba(123, 60, 255, 0.25),
        0 24px 48px rgba(0, 0, 0, 0.45);
    width: 100%;
    transform: none;
}

body.galaxy-auth-page .galaxy-auth-card .card-header,
body.galaxy-auth-page .galaxy-auth-card .card-body {
    background: #ffffff;
}