/* A connected path through ECHO, with readable content before and after motion. */
.steps {
  --echo-gap: 32px;
  gap: var(--echo-gap);
}

.steps article {
  --step-color: #65e4f3;
  --next-color: #95bffc;
  --echo-origin: left center;
  --echo-start: scaleX(0);
  --echo-direction: to right;
  --echo-delay: 0ms;
  position: relative;
}

.steps article:nth-child(2) { --step-color: #95bffc; --next-color: #bf9bed; }
.steps article:nth-child(3) { --step-color: #bf9bed; --next-color: #f37ed1; }
.steps article:nth-child(4) { --step-color: #f37ed1; --next-color: #f37ed1; }

.steps article::before,
.steps article::after {
  content: "";
  position: absolute;
  top: 97px;
  left: 0;
  width: calc(100% + var(--echo-gap));
  height: 1px;
  pointer-events: none;
}

.steps article:last-child::before,
.steps article:last-child::after { width: 100%; }
.steps article::before { background: var(--line); }
.steps article::after {
  background: linear-gradient(var(--echo-direction), var(--step-color), var(--next-color));
  transform-origin: var(--echo-origin);
  opacity: .7;
}

.steps b {
  position: relative;
  border-bottom: 0;
  color: var(--step-color);
}

.steps b::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--step-color);
  border-radius: 50%;
  background: var(--step-color);
  box-shadow: 0 0 0 5px var(--surface);
  z-index: 1;
}

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; --echo-gap: 36px; }
  .steps article {
    padding-left: 32px;
    --echo-origin: center top;
    --echo-start: scaleY(0);
    --echo-direction: to bottom;
  }
  .steps b { font-size: 52px; padding-bottom: 0; }
  .steps b span { padding-top: 4px; }
  .steps article::before,
  .steps article::after {
    top: 24px;
    left: 4px;
    width: 1px;
    height: calc(100% + var(--echo-gap));
  }
  .steps article:last-child::before,
  .steps article:last-child::after { width: 1px; height: calc(100% - 24px); }
  .steps b::after { top: 20px; bottom: auto; left: -32px; }
  .steps h3 { margin-top: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .steps.echo-motion article::after {
    transition: transform 650ms ease-out var(--echo-delay);
  }
  .steps.echo-motion article:not(.is-reached)::after {
    transform: var(--echo-start);
  }
  .steps.echo-motion article:not(.is-reached) b::after {
    background: var(--surface);
    border-color: #566379;
  }
  .steps.echo-motion article.is-reached b {
    animation: echo-letter 1100ms ease-out var(--echo-delay) both;
  }
  .steps.echo-motion article.is-reached b::after {
    animation: echo-node 1100ms ease-out var(--echo-delay) both;
  }
}

@keyframes echo-letter {
  0%, 100% { text-shadow: none; }
  38% { text-shadow: 0 0 24px var(--step-color); }
}

@keyframes echo-node {
  0% { background: var(--surface); border-color: #566379; }
  38% {
    background: var(--step-color);
    border-color: var(--step-color);
    box-shadow: 0 0 0 5px var(--surface), 0 0 18px var(--step-color);
  }
  100% { background: var(--step-color); border-color: var(--step-color); }
}