/* The explainer film's frame, controls and storyboard fallback. Each page styles its own stage and scenes. */
.sb-film { display: flex; flex-direction: column; gap: var(--sb-space-4); }
.sb-film__stage { position: relative; overflow: hidden; }
.sb-film__beats { position: relative; margin: 0; padding: 0; list-style: none; }
.sb-film__beat { position: absolute; inset: 0; display: flex; flex-direction: column; visibility: hidden; }
.sb-film__beat.is-current { visibility: visible; }
.sb-film__caption { font-weight: var(--sb-weight-bold); }
.sb-film__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-3); }
.sb-film__steps { display: flex; flex-wrap: wrap; gap: var(--sb-space-1); margin: 0; padding: 0; list-style: none; }
.sb-film__step {
  display: grid;
  place-items: center;
  min-width: var(--sb-target);
  min-height: var(--sb-target);
  padding: 0;
  border: 0;
  border-radius: var(--sb-radius-pill);
  background: transparent;
  font-size: var(--sb-size-label);
  font-weight: var(--sb-weight-heavy);
}
.sb-film__step::before { content: ''; width: 0.75rem; height: 0.75rem; border: 2px solid var(--sb-text); border-radius: 50%; }
.sb-film__step[aria-current="step"]::before { background: var(--sb-text); }
.sb-film__progress { flex: 1 1 8rem; height: 0.375rem; overflow: hidden; border-radius: var(--sb-radius-pill); background: var(--sb-divider); }
.sb-film__progress::before {
  content: '';
  display: block;
  height: 100%;
  background: var(--sb-text);
  transform-origin: left;
  transform: scaleX(var(--sb-film-progress, 0));
}
.sb-film[data-paused] .sb-film__beat *, .sb-film[data-paused] .sb-film__beat *::before, .sb-film[data-paused] .sb-film__beat *::after { animation-play-state: paused !important; }
/* A film played while the page's motion is paused runs on its own. */
.motion-paused .sb-film:not([data-paused]) .sb-film__beat *, .motion-paused .sb-film:not([data-paused]) .sb-film__beat *::before, .motion-paused .sb-film:not([data-paused]) .sb-film__beat *::after { animation-play-state: running !important; }

/* Reduced motion: every beat in order, each with its caption, nothing moving. */
.sb-film--storyboard .sb-film__beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sb-space-6); height: auto !important; }
.sb-film--storyboard .sb-film__beat { position: relative; inset: auto; visibility: visible; }
.sb-film--storyboard .sb-film__controls { display: none; }
/* Every beat shows with its caption, so the step list stays for screen readers only: the stage is hidden from them. */
.sb-film--storyboard .sb-film__steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }