/* "How it gets there": the band of ledger green, four steps on the left and
   California on the right.

   Which step is showing is the section's data-stage, set by journey.js. The
   rules below are written backwards from the end: with no stage at all the
   map is finished, which is what a browser without scripts shows, and each
   earlier stage takes something away. Every dot and line changes by a
   transition, never a keyframe, so pressing a step halfway through another
   simply turns the map towards the new one. */

.journey {
  padding: var(--section) 0;
  background: var(--forest);
  color: var(--on-dark);
}

.journey :focus-visible {
  outline-color: var(--gold);
}

.journey .split {
  align-items: center;
}

.source {
  margin-top: var(--s-4);
  color: var(--on-dark-muted);
  font-size: var(--text-sm);
}

.source span {
  display: block;
}

/* The steps */

.stages {
  margin-top: var(--s-6);
  border-bottom: 1px solid var(--on-dark-rule);
}

.stage {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-3) 0;
  border: 0;
  border-top: 1px solid var(--on-dark-rule);
  background: transparent;
  color: var(--on-dark-muted);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-normal) ease;
}

.stage-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--on-dark-rule);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-normal) ease, color var(--dur-normal) ease, border-color var(--dur-normal) ease;
}

.stage-title {
  display: block;
  font-size: var(--text-md);
  font-weight: 650;
  line-height: 1.3;
}

.stage-text {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* As the page is written, before journey.js has made them work. */
.stage:disabled {
  cursor: default;
}

.stage[aria-current] {
  color: var(--on-dark);
}

.stage[aria-current] .stage-number {
  border-color: var(--on-dark);
  background: var(--on-dark);
  color: var(--forest);
}

.stage[aria-current] .stage-text {
  color: var(--on-dark-muted);
}

.journey-toggle {
  margin-top: var(--s-3);
  padding: var(--s-2) 0;
  border: 0;
  background: transparent;
  color: var(--on-dark-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

/* The map */

.ca-figure {
  position: relative;
  width: min(100%, 30rem);
  margin-inline: auto;
}

.ca-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ca-grain-dot {
  fill: var(--on-dark-muted);
  opacity: 0.45;
}

.ca-outline {
  stroke: var(--on-dark-muted);
  stroke-width: 1.2;
  stroke-linejoin: round;
  opacity: 0.6;
}

/* pathLength="1" on each line makes "1" the whole of it, however long it is:
   an offset of 1 hides the line and 0 draws it. */
.ca-flow,
.ca-return {
  /* The gap is longer than the line: a line not yet drawn must not leave the
     dot of its rounded end behind, least of all a gold one. */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-in-out), opacity var(--dur-normal) ease;
}

.ca-flow {
  stroke: var(--sprout);
  stroke-width: 1.1;
  opacity: 0.45;
}

.ca-return {
  stroke: var(--gold);
  stroke-width: 2.4;
}

.ca-city {
  fill: var(--on-dark);
  fill-opacity: 0.2;
  stroke: var(--on-dark);
  stroke-width: 1.2;
  transition: opacity var(--dur-normal) ease, fill var(--dur-normal) ease, fill-opacity var(--dur-normal) ease,
    stroke var(--dur-normal) ease;
}

.ca-city.is-found {
  fill: var(--gold);
  fill-opacity: 1;
  stroke: var(--gold);
}

.ca-hub {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-normal) ease, transform var(--dur-move) var(--ease-out);
}

.ca-hub-halo {
  fill: var(--forest);
  stroke: var(--on-dark);
  stroke-width: 1.5;
}

.ca-hub-core {
  fill: var(--on-dark);
}

.ca-leader {
  stroke: var(--on-dark-muted);
  stroke-width: 1;
  transition: opacity var(--dur-normal) ease;
}

/* Set in the page's own type rather than inside the drawing, so it stays the
   same size when the map shrinks. The numbers are where the leader line ends. */
.ca-callout {
  position: absolute;
  top: 28.2%;
  left: 47.4%;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.3;
  transition: opacity var(--dur-normal) ease;
}

.ca-callout span {
  display: block;
  color: var(--on-dark-muted);
  font-weight: 400;
}

/* On a phone the steps are above the map and out of sight while it plays, so
   the map says which step it is showing. Beside the list it would only repeat it. */
.ca-caption {
  display: none;
  min-height: 2.6em;
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
}

/* So that twenty dots and lines do not move as one, they go in four turns. */
.ca-city:nth-child(4n + 2),
.ca-flow:nth-child(4n + 2) {
  transition-delay: calc(var(--stagger) * 2);
}

.ca-city:nth-child(4n + 3),
.ca-flow:nth-child(4n + 3) {
  transition-delay: calc(var(--stagger) * 4);
}

.ca-city:nth-child(4n),
.ca-flow:nth-child(4n) {
  transition-delay: calc(var(--stagger) * 6);
}

/* Step 4 is the rules above. Before it, nothing has been traced back. */
.journey:is([data-stage="0"], [data-stage="1"], [data-stage="2"], [data-stage="3"]) .ca-return {
  stroke-dashoffset: 1;
}

.journey:is([data-stage="0"], [data-stage="1"], [data-stage="2"], [data-stage="3"]) .ca-city.is-found {
  fill: var(--on-dark);
  fill-opacity: 0.2;
  stroke: var(--on-dark);
}

/* Before step 3 nothing has been handed over: no lines, and no Sacramento. */
.journey:is([data-stage="0"], [data-stage="1"], [data-stage="2"]) .ca-flow {
  stroke-dashoffset: 1;
}

.journey:is([data-stage="0"], [data-stage="1"], [data-stage="2"]) :is(.ca-hub, .ca-leader, .ca-callout) {
  opacity: 0;
}

.journey:is([data-stage="0"], [data-stage="1"], [data-stage="2"]) .ca-hub {
  transform: scale(0.9);
}

/* At step 1 the money is still where it is owed, and the company still knows
   where you are: the dots are whole. From step 2 they are hollow. */
.journey[data-stage="1"] .ca-city,
.journey[data-stage="1"] .ca-city.is-found {
  fill-opacity: 1;
}

.journey[data-stage="0"] .ca-city {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .stage:hover {
    color: var(--on-dark);
  }

  .journey-toggle:hover {
    color: var(--on-dark);
  }
}

@media (pointer: coarse) {
  .journey-toggle {
    min-height: 2.75rem;
  }
}

@media (max-width: 56rem) {
  .stages {
    margin-top: var(--s-6);
  }

  .ca-figure {
    width: min(100%, 24rem);
  }

  /* Shown even while it is empty: its room is kept, so the first step
     arriving does not push the rest of the page down. */
  .ca-caption {
    display: block;
  }
}