/* The steps that share the line: the steps of a checkout on white, in Roboto Flex (a variable sans, weight 100 to
   1000 and width 25 to 151). The four names share one measure: the script works out, every frame, how wide each one
   is on the width axis so that together they fill it to the pixel, and places the thin rules between them.
   Minimal style. */
:root {
  --page: #ffffff;        /* the page */
  --ink: #141414;         /* the ink: the current step and the steps done */
  --grey: #b4b4b4;        /* the steps to come */
  --rule: #e4e4e4;        /* the thin rules between the steps */
  --accent: #ff4b1a;      /* the two rules around the current step, and a step done under the pointer */
  --note: #707070;        /* the line that says what is in the step */
  --button: #141414;      /* the main button */
  --on-button: #ffffff;   /* its words */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the steps */
.steps {
  --size: 44px;           /* written by the script: the size of the names */
  --pad: 9px;             /* and the room each side of a name, inside its step */
  position: relative;
  width: min(620px, 100%);
  visibility: hidden;     /* until the typeface is in and measured */
}

.steps.is-ready {
  visibility: visible;
}

.steps__row {
  position: relative;
}

.steps__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  --c: 0;                 /* written by the script: how much this name is in ink, 0 to 1 */
  --h: 0;                 /* and how much the pointer is on it, when it is done */
  flex: none;
  min-width: 0;
}

.step__btn {
  display: block;
  width: 100%;
  padding: 0 var(--pad);
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: default;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.step.is-done .step__btn {
  cursor: pointer;
}

.step__btn:focus-visible,
.back:focus-visible,
.next:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

.step__btn:focus-visible {
  outline-offset: -3px;
  border-radius: 6px;
}

.step__btn:focus:not(:focus-visible) {
  outline: none;
}

/* the mask the names rise out of when the steps arrive; room underneath for the tail of the y */
.step__mask {
  display: block;
  overflow: hidden;
  padding: 0.06em 0 0.16em;
  margin: -0.06em 0 -0.16em;
}

.step__name {
  display: block;
  font-size: var(--size);
  line-height: 1.04;
  letter-spacing: 0;
  font-kerning: normal;
  font-variation-settings: 'wght' 300, 'wdth' 46, 'opsz' 96;
  color: color-mix(in srgb, var(--accent) calc(var(--h) * 100%), color-mix(in srgb, var(--ink) calc(var(--c) * 100%), var(--grey)));
}

/* the thin rules: one at each end of the measure and one between every two steps. The outer element is placed
   by the script, the line inside it is the one that feels the blow */
.steps__rules {
  position: absolute;
  inset: calc(var(--size) * -0.16) 0 calc(var(--size) * -0.2);
  pointer-events: none;
}

.rule {
  --a: 0;                 /* written by the script: how much this rule frames the current step */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
}

.rule__line {
  display: block;
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--rule));
  transform-origin: 50% 100%;
}

/* ---------------------------------------------------------------- what is in the step */
.steps__note {
  position: relative;
  height: 22px;
  margin: calc(var(--size) * 0.2 + 12px) 0 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 22px;
  color: var(--note);
  font-variation-settings: 'wght' 420, 'wdth' 100, 'opsz' 14;
}

.note__track {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

/* the words that roll in and out of the note and of the main button */
.roll__item {
  display: block;
  white-space: nowrap;
}

.note__track .roll__item,
.next__text .roll__item {
  position: absolute;
  left: 0;
  top: 0;
}

/* ---------------------------------------------------------------- the two buttons */
.steps__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.back,
.next {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.back {
  gap: 9px;
  padding: 0 16px 0 14px;
  color: var(--ink);
  font-variation-settings: 'wght' 480, 'wdth' 100, 'opsz' 15;
  transition: opacity 0.3s ease, font-variation-settings 0.45s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.back__arrow,
.next__arrow {
  width: 14px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1);
}

.back.is-off {
  opacity: 0.28;
  cursor: default;
}

/* the main button: a pill that swells on a spring while its words widen on the width axis */
.next {
  gap: 10px;
  padding: 0 20px 0 22px;
  color: var(--on-button);
  isolation: isolate;
}

.next__body {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--button);
  transition: transform 0.55s cubic-bezier(0.34, 1.7, 0.64, 1);
}

.next__text {
  position: relative;
  display: block;
  height: 22px;
  overflow: hidden;
  line-height: 22px;
  font-variation-settings: 'wght' 560, 'wdth' 100, 'opsz' 15;
  transition: font-variation-settings 0.45s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.next:active .next__body {
  transform: scale(0.965);
  transition-duration: 0.12s;
}

@media (hover: hover) and (pointer: fine) {
  .back:not(.is-off):hover {
    font-variation-settings: 'wght' 480, 'wdth' 116, 'opsz' 15;
  }

  .back:not(.is-off):hover .back__arrow {
    transform: translateX(-3px);
  }

  .next:hover .next__body {
    transform: scale(1.045, 1.07);
  }

  .next:hover .next__text {
    font-variation-settings: 'wght' 560, 'wdth' 118, 'opsz' 15;
  }

  .next:hover .next__arrow {
    transform: translateX(3px);
  }

  .next:hover:active .next__body {
    transform: scale(0.985, 1);
  }
}

/* the probe the script measures the names in, out of sight */
.probe {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

.probe span {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 100px;
  line-height: 1;
  white-space: nowrap;
  font-kerning: normal;
}

/* ---------------------------------------------------------------- the telephone */
@media (max-width: 520px) {
  .steps__note {
    margin-top: calc(var(--size) * 0.2 + 12px);
    font-size: 13.5px;
  }

  .steps__actions {
    justify-content: space-between;
    margin-top: 22px;
  }

  .back {
    padding-left: 4px;
  }
}