/* Scroll Pinning Wrapper */
.scroll-trigger-container {
    height: 105vh;
    /* Tighter scroll: minimal pinning */
    position: relative;
}

.hero-section.sticky-hero {
    position: relative;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Parallax Hero Slices */
#parallax-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.parallax-strip {
    position: absolute;
    top: 0;
    height: 100%;
    background-image: url('../img/Parallax_home.jpg');
    background-size: 100vw 100vh;
    background-repeat: no-repeat;

    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Smooth Transition for Auto-Animation */
    /* Duration and delay can be variabilized in JS */
    transition: transform var(--duration, 1s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active State: Move Strips Away */
/* Note: Direction (up/down) is set via JS varying the transform value directly? 
   Or we can set a CSS variable for target position? 
   Easiest: JS toggles class, but we still need direction.
   Revised Plan: JS sets a CSS var `--target-y` on setup, 
   and `.active` uses it. */

.parallax-container-active .parallax-strip {
    transform: translateY(var(--target-y));
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-video {
    z-index: 0;
}

/* Mobile Override: Ensure hero scrolls naturally */
@media (max-width: 992px) {
    .hero-section.sticky-hero {
        position: relative !important;
        height: 100vh;
        /* Maintain full height */
        top: auto !important;
        overflow: hidden;
        /* Keep it clean */
    }
}