/* FIXD — how it works.
   Three steps on a yellow progress rail that fills as the section scrolls.
   steps.js writes --p (0 → 1); everything else is pure CSS. */

.steps { background: var(--black); color: var(--white); }

.steps__head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.steps__head h2 { font-size: var(--t-huge); font-variation-settings: 'wdth' 78; }

.steps__list { position: relative; display: grid; gap: 0; }

/* the rail */
.steps__list::before,
.steps__list::after {
  content: '';
  position: absolute;
  left: 13px;
  top: .5rem;
  bottom: .5rem;
  width: 3px;
}
.steps__list::before { background: var(--white-16); }
.steps__list::after {
  background: var(--yellow);
  transform: scaleY(var(--p, 0));
  transform-origin: top center;
  transition: transform .18s linear;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding-block: clamp(1.4rem, 3.5vw, 2.4rem);
  align-items: start;
}
.step__dot {
  position: relative;
  z-index: 2;
  width: 29px; height: 29px;
  margin-top: .35rem;
  border: 3px solid var(--white-16);
  border-radius: 50%;
  background: var(--black);
  transition: border-color var(--dur-sm) var(--ease-snap), background var(--dur-sm) var(--ease-snap);
}
.step__dot::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--yellow);
  transform: scale(0);
  transition: transform var(--dur-sm) var(--ease-snap);
}
.step.is-on .step__dot { border-color: var(--yellow); }
.step.is-on .step__dot::after { transform: scale(1); }

.step__num {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 80;
  line-height: .8;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 2px var(--white-16);
  transition: color var(--dur-md) var(--ease-snap), -webkit-text-stroke-color var(--dur-md) var(--ease-snap);
}
.step.is-on .step__num { color: var(--yellow); -webkit-text-stroke-color: var(--yellow); }

.step__title {
  grid-column: 2;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  font-variation-settings: 'wdth' 80;
  margin-top: .35rem;
}
.step__copy { grid-column: 2; color: var(--white-72); max-width: 42ch; margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .steps__list::after { transform: scaleY(1); transition: none; }
  .step__dot, .step__dot::after, .step__num { transition: none; }
}

@media (min-width: 900px) {
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
  /* the rail turns horizontal and runs across the top of the three columns */
  .steps__list::before,
  .steps__list::after {
    left: 0; right: 0; top: 14px;
    bottom: auto;
    width: auto; height: 3px;
  }
  .steps__list::after { transform: scaleX(var(--p, 0)); transform-origin: left center; }
  .step { grid-template-columns: minmax(0, 1fr); padding-block: 0; }
  .step__dot { margin-top: 0; }
  .step__num, .step__title, .step__copy { grid-column: 1; }
  .step__num { margin-top: 1.5rem; }
}