/* 3 STEPS — one horizontal sequence with the road running straight through it.
   The numbers are set on the road itself, so the section reads as three stops
   rather than three cards. */

.steps {
  position: relative;
  z-index: 1;
  padding-block: var(--chapter);
}
.steps__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 6vh, 3.6rem);
}
.steps__head h2 { font-size: var(--t-lg); }
.steps__head h2 em { font-style: normal; color: var(--accent); }

.steps__row {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 3.4rem;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--accent);
}
/* the marker that sits on the road line */
.step::after {
  content: '';
  position: absolute;
  top: .5rem; left: 3.1rem;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 3px var(--ink);
  transform: scale(0);
  transition: transform .5s var(--ease-brake);
}
.steps.is-live .step::after { transform: scale(1); }
.steps.is-live .step:nth-child(2)::after { transition-delay: .12s; }
.steps.is-live .step:nth-child(3)::after { transition-delay: .24s; }

.step h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  margin-bottom: .6rem;
}
.step p { color: var(--ink-70); max-width: 30ch; }

/* the line that joins them, drawn only where the row is horizontal */
.steps__line {
  position: absolute;
  left: 0; right: 0;
  top: 1.06rem;
  height: 3px;
  display: none;
}
.steps__line i {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: repeating-linear-gradient(to right,
    var(--ink-14) 0 14px, transparent 14px 30px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-drive);
}
.steps.is-live .steps__line i { transform: scaleX(1); }

@media (min-width: 840px) {
  .steps__row { grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
  .steps__line { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .step::after { transform: scale(1); }
  .steps__line i { transform: scaleX(1); }
}