/**
 * Screen-by-screen scrolling.
 *
 * Paint side of assets/js/screen-scroll.js: the stacking that lets one screen
 * be revealed by the next. Everything here hangs off .has-screen-scroll, which
 * the script only sets once it has decided to run, so the page falls back to a
 * plain scroll untouched.
 */

.has-screen-scroll,
.has-screen-scroll body {
    /* The step is the scroll; letting the page rubber-band past the last
       screen only fights the animation that is already carrying it. */
    overscroll-behavior-y: none;
}

/* Later sections paint over earlier ones, which is what makes a held screen
   read as being covered rather than pushed. */
[data-screen-scroll] > * {
    position: relative;
    z-index: 1;
}

/* A stepped section stays where it is while the next one rides up over it.
   The hold is 0 for a section that fits the screen and negative for one that
   overruns it — far enough up that its foot is flush before it stops, so the
   cover never hides anything unseen. The script measures it; the fallback is
   only what applies before the first measure. Sections GSAP has already
   pinned, and everything in the free run, keep their own positioning — see
   markPinnable(). */
[data-screen-scroll] > .screen-scroll__panel--held {
    position: sticky;
    top: var(--screen-scroll-hold, 0px);
    z-index: 0;
}