/* 
 * Completely isolated scroll container to survive micro-frontend proxies.
 * We do NOT rely on the host's html/body scrolling anymore.
 */
#presskit-scroller {
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: relative;
}

/* 
 * Strict 100vh for every top-level section 
 * This ensures perfect snap points without any gaps
 */
#presskit-scroller > section {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden !important;
    box-sizing: border-box;
    position: relative;
    scrollbar-width: none; /* Hide default scrollbars for Firefox */
}

#presskit-scroller > section::-webkit-scrollbar {
    display: none; /* Hide scrollbars for Chrome/Safari */
}

/* 
 * This wrapper is injected dynamically. 
 * It isolates the animations so we don't break the original layout 
 * of elements that have multiple direct children (like Hero).
 */
.snap-anim-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    
    /* Initial state (inactive / faded out) */
    opacity: 0.2;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Active State triggered by Intersection Observer */
#presskit-scroller > section.snap-active .snap-anim-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* 
 * Force all sections (HERO, ABOUT SOVI, ECOSYSTEM, OUR JOURNEY, and brand-assets iframe)
 * to always remain 100% sharp and fully visible, 
 * preventing any loading fade-out/blur or scrolling bugs on all screens.
 */
#hero .snap-anim-wrapper,
#hero.snap-active .snap-anim-wrapper,
#about-sovi .snap-anim-wrapper,
#about-sovi.snap-active .snap-anim-wrapper,
#ecosystem .snap-anim-wrapper,
#ecosystem.snap-active .snap-anim-wrapper,
#our-journey .snap-anim-wrapper,
#our-journey.snap-active .snap-anim-wrapper,
#brand-assets .snap-anim-wrapper {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}