/*
 * progress-stepper — MW4-style labeled progress bar for the video scrubber.
 *
 * Pure CSS, no JS. Reads the --scrubber-progress variable that scrubber.js
 * already sets on the stage, splits the bar into --n labeled sections, and
 * lights up the section the playhead sits in (gold, 30%) while a continuous
 * yellow tick strip fills left-to-right across the whole bar.
 *
 * Markup: a .progressbar with N .seg children, each carrying its running
 * index (style="--i:0" ... "--i:N-1") and a label (plain text or <span>). Place it as a child
 * of the scrubber container; mount() lifts it onto the sticky stage. To change
 * the section count, set --n and add/remove the same number of .seg divs.
 */
.progressbar {
  --n: 4;                                      /* section count */
  /* 0..N, capped just below N so the last section stays lit at progress 1 */
  --seg: min(calc(var(--scrubber-progress) * var(--n)), calc(var(--n) - 0.001));
  position: absolute; left: 0; right: 0; bottom: 0; height: 62px;
  display: flex; pointer-events: none; z-index: 1;
  background: rgba(0,0,0,.55);                 /* dark backdrop over any frame */
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}
.progressbar .seg {
  /* per-cell flags: active == 1 only while --seg is inside [i, i+1) */
  --after:  clamp(0, calc((var(--seg) - var(--i)) * 1000 + 1), 1);
  --before: clamp(0, calc((var(--i) + 1 - var(--seg)) * 1000), 1);
  --active: calc(var(--after) * var(--before));
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid rgba(255,255,255,.14);
  /* no `font-size`, `font-family`, `font-weight` or `letter-spacing` here —
     label typography is set in Webflow on the .seg class (weight 700 and
     letter-spacing .12em used to be forced here, which out-specified Webflow's
     .seg and made the settings there a no-op) */
  text-transform: uppercase;
  color: color-mix(in srgb, #ffffff calc(var(--active) * 100%), #A5A5A5);
  transition: color .35s ease;                 /* grey <-> gold label fade */
}
.progressbar .seg:first-child { border-left: 0; }
/* Gold fill of the active cell — bottom brighter than top, 30% opacity.
   Stacking: the fill sits at z-index -1 INSIDE the cell's own stacking
   context (isolation: isolate on .seg), i.e. above the bar's dark backdrop
   and below the label text — no matter whether the label is wrapped in a
   <span> or is a bare text node. (The label used to rely on a
   `.seg > span { position: relative; z-index: 1 }` rule; the customer's
   i18n build step replaces the .seg content and drops the span, which put
   the text under the fill. 2026-09-10) */
.progressbar .seg { isolation: isolate; }
.progressbar .seg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #997C00 0%, #FFCE00 100%);
  opacity: calc(var(--active) * 0.3);
  transition: opacity .35s ease;               /* gold fill fades in/out */
}
/* Continuous tick strip across the WHOLE bar — width tracks total progress
   left-to-right, independent of which section is highlighted. Overhangs the
   top edge of the label boxes (top: -8px). */
.progressbar::after {
  content: ""; position: absolute; top: -8px; left: 0; height: 14px; z-index: 2;
  width: calc(var(--scrubber-progress) * 100%);
  background: repeating-linear-gradient(90deg, #FFD400 0 2px, transparent 2px 5px);
}