/* The needle and thread steps: a strip of navy wool cut with pinking shears, alone on a black page. The steps to do
   are marked in tailor's chalk, the current one has a ring of red stitches and the needle stuck beside it, the steps
   done are embroidered in satin stitch. */
:root {
  --page: #000000;          /* the page */
  --cloth: #1d2843;         /* the wool of the strip */
  --cloth-deep: #151d33;    /* its shaded lower half */
  --chalk: #b8c6e6;         /* the tailor's chalk: the steps to do and the line to sew */
  --thread: #ff6a58;        /* the thread: the stitches, the ring, the embroidery */
  --thread-deep: #d8473a;   /* the shaded threads of the embroidery */
  --sheen: #ffd9cf;         /* the light running on the silk at the end */
  --steel: #eef1f6;         /* the needle */
  --steel-dark: #8792a6;    /* its shaded edge */
  --ink: #f4efe6;           /* the names of the steps done and the current one */
  --muted: #7d8bb0;         /* the names of the steps to do */
  --say: #a9b3cc;           /* the line under the strip */
  --back-edge: #3a4767;     /* the edge of Back */
  --go-ink: #2a0d08;        /* the words on Continue */
  --focus: #f4efe6;         /* the outline of the keyboard focus */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Encode Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 40px 16px;
}

.order {
  width: min(600px, 100%);
}

/* ---------------------------------------------------------------- the strip of cloth */
.strip {
  --pad: 26px;              /* the cloth left at each end, for the knots */
  --tooth: 4.5px;           /* the teeth of the pinking shears */
  position: relative;
  height: 84px;
  -webkit-tap-highlight-color: transparent;
}

/* the cloth itself: twill lines, a soft light from above, edges cut with pinking shears. The script squeezes it
   along when the thread is pulled at the end */
.strip__cloth {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px 3.2px),
    linear-gradient(180deg, var(--cloth), var(--cloth-deep));
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--tooth)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--tooth)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) 51% repeat-x;
  transform-origin: 0 50%;
}

/* under the steps: the chalk line, the stitches and the folds of the gathered cloth; over them: the needle */
.strip__under,
.strip__over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* the chalk line to sew along, the stitches, the knots and the loose thread */
.seam-chalk {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 1;
  stroke-dasharray: 2.4 3.4;
  opacity: 0.36;
}

.seam-stitch,
.rope {
  fill: none;
  stroke: var(--thread);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seam-stitch {
  stroke-width: 2;
}

.rope {
  stroke-width: 1.5;
}

/* the needle: polished steel, its eye showing the cloth through it, and its shadow on the wool */
.needle__body {
  fill: url(#needle-steel);
}

.needle__eye {
  fill: var(--cloth-deep);
}

.needle__shadow {
  fill: #000000;
}

.steel-hi {
  stop-color: #ffffff;
}

.steel {
  stop-color: var(--steel);
}

.steel-lo {
  stop-color: var(--steel-dark);
}

.sheen-stop {
  stop-color: var(--sheen);
}

/* until the script has laid the seam out, the strip does not show */
.order:not(.is-ready) .strip,
.order:not(.is-ready) .foot {
  visibility: hidden;
}

/* ---------------------------------------------------------------- the steps */
.steps {
  position: relative;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0 var(--pad);
  list-style: none;
}

.step {
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.step__hit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 10px 9px 0;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* a step done can be chosen again: the thread comes out back to it */
.step.is-done .step__hit {
  cursor: pointer;
}

.step__hit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -3px;
}

/* a step done, pointed at or pressed: its patch rises off the cloth a little, ready to be unpicked back to */
.step__patch {
  transition: transform 0.45s cubic-bezier(0.3, 1.7, 0.5, 1), filter 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .step.is-done .step__hit:not(:disabled):hover .step__patch {
    transform: scale(1.08);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
  }
}

.step.is-done .step__hit:not(:disabled):active .step__patch {
  transform: scale(0.93);
  transition-duration: 0.12s;
}

.step__patch {
  flex: none;
  width: 40px;
  height: 40px;
  overflow: visible;
}

.step__chalk {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 1.2;
  stroke-dasharray: 2.6 2.9;
  opacity: 0.5;
}

.step__ring {
  fill: none;
  stroke: var(--thread);
  stroke-width: 2;
  stroke-linecap: round;
}

.step__satin line {
  stroke-width: 1.45;
  stroke-linecap: round;
}

.step__icon {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.62;
  transition: stroke 0.3s ease, opacity 0.3s ease;
}

.step.is-current .step__icon {
  stroke: var(--ink);
  opacity: 1;
}

/* on the embroidery the icon is the cloth left bare between the stitches */
.step.is-done .step__icon {
  stroke: var(--cloth-deep);
  stroke-width: 2;
  opacity: 1;
}

.step__name {
  display: block;
  font-size: 13px;
  font-weight: 460;
  font-stretch: 100%;
  line-height: 16px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.step.is-current .step__name {
  color: var(--ink);
  font-weight: 640;
}

.step.is-done .step__name {
  color: var(--ink);
  font-weight: 520;
}

/* ---------------------------------------------------------------- the line and the two keys */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 16px;
  padding: 0 4px 0 6px;
}

.foot__say {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  color: var(--say);
}

.foot__line {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.foot__keys {
  display: flex;
  flex: none;
  gap: 8px;
}

/* the keys swell like the site's pills: the background bounces, the words widen on the font's width axis */
.key {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 44px;
  padding: 0 20px;
  border: 0;
  background: none;
  font: 600 15px/1 'Encode Sans Variable', system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the background is laid over the whole key, padding included: a positioned child placed in the grid would only
   cover the words' cell */
.key > :not(.key__bg) {
  grid-area: 1 / 1;
}

.key__bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transition: transform 0.5s cubic-bezier(0.3, 1.9, 0.45, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}

.key__text {
  position: relative;
  display: block;
  font-stretch: 100%;
  white-space: nowrap;
  transition: font-stretch 0.45s cubic-bezier(0.3, 1.6, 0.45, 1);
}

.key__clip {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 2px 0;
  /* cut above and below, for the words that roll; at the sides the words may widen into the padding */
  clip-path: inset(0 -40px);
}

.key--back {
  color: var(--ink);
}

.key--back .key__bg {
  box-shadow: inset 0 0 0 1.5px var(--back-edge);
}

.key--next {
  color: var(--go-ink);
}

.key--next .key__bg {
  background: var(--thread);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

/* Continue is a sewn label: a running stitch just inside its edge */
.key--next .key__bg::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(42, 13, 8, 0.3);
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .key:hover .key__bg {
    transform: scale(1.06, 1.1);
  }

  .key:hover .key__text {
    font-stretch: 114%;
  }

  .key--back:hover .key__bg {
    box-shadow: inset 0 0 0 1.5px var(--chalk);
  }
}

.key:active .key__bg {
  transform: scale(0.95);
  transition-duration: 0.12s;
}

.key:focus-visible {
  outline: none;
}

.key:focus-visible .key__bg {
  box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--focus);
}

.key--back:focus-visible .key__bg {
  box-shadow: inset 0 0 0 1.5px var(--back-edge), 0 0 0 2px var(--page), 0 0 0 4px var(--focus);
}

/* on the first step there is nothing to go back to, and once the order is placed neither */
.key--back.is-gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.key--back {
  transition: opacity 0.25s ease;
}

/* without movement the keys do not swell: only their edge and colour answer */
@media (prefers-reduced-motion: reduce) {
  .key__bg,
  .key__text {
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }

  .key:active .key__bg {
    transform: none;
  }
  @media (hover: hover) {
    .key:hover .key__bg {
      transform: none;
    }
  }

  @media (hover: hover) {
    .key:hover .key__text {
      font-stretch: 100%;
    }
  }

  .step__patch {
    transition: filter 0.3s ease;
  }

  .step.is-done .step__hit:not(:disabled):active .step__patch {
    transform: none;
  }
  @media (hover: hover) {
    .step.is-done .step__hit:not(:disabled):hover .step__patch {
      transform: none;
    }
  }
}

/* ---------------------------------------------------------------- a phone */
@media (max-width: 520px) {
  .strip {
    --pad: 20px;
  }

  .step__name {
    font-size: 12.5px;
  }

  .foot {
    flex-wrap: wrap;
    padding: 0 2px;
  }

  .foot__say {
    flex: 1 1 100%;
    text-align: center;
  }

  .foot__keys {
    flex: 1 1 100%;
  }

  .foot__keys .key {
    flex: 1;
  }
}