/* scroll-stage 1.0.1 : structure only. No colours, no fonts, no spacing scale.
   Everything the engine needs is gated on html.stage-js, so a page without
   JavaScript shows every section as a plain readable block. */

/* ---- acts ---------------------------------------------------------------- */
.stage { position: relative; }

/* A pinned act owns span viewport-heights of scroll. The engine writes --stage-span. */
.stage-js .stage[data-stage="pin"],
.stage-js .stage[data-stage="pan"] {
  height: calc(var(--stage-span, 1.5) * 100vh);
  height: calc(var(--stage-span, 1.5) * 100svh);
}

/* The frame that sticks while the act scrolls. Clip, never hidden, on ancestors:
   overflow hidden or auto on any ancestor breaks position: sticky. */
.stage-js .stage__pin {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
}

/* ---- devices ------------------------------------------------------------- */
.stage-js .stage__rail {
  display: flex;
  width: max-content;
  will-change: transform;
}

.stage-js [data-stage-cue],
.stage-js [data-stage-kinetic] {
  opacity: 0;
  will-change: opacity, transform;
}
.stage-js .stage-split { opacity: 1 !important; }

/* Kinetic masks. The padding keeps descenders (g, y, p) from being cut by the mask. */
.stage__unit {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.stage__unit-i {
  display: inline-block;
  will-change: transform, opacity;
}

.stage-js [data-stage-parallax] { will-change: transform; }
.stage-js [data-stage-reveal] { will-change: clip-path; }
[data-stage-count] { font-variant-numeric: tabular-nums; }

/* in: reveal once on entry, children staggered when the parent has data-stage-stagger */
.stage-js [data-stage-in],
.stage-js [data-stage-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 640ms cubic-bezier(0.23, 1, 0.32, 1), transform 640ms cubic-bezier(0.23, 1, 0.32, 1);
}
.stage-js [data-stage-in].stage-in,
.stage-js [data-stage-stagger] > .stage-in {
  opacity: 1;
  transform: none;
}

/* progress bar: position and motion only, colour from the site */
[data-stage-progress] {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
  pointer-events: none;
  z-index: 1000;
}

/* ---- mobile: a pan act may hand its rail to native horizontal scroll ------ */
.stage-mobile .stage--native[data-stage="pan"] { height: auto; }
.stage-mobile .stage--native[data-stage="pan"] .stage__pin {
  position: static;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.stage-mobile .stage--native[data-stage="pan"] .stage__rail { transform: none !important; }

/* ---- reduced motion: everything visible, nothing moves, nothing pins ------- */
@media (prefers-reduced-motion: reduce) {
  .stage-js .stage[data-stage="pin"],
  .stage-js .stage[data-stage="pan"] { height: auto; }
  .stage-js .stage__pin {
    position: static;
    height: auto;
    overflow: visible;
  }
  .stage-js .stage[data-stage="pan"] .stage__pin {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
  .stage-js .stage__rail { transform: none !important; }
  .stage-js [data-stage-cue],
  .stage-js [data-stage-kinetic] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .stage-js [data-stage-parallax] { transform: none !important; }
  .stage-js [data-stage-reveal] { clip-path: none !important; }
  .stage-js [data-stage-in],
  .stage-js [data-stage-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}