/* Enhanced Space Login Theme - Overlay Styles */

/* Twinkling Stars Effect */
.auth-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #eee, transparent),
        radial-gradient(2px 2px at 60px 70px, #fff, transparent),
        radial-gradient(1px 1px at 50px 50px, #ddd, transparent),
        radial-gradient(1px 1px at 130px 80px, #fff, transparent),
        radial-gradient(2px 2px at 90px 10px, #fff, transparent),
        radial-gradient(1px 1px at 160px 120px, #fff, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle 5s ease-in-out infinite, starMove 120s linear infinite !important;
    opacity: 0.9;
    z-index: 0;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

@keyframes starMove {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-200px);
    }
}

/* Shooting Stars */
.auth-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    pointer-events: none;
    animation: shootingStar 12s linear infinite !important;
}

@keyframes shootingStar {
    0% {
        background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.9) 0%, transparent 2%);
    }

    3% {
        background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.9) 0%, transparent 2%);
    }

    6% {
        background: transparent;
    }

    40% {
        background: radial-gradient(circle at 70% 20%, rgba(100, 200, 255, 0.9) 0%, transparent 2%);
    }

    43% {
        background: radial-gradient(circle at 85% 35%, rgba(100, 200, 255, 0.9) 0%, transparent 2%);
    }

    46%,
    100% {
        background: transparent;
    }
}

/* Enhanced Login Card Glow */
.auth-card {
    background: rgba(10, 10, 30, 0.75) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(100, 200, 255, 0.25) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(0, 212, 255, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    animation: cardPulse 4s ease-in-out infinite !important;
}

@keyframes cardPulse {

    0%,
    100% {
        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.9),
            0 0 40px rgba(0, 212, 255, 0.3),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    50% {
        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.9),
            0 0 60px rgba(0, 255, 136, 0.5),
            inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    }
}

/* Enhanced 3D Floating Logo with Rotation */
.logo-wrapper.floating img {
    filter: drop-shadow(0 0 40px rgba(0, 200, 255, 0.8)) drop-shadow(0 0 60px rgba(255, 150, 0, 0.6)) !important;
    animation: logo3DFloat 4s ease-in-out infinite, logoPulseGlow 2s ease-in-out infinite !important;
    transform-style: preserve-3d;
}

@keyframes logo3DFloat {

    0%,
    100% {
        transform: translateY(0) scale(1) rotateY(0deg) rotateX(0deg);
        filter: drop-shadow(0 0 40px rgba(0, 200, 255, 0.8)) drop-shadow(0 0 60px rgba(255, 150, 0, 0.6));
    }

    25% {
        transform: translateY(-15px) scale(1.05) rotateY(5deg) rotateX(5deg);
        filter: drop-shadow(0 0 50px rgba(0, 255, 200, 0.9)) drop-shadow(0 0 70px rgba(255, 100, 0, 0.7));
    }

    50% {
        transform: translateY(-25px) scale(1.1) rotateY(0deg) rotateX(10deg);
        filter: drop-shadow(0 0 60px rgba(100, 200, 255, 1)) drop-shadow(0 0 80px rgba(255, 150, 50, 0.8));
    }

    75% {
        transform: translateY(-15px) scale(1.05) rotateY(-5deg) rotateX(5deg);
        filter: drop-shadow(0 0 50px rgba(0, 255, 200, 0.9)) drop-shadow(0 0 70px rgba(255, 100, 0, 0.7));
    }
}

@keyframes logoPulseGlow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.95;
    }
}

/* Glowing Neon Title */
.text-3d-modern {
    font-family: 'Orbitron', 'Prompt', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.6rem !important;
    background: linear-gradient(to right, #00d4ff, #00ff88, #00d4ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    letter-spacing: 3px !important;
    filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.9)) !important;
    animation: shimmer 3s linear infinite, textGlow 2.5s ease-in-out infinite !important;
    text-shadow: none !important;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

@keyframes textGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.9));
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(0, 255, 136, 1));
    }
}

/* Subtitle Fade */
.auth-card>p {
    color: rgba(165, 243, 252, 0.85) !important;
    animation: subtitleFade 3s ease-in-out infinite !important;
}

@keyframes subtitleFade {

    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }
}

/* Enhanced Form Labels - Only for Login */
.auth-container .form-group label {
    color: #00d4ff !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.6) !important;
}

/* Transparent Logo - Blend with Space Background */
.transparent-logo {
    background: transparent !important;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 40px rgba(0, 200, 255, 0.8)) drop-shadow(0 0 60px rgba(255, 150, 0, 0.6)) !important;
}

/* Soft Space-Themed Input Fields - Only for Login/Mode screens */
.auth-container .form-group input {
    background: rgba(10, 20, 40, 0.4) !important;
    /* Dark semi-transparent for cosmic look */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 2px solid rgba(0, 212, 255, 0.25) !important;
    color: #e0f7ff !important;
    /* Light text for cosmic theme */
    font-size: 1.1rem !important;
}

.auth-container .form-group input::placeholder {
    color: rgba(100, 180, 220, 0.5) !important;
    /* Soft cyan placeholder */
    font-weight: 400 !important;
}

.auth-container .form-group input:focus {
    background: rgba(15, 30, 60, 0.6) !important;
    border-color: #00ff88 !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.01) !important;
}

/* Cyber Button with Ripple */
.btn-login {
    background: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%) !important;
    box-shadow:
        0 0 35px rgba(0, 212, 255, 0.6),
        0 6px 18px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
    font-size: 1.2rem !important;
    /* Larger button text */
}

.btn-login::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-login:hover::before {
    width: 350px;
    height: 350px;
}

.btn-login:hover {
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow:
        0 0 55px rgba(0, 255, 136, 0.9),
        0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* Mobile Adjustments - Larger Text for Better Readability */
@media (max-width: 600px) {
    .text-3d-modern {
        font-size: 1.4rem !important;
        letter-spacing: 2px !important;
    }

    .logo-wrapper.floating img {
        max-width: 160px !important;
    }

    .form-group label {
        font-size: 0.95rem !important;
        /* Larger labels */
    }

    .form-group input {
        font-size: 1.1rem !important;
        /* Larger input text */
        padding: 16px !important;
        /* More padding */
    }

    .btn-login {
        font-size: 1.15rem !important;
        /* Larger button */
        padding: 18px !important;
    }

    .auth-card>p {
        font-size: 0.95rem !important;
        /* Larger subtitle */
    }
}