/* assets/css/pages/login.css */

/* --- 10. Index / Login Page Styles --- */
.welcome-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    overflow: hidden; 
    position: relative; 
}
.hud-container { 
    position: absolute; 
    width: 600px; 
    height: 600px; 
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1); 
}
.hud-container svg { 
    width: 100%; 
    height: 100%; 
}
.hud-ring { 
    fill: none; 
    stroke-width: 1px; 
    stroke: var(--panel-border); 
    transform-origin: center; 
}
.hud-ring.ring-1 { 
    animation: rotate 40s linear infinite; 
}
.hud-ring.ring-2 { 
    animation: rotate 30s linear infinite reverse; 
}
.hud-ring.ring-3 { 
    stroke-dasharray: 10 15; 
    animation: rotate 20s linear infinite; 
}
.hud-markers line { 
    stroke: var(--primary-glow); 
    stroke-width: 2px; 
}
.hud-blip { 
    fill: var(--primary-glow); 
    animation: blip-pulse 3s infinite; 
}
.scan-line { 
    position: absolute; 
    top: 0; left: 0; 
    right: 0; 
    height: 3px; 
    background: var(--primary-glow); 
    box-shadow: 0 0 15px var(--primary-glow); 
    animation: scan-anim 4s infinite alternate ease-in-out; 
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes blip-pulse { 0%, 100% { opacity: 0.5; r: 4; } 50% { opacity: 1; r: 6; } }
@keyframes scan-anim { from { top: 0; } to { top: 100%; } }
.welcome-content { 
    text-align: center; 
    z-index: 1; 
    transition: opacity 0.5s, transform 0.5s; 
}
.welcome-content .logo { 
    font-size: 5rem; 
    margin-bottom: 10px; 
}
.welcome-content .subtitle { 
    font-family: var(--font-secondary); 
    font-size: 1.2rem; 
    color: var(--text-dim); 
    margin-bottom: 40px; 
}
.login-wrapper { 
    position: absolute; 
    z-index: 1; 
    opacity: 0; 
    transform: translateY(30px); 
    pointer-events: none; 
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); 
}
.login-panel { 
    width: 380px; 
}
.input-group { 
    position: relative; 
    margin-bottom: 25px; 
}
.input-group input { 
    width: 100%; 
    padding: 10px 0; 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid var(--panel-border); 
    color: var(--text-color); 
    font-size: 1rem; 
}
.input-group input:focus { 
    outline: none; 
    border-bottom-color: var(--primary-glow); 
}
.input-group label { 
    position: absolute; 
    top: 10px; left: 0; 
    color: var(--text-dim); 
    pointer-events: none; 
    transition: all 0.3s ease; 
}
.input-group input:focus + label, .input-group input:valid + label { 
    top: -15px; 
    font-size: 0.8rem; 
    color: var(--primary-glow); 
}
.login-panel button { 
    width: 100%; 
    padding: 12px; 
}
body.login-active .welcome-content { 
    opacity: 0; 
    transform: translateY(-30px); 
    pointer-events: none; 
}
body.login-active .hud-container { 
    transform: scale(0.5) translateY(-250px); 
    filter: blur(3px); 
}
body.login-active .login-wrapper { 
    opacity: 1; 
    transform: translateY(80px); 
    pointer-events: auto; 
}