/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background-color: #0a0a1a; /* Base dark blue/purple */
    min-height: 100vh;
    margin: 0;
    display: flex; /* Use flex for main content centering */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide scrollbars */
    font-family: 'Poppins', sans-serif; /* Use imported font */
    position: relative; /* Needed for absolute positioned pseudo-elements */
}

/* --- Animated Background --- */

/* Starry background using pseudo-element */
body::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: radial-gradient(white 0.5px, transparent 1px);
    background-size: 30px 30px; /* Size of the grid for stars */
    opacity: 0; /* Start hidden */
    animation: fadeIn 3s ease-in 0.5s forwards, twinkle 10s linear infinite alternate;
    z-index: 0;
}

/* Nebula/Cloud Effect using another pseudo-element */
body::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; /* Start off-screen */
    width: 200%; height: 200%;
    background: radial-gradient(ellipse at center, rgba(66, 135, 245, 0.1) 0%, rgba(66, 135, 245, 0) 70%), /* Soft Blue */
                radial-gradient(ellipse at top left, rgba(147, 50, 168, 0.1) 0%, rgba(147, 50, 168, 0) 70%), /* Soft Purple */
                radial-gradient(ellipse at bottom right, rgba(245, 188, 66, 0.05) 0%, rgba(245, 188, 66, 0) 70%); /* Faint Gold */
    opacity: 0; /* Start hidden */
    animation: fadeIn 4s ease-in 0.8s forwards, subtleMove 60s linear infinite alternate;
    z-index: 1; /* Behind main content but above stars */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.3; } /* Keep background subtle */
}
/* Different fade-in for stars */
@keyframes twinkle {
    0% { opacity: 0.1; }
    50% { opacity: 0.3; }
    100% { opacity: 0.1; }
}

@keyframes subtleMove {
    0% { transform: translate(10%, 10%) rotate(0deg); }
    100% { transform: translate(-10%, -10%) rotate(360deg); }
}


/* --- Main Content --- */
.main-content {
    position: relative; /* Ensure text is above background pseudo-elements */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.logo-container {
    text-align: center;
    margin-bottom: 30px; /* Space between logo and text */
}

#logo {
    display: block;
    max-width: 90%;
    width: 200px;
    height: auto;
    transform: scale(0);
    opacity: 0;
}

/* Apply animation when 'loaded' class is added */
body.loaded #logo {
    animation: growAndSettle 1.7s cubic-bezier(0.25, 0.1, 0.25, 1.5) 0.5s 1 forwards; /* Delay slightly more */
}

/* Grow and Settle Animation - Adjusted */
@keyframes growAndSettle {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    70% {
        transform: scale(3); /* 200% overshoot (relative to final 1.5 scale) */
        opacity: 1;
    }
    100% {
        transform: scale(1.5); /* Settle at 150% */
        opacity: 1;
    }
}

/* --- Text Content --- */
.text-content {
    text-align: center;
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly lower */
    animation: textFadeIn 1.5s ease-out 1.8s forwards; /* Animate after logo settles */
}

#mission-text {
    color: #e0e0e0; /* Brighter text */
    font-size: 1.4em; /* Adjust size */
    font-weight: 600;
    margin-bottom: 10px;
    max-width: 600px; /* Limit width for readability */
    line-height: 1.4;
}

#tagline-text {
    color: #f0ad4e; /* Use logo's orange/gold color */
    font-size: 1.1em;
    font-weight: 400;
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Footer --- */
.footer-text {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #ccc; /* Fixed color */
    font-size: 0.8em;
    opacity: 0;
    transition: opacity 1s ease-in-out 2.2s; /* Fade in last */
    z-index: 3; /* Above background effects */
}

body.loaded .footer-text {
    opacity: 0.7; /* Make slightly less prominent */
}

.footer-text p {
    margin-bottom: 5px;
}