/**
 * ============================================================================
 * Troodi Digital — Hero & Data Panel Animations
 * Bloomberg/FT Terminal Editorial Aesthetics
 * Pure CSS Keyframes & SVG Stroke Transitions
 * ============================================================================
 */

/* 1. Subtle Live Indicator Pulse */
@keyframes liveDotPulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(47, 125, 92, 0.6);
  }
  50% {
    opacity: 0.4;
    box-shadow: 0 0 0 3px rgba(47, 125, 92, 0);
  }
}

.status-dot {
  animation: liveDotPulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 2. SVG Line Chart Path Drawing */
.chart-line {
  /* stroke-dasharray and stroke-dashoffset initialized by JS or fallback */
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-line.chart-drawn {
  stroke-dashoffset: 0;
}

/* 3. Area Fill Fade-In (after line draws) */
.chart-area {
  opacity: 0;
  transition: opacity 1.2s ease-out 1.2s;
}

.chart-area.area-visible {
  opacity: 1;
}

/* 4. Chart Hollow Markers & Peak Callout Reveal */
.chart-markers circle {
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.chart-markers.markers-visible circle {
  opacity: 1;
}

.chart-peak-callout {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.6s ease-out 1.8s, transform 0.6s ease-out 1.8s;
}

.chart-peak-callout.callout-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 5. Metrics Counter Values */
.panel-metric-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* 6. Motion Preference Query */
@media (prefers-reduced-motion: reduce) {
  .status-dot {
    animation: none !important;
    opacity: 1 !important;
  }

  .chart-line {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .chart-area {
    opacity: 1 !important;
    transition: none !important;
  }

  .chart-markers circle,
  .chart-peak-callout {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}