/* Chart Animation Styles */

.chart-wrapper:not(.animate-in) .highcharts-series rect,
.chart-wrapper:not(.animate-in) .highcharts-series path,
.chart-wrapper:not(.animate-in) .highcharts-series line {
  opacity: 0 !important;
}

/* Base state - charts hidden initially */
.chart-container {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animated state - when chart comes into view */
.chart-container.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation for multiple charts in the same section */
.chart-container:nth-child(1) {
  transition-delay: 0s;
}

.chart-container:nth-child(2) {
  transition-delay: 0.2s;
}

.chart-container:nth-child(3) {
  transition-delay: 0.4s;
}

/* Chart content animation - for elements inside charts */
.chart-container.animate-in .highcharts-container {
  animation: chartFadeIn 1s ease-out 0.3s both;
}

/* Chart title animation */
.chart-container.animate-in h3,
.chart-container.animate-in h4 {
  animation: slideInFromLeft 0.6s ease-out 0.1s both;
}

/* Chart summary animation */
.chart-container.animate-in .c-body {
  animation: slideInFromLeft 0.6s ease-out 0.2s both;
}

/* Chart slug animation */
.chart-container.animate-in .f2.c-tertiary {
  animation: slideInFromLeft 0.6s ease-out both;
}

/* Keyframe animations */
@keyframes chartFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Alternative animations - you can switch these by changing classes */

/* Slide from bottom */
.chart-container.slide-up {
  transform: translateY(50px);
}

.chart-container.slide-up.animate-in {
  transform: translateY(0);
}

/* Scale animation */
.chart-container.scale-in {
  transform: scale(0.8);
}

.chart-container.scale-in.animate-in {
  transform: scale(1);
}

/* Rotate and fade */
.chart-container.rotate-in {
  transform: rotateX(15deg) translateY(30px);
  transform-origin: center top;
}

.chart-container.rotate-in.animate-in {
  transform: rotateX(0deg) translateY(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .chart-container {
    transition: opacity 0.3s ease;
    transform: none;
  }

  .chart-container.animate-in {
    opacity: 1;
    transform: none;
  }

  .chart-container.animate-in .highcharts-container,
  .chart-container.animate-in h3,
  .chart-container.animate-in h4,
  .chart-container.animate-in .c-body,
  .chart-container.animate-in .f2.c-tertiary {
    animation: none;
  }
}

/* Loading state animation */
.chart-container.loading {
  position: relative;
}

.chart-container.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #a3b745;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}