/* 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;
}

/* 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; z-index: 4; }
.header-logo { height: 55px; width: auto; transition: transform 0.5s ease-out, filter 0.5s ease-out; }
.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; }

/* 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.b1f9bd4a15ef0d49bf1d.css.map*/