/* ==========================================================================
   Chart entrance motion. Compositor-friendly properties only
   (stroke-dashoffset, transform, opacity).
   ========================================================================== */

.chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Line charts draw themselves in. */
.chart__line {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: draw 1100ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Donut sweeps from empty to value. */
.chart__ring {
  stroke-dashoffset: 320;
  animation: ring 1100ms var(--ease-out-expo) 160ms forwards;
}

@keyframes ring {
  to {
    stroke-dashoffset: var(--dash);
  }
}

.ring-seg {
  opacity: 0;
  animation: seg-in 420ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i) * 90ms + 140ms);
}

@keyframes seg-in {
  from {
    opacity: 0;
    transform: rotate(-8deg);
    transform-origin: 60px 60px;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Bars and capsules rise from the baseline. */
.bar3d,
.capsule {
  transform-origin: center bottom;
  animation: rise 560ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i) * 55ms + 100ms);
}

@keyframes rise {
  from {
    transform: scaleY(0.02);
    opacity: 0;
  }
}

.chart__tip {
  animation: tip-in 380ms var(--ease-out-expo) 900ms both;
}

@keyframes tip-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Reservoir surface drifts sideways one full wavelength. */
.liquid__wave {
  animation: drift 5s linear infinite;
}

@keyframes drift {
  to {
    transform: translateX(-80px);
  }
}

.chart--liquid {
  width: 100%;
  max-width: 160px;
}