/* General body styling */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #FFFFFF; color: #000000;
    font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', 'sans-serif';
    overflow: hidden; cursor: pointer;
}

/* NEW: Welcome Title Styling */
.welcome-title {
    font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
    font-weight: bold; /* Bold text */
    text-align: center;
    padding: 0 20px; /* Add some padding on the sides */
    margin-bottom: 2rem; /* Space between title and logo */
    line-height: 1.2; /* Adjust line height for better readability */
}

/* Layering */
#canvas-container { position: absolute; inset: 0; z-index: 1; }
#main-content { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 1.5s ease-in-out; }

/* Constellation and Particle Containers */
#constellation-container { position: absolute; inset: 0; z-index: 3; }
#particle-container { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.hidden { display: none !important; }

/* Start Prompt Styling */
#start-prompt { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.prompt-logo { width: clamp(200px, 35vw, 320px); margin-bottom: 30px; animation: pulse 2s infinite; }
.prompt-text { font-size: 1.5rem; color: rgba(0, 0, 0, 0.5); animation: pulse 2s infinite; }

/* Splash Screen Styling */
#splash-screen { position: absolute; z-index: 100; width: 100%; height: 100%; background-color: #FFFFFF; display: flex; justify-content: center; align-items: center; flex-direction: column; }
#text-container { font-size: clamp(2rem, 5vw, 4rem); font-weight: 300; letter-spacing: 2px; text-align: center; height: 80px; position: relative; width: 100%; }
.word { opacity: 0; position: absolute; left: 50%; transform: translateX(-50%); animation: fadeInOut 0.5s ease-in-out; }
.word::after { content: '_'; font-weight: 400; animation: pulse 1s infinite; }

#main-content.visible { opacity: 1; }

/* Header Styling */
#page-header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 20px 30px; 
    box-sizing: border-box; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; /* Aligns logo and right-group vertically */
    z-index: 4; 
}

.header-logo { height: 55px; width: auto; transition: transform 0.5s ease-out, filter 0.5s ease-out; }

/* NEW: Wrapper for Button and Blog Link */
.header-right-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the link under the button */
    gap: 8px; /* Space between button and link */
}

.signin-button { text-decoration: none; color: #000000; border: 1px solid #000000; padding: 10px 20px; border-radius: 5px; font-weight: 400; transition: background-color 0.3s, color 0.3s; }
.signin-button:hover { background-color: #000000; color: #FFFFFF; }

/* NEW: Blog Link Styling */
.blog-link {
    text-decoration: none;
    color: #555555;
    font-size: 0.9rem;
    font-weight: 300;
    transition: color 0.3s ease;
}
.blog-link:hover {
    color: #000000;
    text-decoration: underline;
}

/* NEW: Staff Portal Link Styling */
.staff-link {
    text-decoration: none;
    color: #777777; /* Slightly lighter than blog link to differentiate */
    font-size: 0.8rem; /* Slightly smaller */
    font-weight: 300;
    transition: color 0.3s ease;
}
.staff-link:hover {
    color: #000000;
    text-decoration: underline;
}

/* Statement Styling */
#statement-container { text-align: center; font-size: clamp(1.8rem, 4vw, 3.5rem); font-weight: 300; width: 80%; height: 150px; position: relative; z-index: 4; }
.statement { position: absolute; inset: 0; opacity: 0; animation: statementFade 4s ease-in-out; z-index: 2; }

/* --- NEW: Style for the bigger final statement --- */
.statement-final {
    font-size: clamp(2.5rem, 6vw, 5rem) !important; /* Larger font size */
    font-weight: 400; /* Slightly bolder */
}

/* Ghost Statement Styling */
.statement-ghost {
    position: absolute;
    /* Make the text slightly smaller to help with overlap */
    font-size: clamp(0.8rem, 1.4vw, 1.1rem); 
    font-weight: 300;
    opacity: 0.4; /* Increased opacity for visibility */
    color: #333;
    transition: opacity 1s ease-in-out;
    z-index: 1;
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Particle Styling and Animation */
.charging-particle { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; background-color: #e84118; border-radius: 50%; transform: translate(-50%, -50%); animation: fly-to-logo 0.8s ease-in forwards; }
@keyframes fly-to-logo { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50vw + 60px), calc(-50vh + 45px)) scale(0); opacity: 0.5; } }

/* Final Button Pulse Animation */
.pulse-final { animation: pulse-border 1.5s infinite; }
@keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }

/* General Animations */
.is-hiding { animation: fadeOutSimple 0.5s forwards; }
@keyframes fadeInOut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes statementFade { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeOutSimple { from { opacity: 1; } to { opacity: 0; } }

/*# sourceMappingURL=landing.672525c3342ad60b577f.css.map*/