/* 30, how (site/sections/30-how.html). Linked by scripts/build-home.mjs.
   Compact, about half a viewport-height with its section padding.
   Timing: a flow act's --sc-p is 0.35 when the section has fully entered
   and 0.65 when its top reaches the top of the screen, so the fill runs
   from 0.1 to 0.52 and the last node lights while the strip is still in
   the upper half of the screen.

   No JS. The engine writes --sc-p on #how every frame because the section
   is data-sc-act="flow" (site/engine/scrollcraft.js); custom properties
   inherit, so any descendant can read it. Every scroll-driven value below
   is one clamp() on that variable: the line's fill and each dot's lit
   opacity, keyed to that dot's own position along the line. Nothing here
   is transitioned, so nothing can lag the scroll. */

.vs-how { border-top: 1px solid var(--vs-line); }

.vs-how__head { margin: 0 0 var(--vs-head-gap); max-width: 52ch; }
.vs-how__title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--vs-h2); line-height: var(--sc-leading-tight);
  letter-spacing: var(--vs-display-track); text-wrap: balance;
}
.vs-how__lede { margin: var(--sc-2) 0 0; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------- the line -- */
.vs-how__track { position: relative; padding-top: 0.75rem; }

/* top: the track's own padding-top plus half the dot's height (1rem), so
   the line's centre lands on the dots' centre whatever the dot size below
   is built from. Absolute offsets are measured from the padding edge, so
   the padding-top has to be added back in by hand. */
.vs-how__line {
  position: absolute; left: 0; right: 0; top: calc(0.75rem + 0.5rem);
  display: block; height: 2px; overflow: hidden;
  background: var(--vs-line-strong);
}
.vs-how__fill {
  display: block; height: 100%; background: var(--sc-accent);
  width: clamp(0%, calc((var(--sc-p, 0) - 0.1) / 0.42 * 100%), 100%);
}

.vs-how__nodes {
  position: relative; z-index: 1;
  display: flex; flex-direction: row; justify-content: space-between;
  gap: var(--sc-4); margin: 0; padding: 0; list-style: none;
}
.vs-how__node {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-2);
  max-width: 17rem;
}
.vs-how__node:nth-child(2) { align-items: center; text-align: center; }
.vs-how__node:last-child { align-items: flex-end; text-align: right; }

/* ------------------------------------------------------------- the dot -- */
.vs-how__dot { position: relative; flex: none; width: 1rem; height: 1rem; }
.vs-how__dot-base {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--sc-canvas); border: 1.5px solid var(--vs-line-strong);
}
.vs-how__dot-fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--sc-accent); opacity: 0;
}
.vs-how__dot-ring {
  position: absolute; inset: -0.3rem; border-radius: 50%;
  border: 1.5px solid var(--vs-ok); opacity: 0;
}

/* Discover: the start of the line, lit with no scroll needed. */
.vs-how__node[data-vs-how-step="discover"] .vs-how__dot-fill { opacity: 1; }
/* Build: sits at the line's midpoint, lights when the fill reaches it. */
.vs-how__node[data-vs-how-step="build"] .vs-how__dot-fill {
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.3) / 0.04), 1);
}
/* You approve: the far end. Same fill, plus the ring: accent dot, green
   ring, the cursor's own pairing (css/cursor-trail.css). */
.vs-how__node[data-vs-how-step="approve"] .vs-how__dot-fill,
.vs-how__node[data-vs-how-step="approve"] .vs-how__dot-ring {
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.5) / 0.04), 1);
}

.vs-how__name {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--sc-t-lg); line-height: 1.15; letter-spacing: -0.015em;
}
.vs-how__desc { margin: 0; max-width: 30ch; font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }

/* --------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  .vs-how__track { padding-top: 0; }
  .vs-how__line {
    left: calc(0.5rem - 1px); right: auto; top: 0.5rem; bottom: 0.5rem; width: 2px; height: auto;
  }
  .vs-how__fill {
    width: 100%;
    height: clamp(0%, calc((var(--sc-p, 0) - 0.1) / 0.42 * 100%), 100%);
  }
  .vs-how__nodes { flex-direction: column; gap: var(--sc-5); }
  /* Dot in its own column, name over line beside it. */
  .vs-how__node,
  .vs-how__node:nth-child(2),
  .vs-how__node:last-child {
    display: grid; grid-template-columns: 1rem minmax(0, 1fr);
    column-gap: var(--sc-4); row-gap: 0.2rem;
    align-items: start; text-align: left; max-width: none;
  }
  .vs-how__dot { grid-row: 1 / span 2; margin-top: 0.2rem; }
  .vs-how__name { font-size: var(--sc-t-base); }
  .vs-how__desc { max-width: 40ch; }
}