:root {
  --gm-duration-instant: 100ms;
  --gm-duration-fast: 160ms;
  --gm-duration-base: 240ms;
  --gm-duration-slow: 400ms;
  --gm-duration-cinematic: 600ms;
  --gm-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --gm-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --gm-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --gm-stagger-container: 80ms;
  --gm-stagger-item: 40ms;
}

.gm-enter {
  animation: gm-enter var(--gm-duration-fast) var(--gm-ease-enter) both;
}

.gm-enter-slow {
  animation: gm-enter var(--gm-duration-base) var(--gm-ease-enter) both;
}

@keyframes gm-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gm-chart-wipe {
  clip-path: inset(0 100% 0 0);
  animation: gm-wipe var(--gm-duration-slow) var(--gm-ease-standard) forwards;
}

@keyframes gm-wipe {
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-enter,
  .gm-enter-slow,
  .gm-chart-wipe {
    animation: gm-fade var(--gm-duration-instant) linear both;
    clip-path: none;
  }
  @keyframes gm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}