/**
 * North Star - Global Section Reveal Animation System Styles
 */

/* 1. Prevent Flash of Unstyled Content (FOUC)
   When JS is active, hide eligible sections until GSAP sets their initial states.
   Using visibility: hidden preserves layout dimensions to avoid layout shifts. */
html.js-reveal-loading section:not(.no-reveal):not(.site-header):not(.main-footer):not(.menu-overlay):not(.cookie-consent):not(.modal):not(.popup) {
    visibility: hidden !important;
}

/* 2. Dynamically injected background wrapper style */
.ns-reveal-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transition: none !important;
}

/* Ensure sections that host the absolute background are positioned relatively */
.ns-reveal-section-active {
    position: relative !important;
}

/* 3. Pre-load hidden state class applied by JS
   This keeps animatable elements hidden/offset before GSAP triggers them. */
.ns-reveal-element-hidden {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    will-change: transform, opacity;
}

/* 4. Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    html.js-reveal-loading section {
        visibility: visible !important;
    }
    
    .ns-reveal-element-hidden {
        transform: none !important;
        opacity: 0 !important;
    }
}