/* Kelo motion */

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

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes guide-in {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes tip-in {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.hero .reveal:nth-child(1) { transition-delay: 0.1s; }
.hero .reveal:nth-child(2) { transition-delay: 0.2s; }
.hero .reveal:nth-child(3) { transition-delay: 0.3s; }
.hero .dash.reveal { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .chart__path {
    stroke-dashoffset: 0;
  }

  .chart__dot,
  .chart__guide,
  .chart__tooltip {
    opacity: 1;
  }

  .chart__tooltip {
    transform: translateX(-50%) translateY(0);
  }

  .bar-stack__seg--a { width: 60%; }
  .bar-stack__seg--b { width: 25%; }
  .bar-stack__seg--c { width: 10%; }
  .bars__col span { height: var(--h); }
  .progress__fill[data-w="45"] { width: 45%; }
  .progress__fill[data-w="36"] { width: 36%; }
}