/* scroll-sequence. Section height = how much scroll the sequence spans. */
.ss {
  position: relative;
  height: var(--ss-length, 400svh);
  background-color: var(--color-bg);
}
.ss__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.ss__poster, .ss__poster img, .ss__canvas, .ss__key {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss__canvas { opacity: 0; }
.ss__canvas.is-ready { opacity: 1; }

/* Reduced motion: three stills, cross-faded (opacity only). */
.ss__key { opacity: 0; transition: opacity var(--dur-slow, 600ms) var(--ease, ease); }
.ss__key.is-shown { opacity: 1; }

/* Captions tied to scroll ranges: data-ss-at="0.2-0.45". Opacity only. */
.ss__caption {
  position: absolute;
  opacity: 0;
  transition: opacity var(--dur-slow, 600ms) var(--ease, ease);
}
.ss__caption.is-visible { opacity: 1; }