/* ==========================================================================
   css/loading.css — LOADING SCREEN SOLARIS 3D
   ========================================================================== */

#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000010;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transition: opacity 0.8s ease;
    overflow: hidden;
}
#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}
#loading-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 60%, rgba(200,220,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 80%, rgba(255,220,150,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 35%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 75%, rgba(150,200,255,0.7) 0%, transparent 100%),
        radial-gradient(2px 2px at 60% 45%, rgba(255,220,100,0.5) 0%, transparent 100%);
    background-size: 300px 300px, 400px 400px, 250px 250px, 350px 350px, 500px 500px, 280px 280px, 320px 320px;
    animation: loading-twinkle 4s ease-in-out infinite alternate;
}
@keyframes loading-twinkle { from { opacity: 0.6; } to { opacity: 1.0; } }
#loading-screen::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,80,160,0.18) 0%, rgba(80,0,160,0.12) 50%, transparent 70%);
    animation: nebula-pulse 6s ease-in-out infinite alternate;
}
@keyframes nebula-pulse {
    from { transform: scale(1); opacity: 0.5; }
    to   { transform: scale(1.15); opacity: 1; }
}
.loading-orbit-ring {
    position: relative; width: 160px; height: 160px; z-index: 1;
}
.loading-orbit-ring::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid transparent; border-top-color: #00f0ff; border-right-color: rgba(0,240,255,0.3);
    animation: orbit-spin 1.4s linear infinite;
}
.loading-orbit-ring::after {
    content: ''; position: absolute; inset: 14px; border-radius: 50%;
    border: 1px solid transparent; border-bottom-color: #a855f7; border-left-color: rgba(168,85,247,0.3);
    animation: orbit-spin 2.2s linear infinite reverse;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.loading-planet-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3.2rem; animation: planet-glow 4s ease-in-out infinite alternate;
}
@keyframes planet-glow {
    from { filter: drop-shadow(0 0 8px rgba(0,240,255,0.4)); }
    to   { filter: drop-shadow(0 0 20px rgba(168,85,247,0.8)); }
}
.loading-title {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: 0.12em;
    color: #ffffff; text-align: center; z-index: 1;
    animation: title-glow 3s ease-in-out infinite alternate;
}
.loading-title span { color: #00f0ff; }
@keyframes title-glow {
    from { text-shadow: 0 0 20px rgba(0,240,255,0.6), 0 0 40px rgba(0,240,255,0.3); }
    to   { text-shadow: 0 0 40px rgba(0,240,255,1.0), 0 0 80px rgba(0,240,255,0.5); }
}
.loading-subtitle {
    font-family: 'Courier New', monospace; font-size: 0.82rem;
    color: rgba(0,240,255,0.65); letter-spacing: 0.22em; text-transform: uppercase;
    z-index: 1; margin-top: -22px;
}
.loading-progress-container {
    width: min(420px, 85vw); z-index: 1; display: flex; flex-direction: column;
    gap: 10px; align-items: center;
}
.loading-progress-bar {
    width: 100%; height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px;
    overflow: hidden; border: 1px solid rgba(0,240,255,0.2);
}
.loading-progress-fill {
    height: 100%; width: 0%; border-radius: 4px; transition: width 0.55s ease;
    background: linear-gradient(90deg, #00f0ff, #a855f7, #00f0ff);
    background-size: 200% 100%; animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
    from { background-position: 200% center; }
    to   { background-position: -200% center; }
}
.loading-status-text {
    font-family: 'Courier New', monospace; font-size: 0.76rem;
    color: rgba(148,163,184,0.9); letter-spacing: 0.08em; text-align: center;
    min-height: 18px; transition: opacity 0.3s ease;
}
.loading-percent {
    font-family: 'Orbitron', 'Courier New', monospace; font-size: 0.88rem; color: #00f0ff; letter-spacing: 0.1em;
}