/* fx.css · draw/chart-line, a line chart draws itself from left to right · owner: Lizzy East · all rights reserved */

/* The numbers live in a real <table> (data-fx-data), hidden from sight but read by
   screen readers. The picture is two aria-hidden SVGs stacked: the chart itself
   (the line, pathLength="1", and its wash), which scales as one piece, and on top
   the marks, laid out in percentages so the points and type keep their own size at
   any width. Unanimated, the chart is simply complete. Still to come with motion
   allowed, the line draws from left to right, then the points pop in one after
   another and the wash and the end value fade up. Timing follows --fx-dur. */
[data-fx~="draw/chart-line"] {
  --fx-lead: calc(var(--fx-delay) + var(--fx-i) * var(--fx-stagger));
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin: 0;
}
[data-fx~="draw/chart-line"] [data-fx-data] {
  position: absolute;
  left: 0;
  display: block;          /* a table cannot shrink below its content; a block can be clipped */
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[data-fx~="draw/chart-line"] [data-fx-plot] { position: relative; width: 100%; max-width: var(--fx-chart-max, 56rem); }
[data-fx~="draw/chart-line"] [data-fx-chart] { display: block; width: 100%; height: auto; }
[data-fx~="draw/chart-line"] [data-fx-marks] { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[data-fx~="draw/chart-line"] [data-fx-grid] { stroke: var(--fx-chart-grid, #c7ccd8); stroke-width: 1; vector-effect: non-scaling-stroke; }
[data-fx~="draw/chart-line"] [data-fx-line] {
  fill: none;
  stroke: var(--fx-line, #2340ff);
  stroke-width: var(--fx-line-width, 3);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
[data-fx~="draw/chart-line"] [data-fx-points] circle {
  fill: var(--fx-line, #2340ff);
  stroke: var(--fx-chart-surface, #f4f5f7);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
[data-fx~="draw/chart-line"] [data-fx-marks] text {
  fill: var(--fx-chart-text, #4a4f5e);
  font-family: var(--fx-chart-font, var(--demo-sans, system-ui, sans-serif));
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
[data-fx~="draw/chart-line"] [data-fx-marks] [data-fx-value] {
  fill: var(--fx-chart-ink, #111117);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(2) { --fx-i: 1; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(3) { --fx-i: 2; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(4) { --fx-i: 3; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(5) { --fx-i: 4; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(6) { --fx-i: 5; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(7) { --fx-i: 6; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(8) { --fx-i: 7; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(9) { --fx-i: 8; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(10) { --fx-i: 9; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(11) { --fx-i: 10; }
[data-fx~="draw/chart-line"] [data-fx-points] circle:nth-child(12) { --fx-i: 11; }

html.fx-armed [data-fx~="draw/chart-line"].is-pending [data-fx-line] { stroke-dashoffset: 1; }
html.fx-armed [data-fx~="draw/chart-line"].is-pending :is([data-fx-area], [data-fx-value]) { opacity: 0; }
html.fx-armed [data-fx~="draw/chart-line"].is-pending [data-fx-points] circle { scale: 0; }
html.fx-armed [data-fx~="draw/chart-line"].is-in [data-fx-line] {
  transition: stroke-dashoffset var(--fx-line-dur, calc(var(--fx-dur) * 2)) cubic-bezier(0.35, 0.1, 0.35, 1);
  transition-delay: var(--fx-lead, 0ms);
}
html.fx-armed [data-fx~="draw/chart-line"].is-in [data-fx-points] circle {
  transition: scale calc(var(--fx-dur) * 0.6) cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(var(--fx-lead, 0ms) + var(--fx-line-dur, calc(var(--fx-dur) * 2)) * 0.75 + var(--fx-i) * var(--fx-point-stagger, calc(var(--fx-dur) * 0.1)));
}
html.fx-armed [data-fx~="draw/chart-line"].is-in :is([data-fx-area], [data-fx-value]) {
  transition: opacity var(--fx-dur) var(--fx-ease);
  transition-delay: calc(var(--fx-lead, 0ms) + var(--fx-line-dur, calc(var(--fx-dur) * 2)) * 0.8);
}