Bar Chart Grow

<!-- Bar Chart Grow -->
<div class="nuda-bar-chart" role="img" aria-label="Bar chart">
  <div class="nuda-bar-chart__bar" style="--h: 60%; --d: 0s"></div>
  <div class="nuda-bar-chart__bar" style="--h: 85%; --d: .1s"></div>
  <div class="nuda-bar-chart__bar" style="--h: 45%; --d: .2s"></div>
  <div class="nuda-bar-chart__bar" style="--h: 95%; --d: .3s"></div>
  <div class="nuda-bar-chart__bar" style="--h: 70%; --d: .4s"></div>
  <div class="nuda-bar-chart__bar" style="--h: 55%; --d: .5s"></div>
</div>

/* Bar Chart Grow
   Vertical bars rising from baseline with stagger.
   Customize: --bar-color-from, --bar-color-to, --bar-gap */

.nuda-bar-chart {
  --bar-color-from: #e4ff54;
  --bar-color-to: rgba(228, 255, 84, 0.3);
  --bar-gap: 6px;
  display: flex;
  align-items: flex-end;
  gap: var(--bar-gap);
  width: 100%;
  max-width: 200px;
  height: 100px;
  padding: 4px;
}

.nuda-bar-chart__bar {
  flex: 1;
  height: var(--h, 50%);
  background: linear-gradient(180deg, var(--bar-color-from), var(--bar-color-to));
  border-radius: 3px 3px 1px 1px;
  transform-origin: bottom;
  animation: nuda-bar-grow 2.4s ease-in-out var(--d, 0s) infinite;
  box-shadow: 0 0 8px rgba(228, 255, 84, 0.15);
}

@keyframes nuda-bar-grow {
  0%, 100%   { transform: scaleY(0.15); opacity: 0.5; }
  40%, 70%   { transform: scaleY(1);    opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-bar-chart__bar { animation: none; transform: scaleY(1); opacity: 1; }
}