/* Stepped reveal. Measured from craft.wild.as (teardown 09-30), rewritten with our names.
   Text lines and content blocks slide up into place in six hard jumps (steps(6)) with no fade and no easing,
   so they click into position like sprite frames instead of gliding. part.js splits running text into its
   rendered lines and adds .is-in when the element is seen (or on load). Everything tunable is here. */
:root {
  --step-steps: 6;                    /* jumps per move */
  /* lines */
  --step-line-dur: .85s;              /* running text (.95s on the source's hero headline) */
  --step-line-y: 115%;                /* start below its own line box */
  --step-line-stagger: .1s;           /* between lines (hero: .11s headline, .08s sub) */
  --step-bleed: .08em;                /* extra mask room for descenders (.06em on the source's lead) */
  /* blocks */
  --step-block-dur: .8s;
  --step-block-y: 18px;
  --step-block-stagger: .12s;         /* between sibling blocks */
  /* "fade" blocks: the one stepped fade the source uses, for a small tagline or logo */
  --step-fade-dur: .9s;
  --step-fade-y: 14px;
}

/* ---- lines ---- */
.step-js [data-step-lines]:not(.is-split) { opacity: 0; }        /* raw text never flashes before the split */
[data-step-lines].is-split { display: flow-root; }                /* keeps the last line's negative margin inside, so the split text is exactly as tall as the raw text */
.step-ln {
  display: block;
  overflow: hidden;
  padding-bottom: var(--step-bleed);
  margin-bottom: calc(var(--step-bleed) * -1);
}
.step-li {
  display: block;
  transform: translateY(var(--step-line-y));
  transition: transform var(--step-line-dur) steps(var(--step-steps))
              calc(var(--step-delay, 0s) + var(--i, 0) * var(--step-line-stagger));
}
.is-in > .step-ln > .step-li { transform: none; }

/* ---- blocks: pure stepped slide, no fade ---- */
.step-js [data-step-block] {
  transform: translateY(var(--step-block-y));
  transition: transform var(--step-block-dur) steps(var(--step-steps)) var(--step-delay, 0s);
}
.step-js [data-step-block="fade"] {
  opacity: 0;
  transform: translateY(var(--step-fade-y));
  transition: opacity var(--step-fade-dur) steps(var(--step-steps)) var(--step-delay, 0s),
              transform var(--step-fade-dur) steps(var(--step-steps)) var(--step-delay, 0s);
}
.step-js [data-step-block].is-in { transform: none; opacity: 1; }

/* replay: snap back to the start with no transition */
.step-reset .step-li, .step-reset[data-step-block], .step-reset [data-step-block] { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .step-li, .step-js [data-step-block] { transform: none !important; opacity: 1 !important; transition: none !important; }
}