/* ScrollScene — structural only. Looks live with the section that uses it. */

.scroll-scene {
  position: relative;
  /* Height is set by ScrollScene.jsx: stage height + N steps of scroll. */
}

.scroll-scene-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* mobile: ignore the collapsing URL bar */
  overflow: hidden;
  /* Nothing inside can affect layout or paint outside the stage, so the
     compositor can leave the rest of the page alone while this animates. */
  contain: layout paint;
}

/* Images start parked below the stage and slide up over the one before them. */
.scroll-scene-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, 100%, 0);
  backface-visibility: hidden;
  /* Cast above the leading edge so a rising image reads as a layer over the one
     below, not a seam. Clipped by the stage once the layer comes to rest. */
  box-shadow: 0 -30px 60px -18px rgba(0, 0, 0, 0.6);
}

/* Text blocks crossfade; the consumer stacks them (a one-cell grid keeps the
   container as tall as the tallest step, so nothing has to be measured). */
.scroll-scene-step {
  opacity: 0;
}

/* ScrollScene.jsx adds .is-live while the scene is near the viewport. Hinting
   only then means four viewport-sized layers hold compositor memory for the
   moment they animate, instead of for the whole life of the page. */
.scroll-scene.is-live .scroll-scene-layer {
  will-change: transform;
}

.scroll-scene.is-live .scroll-scene-step {
  will-change: opacity, transform;
}