/* =========================================================
   Section scroll effects — secondary pages
   Behaviour: assets/js/section-scroll.js.

   Everything here is unscoped by an html.* gate the way premium-scroll.css
   is (html.cx-premium there): that class is only ever added by
   premium-scroll.js's own init sequence, which does not run on these
   pages. section-scroll.js only ever adds .cx-word / .cx-split /
   .cx-parallax / .cx-wipe to begin with, so these rules simply have
   nothing to select against until it has run — no separate gate needed.
   ========================================================= */

/* ── Headline word reveal ──
   Same mechanics as .cx-word / .cx-split in premium-scroll.css: colour-
   carrying spans the theme already emits stay intact as parents, so each
   word inherits whatever colour it already had. .cx-split needs
   overflow: hidden to contain the words' own vertical travel as they
   stagger up into place. */
.cx-word {
    display: inline-block;
}

.cx-split {
    overflow: hidden;
}

/* ── Media reveals ──
   The wipe runs on a wrapper, the parallax on the <img> inside it, so the
   two transforms never collide on one element if a page ever combines
   both on the same image. */
.cx-wipe {
    clip-path: inset(0% 0% 100% 0%);
    will-change: clip-path;
}

.cx-parallax {
    will-change: transform;
}

/* ── Depth drift ──
   Scroll-scrubbed layer motion for elements that are not frame-filling
   images (see initDepth() in section-scroll.js). Same will-change hint as
   the parallax: both are transform-only and run on every scroll frame, so
   both want their own compositor layer rather than repainting the section
   underneath them. */
.cx-depth {
    will-change: transform;
}

/* ── Stacked cards ──
   Behaviour: initStacks() in section-scroll.js, opt-in per page via
   data-cx-stack. Only .cx-stack__card--active is styled, and that class
   is added by the script — so a page carrying the markup still renders
   completely normally if the script never runs, and below the desktop
   breakpoint (where initStacks() deliberately does not run) these rules
   never apply either.

   The background is the load-bearing part: cards pin on top of one
   another, so a card without an opaque ground of its own lets the one
   beneath show straight through it — which is exactly what happened
   first time round. `background-color: inherit` is NOT the way to get it:
   ScrollTrigger wraps every pinned element in its own .pin-spacer div, so
   inherit resolves against that wrapper (transparent) rather than the
   section's own dark ground. The colour is therefore stated outright, to
   match .cx-dark-section in header.php — the one place it is defined. */
.cx-stack__card--active {
    position: relative;
    background-color: #090F18;
    /* Each card gets its own compositor layer and paints above the one
       before it, so the stack layers in DOM order without needing an
       explicit z-index per card. */
    isolation: isolate;
    will-change: transform;
    /* Scales toward its own centre, so a card being covered shrinks evenly
       on all four sides. From `center top` it shrank upward instead, which
       pulled the bottom edge up across the copy still on screen and read
       as the text being clipped rather than the card receding. */
    transform-origin: center center;

    /* A pinned card has to fill the screen, or the card beneath it stays
       visible in the band it does not cover — these sections are their
       content's natural height (~550-610px in a 900px viewport), so
       without this the stack showed two cards at once. Centring the
       existing content inside the taller box rather than stretching it
       keeps every inner layout, padding and breakpoint exactly as it was.
       The nav is fixed and overlays the top, so its height comes off the
       card to keep the content optically centred in what is actually
       visible. */
    min-height: calc(100vh - var(--cx-nav-h, 117px));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Reduced motion ──
   Belt and braces: initHeadlineReveals()/initParallax()/initWipes() in
   section-scroll.js already refuse to run at all under this preference,
   so this only matters if the setting changes after the page has loaded. */
@media (prefers-reduced-motion: reduce) {
    .cx-word,
    .cx-wipe,
    .cx-parallax,
    .cx-depth,
    .cx-stack__card--active {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        will-change: auto;
    }
}