/* Section 03, Method: how a project runs, drawn as a power-up sequence.
   Each step is a rail that comes up after the one before it and stays up, the
   way a board's supplies come up in order. Loads after site.css, whose tokens
   and section furniture it uses. js/method.js arms the rails and powers them
   once, the first time the sequence comes into view; without it they read
   powered, as the markup does. */

.sequence,
.facts {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.sequence {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
}

/* The rising edge of rail i sits at --edge; every rail draws a dotted guide
   at all five edges, so the guides run on down the sequence like the cursors
   of a timing diagram. */
.rail {
  --i: 0;
  --edge: calc(6% + var(--i) * 19%);
  --wave-top: 24px;
  --wave-h: 20px;
  display: grid;
  grid-template-columns: 148px minmax(0, 0.75fr) minmax(0, 1.25fr);
  column-gap: clamp(24px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
}
.rail:nth-child(2) { --i: 1; }
.rail:nth-child(3) { --i: 2; }
.rail:nth-child(4) { --i: 3; }
.rail:nth-child(5) { --i: 4; }

.rail-id {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 14px;
  margin-top: calc(var(--wave-top) + var(--wave-h) / 2 - 7px);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.rail-led {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px 1px rgba(111, 224, 160, 0.6);
}

.rail-wave {
  position: relative;
  align-self: stretch;
  min-height: calc(var(--wave-top) + var(--wave-h) + 8px);
  background-image:
    repeating-linear-gradient(var(--line-2) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(var(--line-2) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(var(--line-2) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(var(--line-2) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(var(--line-2) 0 2px, transparent 2px 6px);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: 6% 0, 25% 0, 44% 0, 63% 0, 82% 0;
}
/* Low until the edge, then the edge and the high level to the end. */
.rail-wave::before,
.rail-wave::after {
  content: "";
  position: absolute;
  top: var(--wave-top);
  height: var(--wave-h);
}
.rail-wave::before {
  left: 0;
  width: var(--edge);
  border-bottom: 1px solid var(--text-3);
}
.rail-wave::after {
  left: var(--edge);
  right: 0;
  border-top: 2px solid var(--green);
  border-left: 2px solid var(--green);
  filter: drop-shadow(0 0 4px rgba(111, 224, 160, 0.5));
}

.rail-text { padding: 20px 0 24px; }
.rail-text h3 { font: 600 21px/1.2 var(--sans); }
.rail-text p {
  margin-top: 6px;
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Armed and not yet in view: every rail low, its LED dark. */
.sequence.is-armed:not(.is-on) .rail-wave::before { width: 100%; }
.sequence.is-armed:not(.is-on) .rail-wave::after { opacity: 0; }
.sequence.is-armed:not(.is-on) .rail-id { color: var(--text-3); }
.sequence.is-armed:not(.is-on) .rail-led {
  background: #243029;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* Powering on, one rail after another: each switches high at its moment, as a
   signal does, and its LED comes on. The transitions live here alone, so
   arming the rails draws nothing. */
.sequence.is-on .rail {
  --at: calc(200ms + var(--i) * 280ms);
}
.sequence.is-on .rail-wave::before,
.sequence.is-on .rail-wave::after {
  transition: width 0s var(--at), opacity 0s var(--at);
}
.sequence.is-on .rail-id,
.sequence.is-on .rail-led {
  transition: color 180ms ease var(--at), background-color 180ms ease var(--at), box-shadow 180ms ease var(--at);
}

/* The facts beside the method: who you talk to, in which language, where. */
.facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 40px;
  margin-bottom: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.facts div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  background: var(--bg-2);
}
.facts dt {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.facts dd {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--text);
}

/* Narrower, the name and its rail share a line and the step reads below. */
@media (max-width: 1099px) {
  .rail {
    --wave-top: 18px;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    column-gap: 20px;
  }
  .rail-wave { min-height: calc(var(--wave-top) + var(--wave-h) + 14px); }
  .rail-text { grid-column: 1 / -1; padding: 4px 0 22px; }
  /* Five facts in two columns: the direct line takes a row of its own. */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 699px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
}