/* --- PRELOADER STYLES --- */

/* --- GLOBAL BODY STYLES --- */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #090a0f; /* Restores the dark background color */
    color: #f1f1f1;      /* Restores the light text color */
}
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #090a0f;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
}
.preloader-icon {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- UNIVERSE BACKGROUND & LAYERS --- */
.universe-background {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; overflow: hidden;
}
.galaxies, .stars-slow, .stars-medium, .stars-fast {
    position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: transparent;
}
.galaxies { box-shadow: var(--galaxies-shadow, none); transition: filter 0.7s ease; }
.stars-slow { box-shadow: var(--stars-slow-shadow, none); }
.stars-medium { box-shadow: var(--stars-medium-shadow, none); }
.stars-fast { box-shadow: var(--stars-fast-shadow, none); }

.galaxies::after, .stars-slow::after, .stars-medium::after, .stars-fast::after {
    content: ''; position: absolute; left: 0; top: 100vh;
    width: 1px; height: 1px; box-shadow: inherit;
}
.stars-slow, .stars-medium, .stars-fast { 
    animation: twinkle 8s ease-in-out infinite;
}
@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* --- VISUAL EFFECTS (LENS FLARE, METEOR, STAR) --- */
.lens-flare {
    position: fixed; top: 50%; left: -10%; width: 120%; height: 20px;
    background: linear-gradient(to right, transparent 0%, rgba(100, 150, 255, 0.1) 48%, rgba(200, 220, 255, 0.4) 50%, rgba(100, 150, 255, 0.1) 52%, transparent 100%);
    pointer-events: none; z-index: 10; transform: translateY(-50%) scaleY(0.5);
    opacity: 0; animation: sweep-flare 1.5s ease-out forwards;
}
@keyframes sweep-flare {
    10% { opacity: 1; transform: translateY(-50%) scaleY(1); }
    90% { opacity: 1; transform: translateY(-50%) scaleY(1); }
    100% { opacity: 0; transform: translateY(-50%) scaleY(0.2); }
}

.meteor { position: absolute; opacity: 0; width: 3px; height: 3px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 10px 3px rgba(200, 220, 255, 0.5); }
.meteor::after { content: ''; position: absolute; top: calc(50% - 1px); right: 2px; width: 250px; height: 2px; background: linear-gradient(to left, rgba(255, 255, 255, 0.25) 0%, transparent 100%); }
@keyframes meteor-fall { 0% { transform: translateX(0); opacity: 1; } 2% { transform: translateX(150vw); opacity: 0; } 100% { transform: translateX(150vw); opacity: 0; } }

.secret-star { position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 0 14px 5px rgba(200, 220, 255, 0.8); }
@keyframes wander-and-pulse { 0%   { transform: translate(-10vw, 0px) scale(1); opacity: 1; } 25%  { transform: translate(25vw, -5vh) scale(1.5); opacity: 0.8; } 50%  { transform: translate(60vw, 0px) scale(1); opacity: 1; } 75%  { transform: translate(85vw, 5vh) scale(1.5); opacity: 0.8; } 100% { transform: translate(110vw, 0px) scale(1); opacity: 1; } }

/* --- THEMATIC & HOLOGRAPHIC STYLES --- */
.section-icon { display: inline-block; margin-right: 15px; vertical-align: middle; }
.icon-paradox { width: 24px; height: 24px; position: relative; }
.icon-paradox::before, .icon-paradox::after { content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border: 2px solid rgba(255,255,255,0.5); border-radius: 50%; }
.content-section.is-visible .icon-paradox::before { animation: rotate-left 8s linear infinite; }
.content-section.is-visible .icon-paradox::after { animation: rotate-right 8s linear infinite; }

.icon-world { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,0.5); border-radius: 50%; position: relative; }
.icon-world::after { content: ''; position: absolute; width: 32px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 4px; top: 50%; left: 50%; margin-top: -4px; margin-left: -16px; }
.content-section.is-visible .icon-world { animation: rotate-left 12s linear infinite; }
.content-section.is-visible .icon-world::after { animation: rotate-right 12s linear infinite; }

@keyframes rotate-left { to { transform: rotate(-360deg); } }
@keyframes rotate-right { to { transform: rotate(360deg); } }

.holographic-shine { position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.holographic-shine::before { content: ''; position: absolute; top: 0; left: -150%; width: 75%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); transition: left 0.7s ease; }
.holographic-shine:hover::before { left: 150%; }

body.homepage-body {
    min-height: 200vh;
}

/* --- Hide Theme-Specific Elements by Default --- */
.clouds-back,
.clouds-middle,
.clouds-front {
    display: none;
}
/* --- Theme Transition Animation --- */

/* Add a smooth transition to the body's background and text color */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Add a smooth transition to all major UI panels and cards */
.site-header,
.site-footer,
.form-container,
.dossier-id-card,
.dossier-terminal,
.profile-card,
.featured-card,
.chapter-card,
.nexus-ai-terminal .terminal-container {
    transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

/* --- Background Theme Transition Layer --- */
/*
 * Creates a hidden pseudo-element on the background container.
 * We will make this layer visible to show the sky theme.
*/
.universe-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1; /* Place it behind the clouds but on top of the stars */
}
/* --- Earth Sky Theme: Preloader Override --- */
/*
 * Changes the preloader to match the light theme when it is active.
 */

/* Sets the background to the same gradient as the sky */
html.theme-earth-sky .preloader {
    background: linear-gradient(to bottom, #c1e8ff 0%, #87CEEB 100%);
}

/* Changes the spinner colors to be visible on a light background */
html.theme-earth-sky .preloader-icon {
    border-color: rgba(52, 73, 94, 0.2); /* Faint dark blue-grey */
    border-top-color: #34495E; /* Solid dark blue-grey */
}

/* --- Universe Theme: Heading Color Fix --- */
/*
 * Overrides the parent theme's default dark heading colors to ensure
 * readability on the default dark "Universe" theme.
 */
h1, h2, h3, h4, h5, h6 {
    color: #f1f1f1; /* Use the theme's standard light text color */
}
/* --- ENHANCED PRELOADER STYLES --- */
.preloader-content {
    text-align: center;
}

/* Find the existing .preloader-icon rule and add a margin to it */
.preloader-icon {
    margin: 0 auto 25px; /* This adds space between the spinner and the text */
}

/* Styles for the new text elements */
.preloader-text {
    font-family: 'monospace', 'Courier New', Courier;
    color: #a9b3c1;
    opacity: 0; /* Hide by default */
    max-height: 0; /* Hide by default */
    transition: opacity 0.3s, max-height 0.3s;
}

#loader-percentage {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}

/* When the dashboard is loading, make the text visible */
body.dashboard-loading .preloader-text {
    opacity: 1;
    max-height: 100px; /* Reveal the text */
}

/* --- ENHANCED PRELOADER STYLES --- */
.preloader-content {
    text-align: center;
}

.preloader-icon {
    margin: 0 auto 25px; /* Adds space between the spinner and the text */
}

.preloader-text {
    font-family: 'monospace', 'Courier New', Courier;
    color: #a9b3c1;
}

#loader-percentage {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}

#loader-status-text {
    font-size: 1rem;
}

/* Add this to background-style.css */
body.dashboard-loading {
    overflow: hidden;
}