/**
 * Page Background Crossfade — styles for the JS module in assets/js/page-background.js
 *
 * Hand-written (not part of the SCSS build, like transitions.css) so it stays
 * independent of the external compile step.
 */

/* Fixed full-viewport colour stack, behind everything. Lives in the persistent
   shell (#pageBg is the first child of .pageWrapper, outside #swup). JS sets its
   background-color (the base/first-panel colour) and appends .pageBg__layer
   children for each subsequent panel colour. */
#pageBg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#pageBg .pageBg__layer {
    position: absolute;
    inset: 0;
    opacity: 0;            /* GSAP scrubs this 0 -> 1 as the panel enters */
    will-change: opacity;
}

/* Lift real content above the fixed colour layer. The header is already
   position:fixed; z-index:1050, so it's untouched here — we only need the
   scrolling content and footer to sit above #pageBg (z-index:0). The panel
   sections inside #swup are made transparent by JS, so the colour shows through. */
.pageWrapper > main#swup,
.pageWrapper > footer {
    position: relative;
    z-index: 1;
}

/* Global default text colour, flipped per active panel by the JS (which also sets
   the body class). Low specificity (single class / element) so any explicit
   .text-white / .text-navy / heading colour on a panel still wins. */
#swup {
    color: var(--page-fg, inherit);
}

body.page-text-light {
    --page-fg: #FFFFFF;
}

body.page-text-dark {
    --page-fg: #081E3F; /* $navyBlue */
}

/* Respect reduced motion: the JS bails out and leaves sections painting their own
   backgrounds, so the colour stack must not cover them. */
@media (prefers-reduced-motion: reduce) {
    #pageBg {
        display: none;
    }
}