:root {
    /* Dusk/Twilight Palette - "Fading away" */
    --bg-color: #3b4d61; /* Stronger blue presence, but still muted/dusk */
    --bg-mid: #2a3544; /* Deep twilight blue */
    --bg-bottom: #11151c; /* Nightfall anchor */
    
    --text-primary: #f0f2f5; /* Brightest for the "Road Sign" */
    --text-muted: #b0b3c6; /* Soft for the meaning */
    --text-reflection: #888b9e; /* Discreet, blending into the dusk */
    --text-final: #9ca0b5; /* Slightly more visible than reflection, but still quiet */
}

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

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--bg-color) 0%, var(--bg-mid) 35%, var(--bg-bottom) 100%);
    font-family: 'Inclusive Sans', sans-serif;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#fireflies {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Start from top, use padding to position Maneo */
    text-align: center;
    height: 100%;
    padding: 0 2rem;
    padding-top: 42vh; /* Places Maneo roughly at the vertical center */
}

/* Typography & Hierarchy */

/* --- The Road Sign (Public) --- */

/* Tier 1: Anchor - The Signpost */
.tier-anchor {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 6rem; /* Reduced from 8rem (approx 2-3 points/steps smaller) */
    letter-spacing: 0.08em;
    color: var(--text-primary);
    margin-bottom: 2rem;
    line-height: 1;
    text-shadow: none; /* Removed all effects per request */
    /* Maneo stays capitalized, no transform needed */
}

/* Tier 2: Meaning Block - The Explanation on the Sign */
.tier-meaning {
    font-family: 'Inclusive Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 12vh; /* Adjusted separation (was 15vh, 6vh) */
    color: var(--text-muted);
    max-width: 800px;
}

.meaning-meta {
    font-size: 1.1rem; /* Increased from 0.9rem (approx 1 point larger) */
    opacity: 0.8;
    letter-spacing: 0.05em;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    text-transform: none; /* Lowercase for everything else */
}

.pronunciation {
    font-style: italic;
    text-transform: none;
}

.phonetic {
    font-style: normal;
    opacity: 0.8;
}

.meaning-definition {
    font-size: 1.15rem; /* Reduced from 1.25rem (approx 1 point smaller) */
    opacity: 0.95;
    margin-top: 0.5rem;
    font-weight: 400;
    letter-spacing: 0.18em; /* WIDER, forming a horizon */
    text-transform: none;
}


/* --- Personal Section (Discreet) --- */
/* Wrapper for personal content to push it down or group it */
.personal-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Reduced from 1.5rem for better cohesion */
    /* Container itself doesn't animate opacity, just provides structure */
}

/* Tier 3: Reflection Lines - The Whisper */
.tier-reflection {
    font-family: 'Inclusive Sans', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--text-reflection);
    font-size: 0.85rem; /* Small, unassuming */
    font-style: italic; /* Personal note style */
    text-transform: none;
}

.tier-reflection p {
    margin: 0;
    opacity: 0; /* Start invisible */
    animation: fadeIn 2s ease-out forwards;
    --target-opacity: 0.4; /* Final low opacity for individual lines */
}

/* Staggered animation for reflection lines */
.tier-reflection p:nth-child(1) {
    animation-delay: 7.355s; /* shifted +2.5s */
}

.tier-reflection p:nth-child(2) {
    animation-delay: 9.355s; /* shifted +2.5s */
}

.tier-reflection p:nth-child(3) {
    animation-delay: 11.355s; /* shifted +2.5s */
}

/* Tier 4: Resolution - The Quiet Conclusion */
.tier-resolution {
    font-family: 'Inclusive Sans', sans-serif;
    color: var(--text-final);
    font-size: 0.85rem; /* Reduced from 0.9rem */
    letter-spacing: 0.12em; /* Increased spacing for calmness */
    font-weight: 400;
    margin-top: 0; /* Removed margin to let gap handle spacing */
    text-transform: none;
    opacity: 0; /* Start invisible */
    animation: fadeIn 0.9s ease-out forwards; /* Much faster for impact */
    animation-delay: 13.49s; /* 11.355s (last reflection start) + 2s (reflection duration) + 0.135s */
    --target-opacity: 0.45; /* Slightly more visible than reflection */
}

.tier-resolution p {
    margin: 0;
}

/* Animations */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: var(--target-opacity, 1); }
}

/* Remove the old container animation since we are animating children now */
/* @keyframes fadeInPersonal { ... } */

/* Staggered Animations for Road Sign */
.tier-anchor {
    opacity: 0;
    animation: fadeIn 3.1s ease-out forwards; /* Slower */
    animation-delay: 3s; /* Increased from 0.5s to let the space breathe */
    --target-opacity: 1;
}

.tier-meaning {
    opacity: 0;
    animation: fadeIn 2s ease-out forwards; /* Medium */
    animation-delay: 5.1s; /* shifted +2.5s */
    --target-opacity: 1;
}

/* Responsiveness */
@media (max-width: 600px) {
    .content {
        /* On mobile, revert to padding-top approach for explicit control */
        padding-top: 45vh; /* Starts just below 42vh (desktop center) to sit below 50% line */
        justify-content: flex-start; /* Start from top again */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-top: 0; /* Reset margin */
    }

    .tier-anchor {
        font-size: 3.5rem; 
        margin-bottom: 1.5rem;
    }
    
    .tier-meaning {
        margin-bottom: 10vh; 
        gap: 0.4rem;
        /* Ensure width constraints allow wrapping */
        width: 100%;
        max-width: 90%; /* Prevent touching edges */
    }

    .meaning-meta {
        font-size: 0.85rem; 
        gap: 0.8rem;
        flex-wrap: wrap; /* Allow meta to wrap if needed on very small screens */
    }

    .meaning-definition {
        font-size: 0.9rem; 
        padding: 0; /* Remove side padding to use max-width instead */
        letter-spacing: 0.12em; 
        line-height: 1.6; /* improved readability for wrapped text */
        
        /* Force wrapping behavior */
        white-space: normal; 
        word-wrap: break-word;
        
        /* Optional: limit width to force a clean break before it hits edge */
        max-width: 300px; 
        margin: 0 auto; /* Center the block */
    }
    
    .personal-container {
        gap: 0.8rem; /* Scaled down from 1rem */
    }

    .tier-reflection {
        font-size: 0.75rem; /* Scaled down from 0.85rem */
        gap: 0.3rem;
    }
    
    .tier-resolution {
        font-size: 0.75rem; /* Matches reflection size */
        letter-spacing: 0.1em; /* Proportional spacing */
    }
}