/* home-animation.css */
/* ==============================================================================
| HOMEPAGE ANIMATION STYLES (MOBILE-FIRST REWRITE)                           |
==============================================================================
| Mobile: Normal, safe scrolling. Backgrounds stretch to fill tall content.
| Desktop (768px+): Complex sticky stacking animation.
*/

/* --- MOBILE & UNIVERSAL DEFAULTS --- */
.scroll-wrapper {
    position: relative;
}

.scroll-section {
    position: relative; /* Normal scroll flow on mobile */
    width: 100%;
    min-height: 100vh;
    clip-path: inset(0); /* Keeps the background strictly contained without breaking sticky children */
}

/* Backgrounds stretch to exactly match the parent section's total height */
.scroll-section > .video-background-container,
.scroll-section > .bg-cover {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important; /* Stretches completely to the bottom of the content */
    z-index: 1;
}

/* Fix to prevent "Our Mission" background zoom WITHOUT pushing content down */
@media (max-width: 767px) {
    #mission {
        display: grid; 
    }
    #mission > .bg-cover,
    #mission > .content-container {
        grid-area: 1 / 1; 
    }
    #mission > .bg-cover {
        position: sticky !important;
        height: 100vh !important;
        top: 0;
    }
}

/* Content flows naturally. NO negative margins. */
.scroll-section > .content-container {
     position: relative;
     z-index: 10;
     height: auto;
     min-height: 100vh;
     padding-bottom: 4rem;
}

/* ALIGNMENT FIXES */
#home > .content-container {
    justify-content: flex-start;
    padding-top: 160px !important; /* Force text out from under mobile header */
}

#mission > .content-container,
#service > .content-container,
#values > .content-container,
#ministries > .content-container,
#team > .content-container {
    justify-content: flex-start;
    padding-top: 100px !important; /* Safe clearance for other sections */
}

/* Stacking Order */
#home { z-index: 1; }
#mission { z-index: 2; }
#service { z-index: 3; }
#values { z-index: 4; }
#ministries { z-index: 5; }
#team { z-index: 6; }


/* ==============================================================================
   DESKTOP ONLY (768px and up): Apply the Sticky Stacking Animation
   ============================================================================== */
@media (min-width: 768px) {
    .scroll-section {
        position: sticky;
        top: var(--header-height, 0px);
        height: 100vh; /* Lock height on desktop */
        overflow: visible; /* Let children handle their own overflow */
        clip-path: none; /* Disable clip-path on desktop for the stacking effect */
    }

    #home > .content-container {
        justify-content: center;
        padding-top: 0 !important;
    }

    /* Reset background to absolute 100vh for desktop stacking trick */
    .scroll-section > .video-background-container,
    .scroll-section > .bg-cover {
        position: absolute !important; 
        height: 100vh !important;
        transition: transform 1.8s ease-in-out, opacity 1.8s ease-in-out;
        will-change: transform, opacity;
        opacity: 1; 
    }

    /* Video backgrounds specifically retain the filter transition */
    .scroll-section > .video-background-container {
        transition: transform 1.8s ease-in-out, filter 1.8s ease-in-out, opacity 1.8s ease-in-out;
        will-change: transform, filter, opacity;
    }

    /* Reset content flow for desktop */
    .scroll-section > .content-container {
         height: 100vh !important;
         overflow-y: auto; 
         padding-top: calc(var(--header-height, 0px) + 2rem) !important;
         transition: transform 1.8s ease-in-out, filter 1.8s ease-in-out, opacity 1.8s ease-in-out;
         will-change: transform, filter, opacity;
         opacity: 1; 
    }

    /* Apply scale and opacity transformations universally during stacking */
    .scroll-section.is-stacked > .content-container,
    .scroll-section.is-stacked > .video-background-container,
    .scroll-section.is-stacked > .bg-cover {
        transform: scale(0.9);
        opacity: 0; 
    }

    /* Isolate the brightness filter away from static image backgrounds */
    .scroll-section.is-stacked > .content-container,
    .scroll-section.is-stacked > .video-background-container {
        filter: brightness(0.5); 
    }
}