/* animations: scroll reveals + pipeline + chart draw */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 450ms; }

/* hero entrance */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: none; }
}
.hero > * { animation: heroUp 0.9s var(--ease) both; }
.hero > *:nth-child(2) { animation-delay: 120ms; }
.hero > *:nth-child(3) { animation-delay: 240ms; }
.hero > *:nth-child(4) { animation-delay: 360ms; }

/* svg chart draw-in (triggered by .is-in on the figure) */
.chart .bar { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease); }
.chart.is-in .bar { transform: scaleX(1); }
.chart .bar--v { transform: scaleY(0); transform-origin: bottom center; transition: transform 1.1s var(--ease); }
.chart.is-in .bar--v { transform: scaleY(1); }
.chart .gauge-arc { transition: stroke-dashoffset 1.4s var(--ease); }
.chart text { opacity: 0; transition: opacity 0.6s var(--ease) 0.7s; }
.chart.is-in text { opacity: 1; }

/* pipeline flow pulse */
.stage::before {
  content: "";
  position: absolute;
  left: -1px; top: 20%;
  height: 60%;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-med);
}
.stage.is-in::before { opacity: 1; }

@keyframes dashFlow { to { stroke-dashoffset: -20; } }
.flow-line { stroke-dasharray: 6 6; animation: dashFlow 1.2s linear infinite; }

@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.pulse { animation: pulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}