:root {
    --bg-color: #F5F5F0;
    --text-color: #1A1A1A;
    --accent-color: #D22B2B;
    --progress: 0; /* JS will update this from 0 to 1 */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    /* Allow scrolling to drive the animation */
    height: 300vh; 
}

.serif {
    font-family: 'Playfair Display', serif;
}

/* * The Magic Wrapper 
 * We use CSS calc() mixed with the JS --progress variable
 * to interpolate between the center of the screen and the top-left corner.
 */
#branding-wrapper {
    position: fixed;
    z-index: 50;
    /* Start (p=0): top 50%, left 50%
       End (p=1): top 2rem, left 2.5rem (approx 40px)
    */
    top: calc(50% * (1 - var(--progress)) + 2rem * var(--progress));
    left: calc(50% * (1 - var(--progress)) + 2.5rem * var(--progress));
    
    /* Start (p=0): translate(-50%, -50%) -> Centers the element
       End (p=1): translate(0, 0) -> Aligns top-left corner
    */
    transform: translate(
        calc(-50% * (1 - var(--progress))), 
        calc(-50% * (1 - var(--progress)))
    );
    
    transform-origin: left center;
    white-space: nowrap;
    pointer-events: none; /* Let scroll pass through */
}

#brand-title {
    /* Interpolate font size: 4rem (Start) to 1.5rem (End) */
    font-size: calc(3rem * (1 - var(--progress)) + 1.25rem * var(--progress) + 1vw);
    line-height: 1.1;
    transition: color 0.3s ease;
}

/* The Red Line */
#red-line {
    height: 2px;
    background-color: var(--accent-color);
    width: 100%;
    display: block;
    margin-top: calc(1.5rem * (1 - var(--progress)) + 0.25rem * var(--progress));
    
    /* Optional: Make the line slightly thinner as it shrinks */
    transform: scaleX(1);
    transform-origin: left;
}

/* Content Section */
#content-layer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    text-align: center;
    opacity: 0; /* Controlled by JS */
    pointer-events: none;
    transition: opacity 0.5s ease-out;
    padding: 0 20px;
}

/* Scroll indicator to prompt user */
.scroll-prompt {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: calc(1 - var(--progress) * 3); /* Fades out quickly on scroll */
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
    40% {transform: translateX(-50%) translateY(-10px);}
    60% {transform: translateX(-50%) translateY(-5px);}
}

@media (max-width: 768px) {
    #branding-wrapper {
        left: calc(50% * (1 - var(--progress)) + 1rem * var(--progress));
    }

    #brand-title {
        font-size: calc(2rem * (1 - var(--progress)) + 1rem * var(--progress) + 1vw);
    }

    #content-layer blockquote {
        font-size: 1.25rem;
        transition: color 0.3s ease;
    }

    body {
        height: 250vh;
    }
}