/* ==============================================================================
| HOMEPAGE ANIMATION STYLES (DANGEROUS & ISOLATED)                           |
==============================================================================
| This file contains aggressive layout code for the homepage scroll effect.
| It should ONLY be loaded on index.html.
*/

.scroll-wrapper {
    position: relative;
    /* Height is set by app.js based on its children */
}

/*
 * [THE STICKY FIX]:
 * All 'transform', 'filter', 'transition', and 'will-change' properties
 * have been REMOVED from this sticky parent element. This stops it from
 * "locking" to other sections when it's not supposed to.
*/
.scroll-section {
    position: sticky;
    /* This uses the --header-height variable set by app.js */
    top: var(--header-height, 0px);
    width: 100%;
    overflow: hidden;
    /* * NOTE: 'will-change' and 'transition' were removed from here to 
     * fix the bug where the section would un-stick when animated.
    */
}

/* * Background elements must be 100vh to match the viewport,
 * not the 150vh of their parent (which breaks aspect ratio).
*/
.scroll-section > .video-background-container,
.scroll-section > .background-image-container {
    height: 100vh;
    
    /* [THE STICKY FIX]: Animation properties are moved to the CHILD */
    /* [UPDATED] Added 'opacity' to the transition */
    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; /* Default state: fully visible */
}

/*
 * Main content container. Sits at the top 100vh of the parent.
*/
.scroll-section > .content-container {
     height: 100vh;
     overflow-y: auto; /* Allows internal scroll if content is too tall */
     
     /* Padding to account for header + breathing room */
     padding-top: calc(var(--header-height, 0px) + 2rem);
     padding-bottom: 4rem;

     /* [THE STICKY FIX]: Animation properties are moved to the CHILD */
     /* [UPDATED] Added 'opacity' to the transition */
     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; /* Default state: fully visible */
}

/* Override padding for service section (from previous fix) */
#service.scroll-section > .content-container {
    padding-top: calc(var(--header-height, 0px) + 1rem); 
    padding-bottom: 2rem;
}


/* --- Stacking Order --- */
/* Lower sections have a HIGHER z-index to scroll on top */
#home { z-index: 1; }
#mission { z-index: 2; }
#service { z-index: 3; }
#values { z-index: 4; }
#ministries { z-index: 5; }
#team { z-index: 6; }
/* [FIX] #footer z-index removed as it is no longer part of the stack */


/* * [THE STICKY FIX]: 
 * The parent .is-stacked class is now just a hook.
 * It has NO styles itself.
*/
.scroll-section.is-stacked {
    /* * NOTE: 'transform' and 'filter' were removed from here.
     * This class now only acts as a selector for the children below.
    */
}

/* * [THE STICKY FIX]: 
 * The animation is applied to the CHILDREN *inside* the
 * .scroll-section when the parent gets the .is-stacked class.
 * This is the core of the fix.
*/
.scroll-section.is-stacked > .content-container,
.scroll-section.is-stacked > .video-background-container,
.scroll-section.is-stacked > .background-image-container {
    transform: scale(0.9);
    filter: brightness(0.5); 
    opacity: 0; /* [UPDATED] Fade out the section completely as it gets stacked */
}


/* --- ALIGNMENT FIXES (from previous fixes) --- */

/* 1. Center #home content */
#home > .content-container {
    justify-content: center;
}
/* [FIX] #footer alignment rule removed */


/* 2. Top-align all OTHER sections */
#mission > .content-container,
#service > .content-container,
#values > .content-container,
#ministries > .content-container,
#team > .content-container {
    justify-content: flex-start; /* Aligns content to the top */
}