/* fx.css · draw/journey-line, a line draws down the page alongside the steps · owner: Lizzy East · all rights reserved */

/* A tall SVG line (pathLength="1") runs beside a list of steps, over a pale track.
   The scroll draws it (a CSS view timeline): its tip keeps pace with the middle of
   the screen, so the line reaches each step as you do. Each step is its own
   waiting block (data-fx-step) and fades up as it arrives. Where scroll timelines
   are missing, or motion is off, the line is simply drawn and the steps simply
   there. The line is decoration: aria-hidden. */
[data-fx~="draw/journey-line"]:not([data-fx-step]) {
  position: relative;
  padding-left: var(--fx-journey-gutter, clamp(3rem, 8vw, 5.5rem));
}
[data-fx~="draw/journey-line"] [data-fx-line] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--fx-journey-gutter, clamp(3rem, 8vw, 5.5rem)) / 2 - 20px);
  width: 40px;
  height: 100%;
  overflow: visible;
  stroke-dashoffset: 0;
}
[data-fx~="draw/journey-line"] [data-fx-line] path {
  fill: none;
  stroke-width: var(--fx-journey-width, 3);
  stroke-linecap: round;
}
[data-fx~="draw/journey-line"] [data-fx-line] path:first-child { stroke: var(--fx-journey-track, #c7ccd8); }
[data-fx~="draw/journey-line"] [data-fx-line] path:last-child {
  stroke: var(--fx-journey-ink, #2340ff);
  stroke-dasharray: 1;
}
[data-fx~="draw/journey-line"] ol {
  display: grid;
  gap: var(--fx-journey-gap, clamp(3.5rem, 12vh, 7rem));
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-fx~="draw/journey-line"][data-fx-step] { position: relative; display: grid; gap: 0.6rem; max-width: var(--fx-journey-measure, 40rem); }
[data-fx~="draw/journey-line"][data-fx-step] > * { margin: 0; }
[data-fx~="draw/journey-line"][data-fx-step] h3 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.05; }
/* The stop on the line for each step. */
[data-fx~="draw/journey-line"][data-fx-step]::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: calc(var(--fx-journey-gutter, clamp(3rem, 8vw, 5.5rem)) / -2 - 10px);
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 3px solid var(--fx-journey-ink, #2340ff);
  border-radius: 50%;
  background: var(--fx-journey-stop, #f4f5f7);
}

/* Each step fades up from a touch smaller, growing from its stop on the line, so
   it never reaches over whatever sits below it. */
[data-fx~="draw/journey-line"][data-fx-step] { transform-origin: 0 0; }
html.fx-armed [data-fx~="draw/journey-line"][data-fx-step].is-pending {
  opacity: 0;
  scale: var(--fx-journey-from, 0.96);
}
html.fx-armed [data-fx~="draw/journey-line"][data-fx-step].is-in {
  transition: opacity var(--fx-dur) var(--fx-ease), scale var(--fx-dur) var(--fx-ease);
  transition-delay: calc(var(--fx-delay) + var(--fx-i) * var(--fx-stagger));
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="draw/journey-line"] [data-fx-line] {
      animation: fx-journey-draw linear both;
      animation-timeline: view();
      animation-range: cover 50vh cover calc(100% - 50vh);
    }
  }
}
/* On the <svg>: stroke-dashoffset inherits, so the drawn path follows it. */
@keyframes fx-journey-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}