/* --- 1. THE TRANSPARENT FOUNDATION --- */

/* --- GLOBAL FOUNDATION --- */
body {
    background-color: #050505; /* Starting state */
    margin: 0;
}

/* Force every major section to be transparent */
.about-world, 
.about-grid-text, 
.about-quote,
.site-footer {
    background-color: transparent !important;
}

/* --- 2. THEME STATES (GSAP Targets This) --- */
body.theme-quote-active {
    background-color: #2D009B; /* The Purple Reveal */
}

/* --- 3. QUOTE LAYOUT & TYPOGRAPHY --- */
.about-quote {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    box-sizing: border-box;
}

.quote-container {
    max-width: 800px; /* Exact width from your video */
    width: 100%;
    margin: 0 auto;  /* Centers the 800px box, creating the 240px side margins */
    position: relative;
    text-align: left;
}

/* --- CAVEAT QUOTE MARK --- */
.quote-mark {
    position: absolute;
    left: -100px; /* Adjusting left position to create the 40px gap */
    top: -10px;
    font-family: 'Caveat', cursive; /* Caveat Font */
    font-weight: 700; /* Bold */
    font-size: 140px; /* Scaled for the double-quote look */
    color: #FFFFFF;
    line-height: 1;
    user-select: none;
}

/* --- QUOTE TYPOGRAPHY --- */
.quote-body {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    line-height: 52px;
    font-weight: 700;
    /* No color here; let the spans handle it */
}

/* --- THE QUOTE REVEAL FOUNDATION (SHARP PURPLE STATE) --- */

/* 1. The Parent: No longer transparent. This ensures text is sharp from the start. */
.quote-body, .quote-reveal {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    line-height: 1.4;
    font-weight: 700;
    color: #8F68EC; /* Solid purple start */
}

/* 2. The Words: GSAP will transition these from Purple to White */
.reveal-word {
    display: inline-block;
    color: #8F68EC; 
    margin-right: 0.28em;
    will-change: color;
    /* Clean state: no blur, no lift to avoid disrupting the animation */
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* 3. Hand-draw Spans: Ensure they don't disrupt layout or line breaks */
.hand-draw {
    display: inline-block;
    position: relative;
    color: inherit; 
}

/* Activation class used by JS to trigger the RoughNotation or SVG */
.hand-draw.is-active::after {
    background-size: 100% 100%;
}


/* --- 4. MOBILE RESPONSIVENESS (Below 768px) --- */
/* --- 4. MOBILE RESPONSIVENESS (Tuning Zone) --- */
@media (max-width: 768px) {
    
    /* THE OUTER WRAPPER: Controls the "frame" around your text */
    .about-quote {
        padding: 20px 30px; /* Adjust top/bottom and side breathing room */
    }

    /* THE CONTAINER: Ensures the text stays within phone width */
    .quote-container {
        max-width: 100%;
        margin-top: 20px; 
    }

    /* THE QUOTE MARK: The " symbol above the text */
    .quote-mark {
        position: relative; /* Changed from absolute to flow naturally */
        left: -16px; /* Adjust this to create the desired gap on mobile */
        top: 14px;
        font-size: 100px; /* Adjust this to make the symbol larger/smaller */
        margin-bottom: 20px; /* Space between symbol and first word */
    }

    /* THE MAIN TEXT: Your primary "Intent Zone" */
    .quote-body, 
    .quote-reveal {
        /* [PLAY WITH THESE] */
        font-size: 36px;    /* Increase to 30px or 32px if 28px is too small */
        line-height: 1.2;   /* Lower (1.2) for tighter look, Higher (1.6) for airy look */
        text-align: left;
    }

    /* THE WORD SPACING: Adjusts gaps between individual words */
    .reveal-word {
        margin-right: 0.25em; /* Lower this if words look too far apart */
    }
}