/* fx.css · draw/chart-bars, bars grow to their heights as they arrive · 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 an aria-hidden SVG laid out in percentages, so it
   stretches to any width while its type stays its own size. Each bar stands on the
   baseline (its foot runs under a clip, so only the top is rounded). Unanimated,
   the bars are simply at their heights. Still to come with motion allowed, they
   wait flat and grow up from the baseline one after another, and the end value
   fades in last. Timing follows --fx-dur. */
[data-fx~="draw/chart-bars"] {
  --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-bars"] [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-bars"] [data-fx-chart] {
  display: block;
  width: 100%;
  max-width: var(--fx-chart-max, 56rem);
  height: var(--fx-chart-height, clamp(15rem, 34vw, 22rem));
  overflow: visible;
}
[data-fx~="draw/chart-bars"] [data-fx-grid] { stroke: var(--fx-chart-grid, #c7ccd8); stroke-width: 1; }
[data-fx~="draw/chart-bars"] [data-fx-chart] 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-bars"] [data-fx-chart] [data-fx-value] {
  fill: var(--fx-chart-ink, #111117);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
[data-fx~="draw/chart-bars"] [data-fx-bars] rect {
  fill: var(--fx-bar, #2340ff);
  translate: -12px 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(2) { --fx-i: 1; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(3) { --fx-i: 2; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(4) { --fx-i: 3; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(5) { --fx-i: 4; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(6) { --fx-i: 5; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(7) { --fx-i: 6; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(8) { --fx-i: 7; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(9) { --fx-i: 8; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(10) { --fx-i: 9; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(11) { --fx-i: 10; }
[data-fx~="draw/chart-bars"] [data-fx-bars] rect:nth-child(12) { --fx-i: 11; }
[data-fx~="draw/chart-bars"] [data-fx-value] { --fx-i: 12; }

html.fx-armed [data-fx~="draw/chart-bars"].is-pending [data-fx-bars] rect { scale: 1 0; }
html.fx-armed [data-fx~="draw/chart-bars"].is-pending [data-fx-value] { opacity: 0; }
html.fx-armed [data-fx~="draw/chart-bars"].is-in [data-fx-bars] rect {
  transition: scale var(--fx-bar-dur, var(--fx-dur)) var(--fx-ease);
  transition-delay: calc(var(--fx-lead, 0ms) + var(--fx-i) * var(--fx-bar-stagger, calc(var(--fx-dur) * 0.12)));
}
html.fx-armed [data-fx~="draw/chart-bars"].is-in [data-fx-value] {
  transition: opacity var(--fx-bar-dur, var(--fx-dur)) var(--fx-ease);
  transition-delay: calc(var(--fx-lead, 0ms) + 6 * var(--fx-bar-stagger, calc(var(--fx-dur) * 0.12)));
}