/* 1. Root Variables for Extensibility */
:root {
    /* Define the scroll distance over which the animation occurs (e.g., 200vh) */
    --pin-distance: 200vh;
    /* Height of the actual content inside the hero container (usually 100vh) */
    --hero-height: 100vh;
    /* Speed of the transition (Used for the smooth unpin transition) */
    --transition-speed: 0.5s;
    --main-bg-color: #b50839;

}

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

body {
    font-family: sans-serif;
    background-color: #f8f8f8;
}

/* 2. Utility Classes */
.flex {
    display: flex;
}
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.center {
    justify-content: center;
    align-items: center;
}
/* 3. Hero Container (The Fixed/Animated Element) */
#heroContainer {
    width: 100%;
    height: var(--hero-height);
    position: fixed; /* Starts as FIXED to pin it to the viewport */
    top: 0;
    left: 0;
    z-index: 100;
    
    /* Center the text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    background-color: var(--main-bg-color);
    
    /* Add smooth transition for visual changes (e.g., zoom/fade) */
    transition: all var(--transition-speed) ease-out;
}

/* 4. Main Site Content */
#mainContent {
    height: 100vh; /* Ensure the rest of the site is scrollable */
    background-color: #ffffff;
    z-index: 10;
    position: relative; /* Bring content above the heroWrapper background */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
    overflow-x: hidden;
}

/* This class is added when the animation is finished and unpinning starts */
.unpinned {
    position: relative !important; /* Forces it back into the document flow */
    top: calc(var(--pin-distance) + 1px) !important; /* Pushes it down past the scroll distance */
    /* Add any final styles here, e.g., opacity: 0; transform: scale(5); */
}

/* style.css (Partial) */

/* Define a new section for the second pinned element */
#pinnedContentWrapper {
    /* Set the height where this element will live initially */
    top: 0;
    width: 100%;
    position: absolute; /* Starts in document flow, below the heroWrapper */
    z-index: 10; /* Below heroContainer but above main content */
}

#pinnedContent {
    width: 100%;
    height: 100%; 
    /* Starts relative, will be set to 'fixed' by JS */
    position: relative; 
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 90;
    clip-path: none;
    background-color: #ba263b;

}

#mainTitle {
    /* CRITICAL: Text color must be WHITE or very light */
    color: white; 
    position: relative; /* Needed for z-indexing over the revealed content */
    z-index: 2;
    text-align: center;
    width: 100%;
}

/* You will need a black (or opposite color) layer behind the text for the blend mode to work */
.hero-mask-layer {
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: black; 
    z-index: 95; /* Sits between the two pinned elements */
    opacity: 0; /* Start hidden */
}

/* Class added when the secondary title is unpinned */
.title-unpinned {
    position: relative !important;
    /* Pushes it down to the calculated unpin position */
    top: 0 !important; 
    /* Example: Fade it out or move it slightly */
    opacity: 0.5;
    transform: translateY(-50px);
}

/* State class for the element currently being animated */
.is-active-pin {
    opacity: 1;
    pointer-events: auto;
    z-index: 100 !important; /* Bring the active element to the very top */
}

/* Class added when an element's pin duration is completely finished */
.pin-finished {
    opacity: 0 !important; /* Ensure it stays hidden */
    pointer-events: none !important;
}