/*
 * section-captions — one vertically-centred text overlay per scrubber
 * section, synced to the video. Horizontal placement (left/right) is left
 * to the host (Webflow) on purpose.
 *
 * Pure CSS, no JS. Reads the --scrubber-progress variable scrubber.js sets on
 * the stage and shows the caption whose progress range the playhead sits in.
 * Captions hand off sequentially at a boundary: the outgoing one fades out
 * first, and only then does the incoming one fade in (no overlap).
 *
 * Markup: a .section-captions with one .cap child per caption, each with an
 * <h3> heading and a <p> copy line. Nothing else — no attributes. The progress
 * range comes from the caption's position (:nth-child below), so the markup is
 * buildable natively in Webflow (plain divs + classes, no Embed and no `style`
 * attribute, which Webflow reserves).
 *
 * This file carries the MECHANIC only: which caption is active, and the fade.
 * Look and placement — type, colour, and stacking all five .cap on the same
 * spot — belong to the host, so Webflow can finetune them. Without host styling
 * the captions flow one below the other; the demo page keeps a local block that
 * does the stacking, see the <style> next to its section-captions.css link.
 *
 * Ranges are 0..1 of the whole scrub, so captions do NOT have to line up with
 * the stepper's sections — currently they do: one caption per stepper section
 * (4 captions over 4 equal sections). Place it as a child of the scrubber
 * container; mount() lifts it onto the sticky stage. To change the captions,
 * add/remove .cap divs and edit the range list below so the ranges stay
 * gapless from 0 to 1 (last one --to:1).
 */
.section-captions {
  /* capped just below 1 so the last caption stays lit at progress 1 */
  --p: min(var(--scrubber-progress), 0.999);
  /* no `left`/`right` here — horizontal alignment is set in Webflow */
  position: absolute; top: 0; bottom: 0;
  pointer-events: none; z-index: 2; /* above the dark scrim (scrubber-fade.css, z 1) */
}
.section-captions .cap {
  /* active == 1 only while --p is inside [from, to) */
  --after:  clamp(0, calc((var(--p) - var(--from)) * 1000 + 1), 1);
  --before: clamp(0, calc((var(--to) - var(--p)) * 1000), 1);
  --active: calc(var(--after) * var(--before));
  opacity: var(--active);
  transition: opacity .2s ease;
  /* Sequential hand-off, not cross-fade: fading in waits one fade duration so
     the outgoing caption (delay 0) is fully gone before this one appears. */
  transition-delay: calc(var(--active) * .2s);
}
/* The range list — position, not markup, decides when a caption shows. Keep the
   values gapless: each --from equals the previous --to, the last --to is 1. */
.section-captions .cap:nth-child(1) { --from: 0;   --to: .25; }
.section-captions .cap:nth-child(2) { --from: .25; --to: .5;  }
.section-captions .cap:nth-child(3) { --from: .5;  --to: .75; }
.section-captions .cap:nth-child(4) { --from: .75; --to: 1;   }