/* ============================================================
   animations.css — Coordination Compression Report
   All keyframes, scroll-driven animations, and transitions.
   Layout and visual styles live in report.css.
   ============================================================ */


/* ------------------------------------------------------------
   1. Keyframe Definitions
   ------------------------------------------------------------ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40%  { transform: translateY(8px); }
  60%  { transform: translateY(4px); }
}

@keyframes drawLine {
  from { stroke-dashoffset: var(--path-length); }
  to   { stroke-dashoffset: 0; }
}

@keyframes tooltipIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInH {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes slideInV {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}


/* ------------------------------------------------------------
   2. Hero Element Staggering
   ------------------------------------------------------------ */

.hero-category {
  animation: fadeInUp 600ms ease-out 200ms both;
}

.hero-title {
  animation: fadeInUp 800ms ease-out 400ms both;
}

.hero-subtitle {
  animation: fadeInUp 600ms ease-out 700ms both;
}

.hero-meta {
  animation: fadeIn 600ms ease-out 1000ms both;
}

.hero-scroll {
  animation: fadeIn 600ms ease-out 1200ms both,
             bounce 2s ease-in-out 1800ms infinite;
}


/* ------------------------------------------------------------
   3. Scroll Reveal
   ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease-out,
              transform 600ms ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 100ms;
}

.reveal-delay-2 {
  transition-delay: 200ms;
}

.reveal-delay-3 {
  transition-delay: 300ms;
}


/* ------------------------------------------------------------
   4. Background Zone Transitions
   ------------------------------------------------------------ */

body {
  transition: background-color 800ms ease;
}


/* ------------------------------------------------------------
   5. SVG Stroke Drawing
   ------------------------------------------------------------ */

/* draw-on-scroll: JS sets stroke-dasharray/dashoffset directly
   via initPathDrawing(), driven by --scroll-progress. */


/* ------------------------------------------------------------
   6. Tooltip Entrance
   ------------------------------------------------------------ */

.math-tooltip {
  animation: tooltipIn 200ms ease-out both;
}


/* ------------------------------------------------------------
   7. Regime Quadrant Build
   ------------------------------------------------------------ */

/* Horizontal axis draws in from the left */
.build-step-1 {
  transform-origin: left center;
  animation: slideInH 500ms ease-out both;
}

/* Vertical axis draws in from the bottom */
.build-step-2 {
  transform-origin: center bottom;
  animation: slideInV 500ms ease-out 300ms both;
}

/* Grid lines fade and scale in */
.build-step-3 {
  animation: popIn 400ms ease-out 600ms both;
}

/* Quadrant labels pop in with staggered delays */
.build-step-4:nth-child(1) { animation: popIn 300ms ease-out 800ms both; }
.build-step-4:nth-child(2) { animation: popIn 300ms ease-out 900ms both; }
.build-step-4:nth-child(3) { animation: popIn 300ms ease-out 1000ms both; }
.build-step-4:nth-child(4) { animation: popIn 300ms ease-out 1100ms both; }


/* ------------------------------------------------------------
   8. Org Chart
   Animation is handled by org-chart.js setting SVG attributes
   directly (no CSS transforms on SVG groups).
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   9. Explorer Pulse
   ------------------------------------------------------------ */

.regime-dot.changed {
  animation: pulse 600ms ease-in-out;
}


/* ------------------------------------------------------------
   10. Objection Card Expand
   ------------------------------------------------------------ */

.objection-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}

.objection-card.open .objection-body {
  max-height: 600px;
}

.objection-card .toggle-icon {
  transition: transform 200ms ease;
}

.objection-card.open .toggle-icon {
  transform: rotate(180deg);
}


/* ------------------------------------------------------------
   11. Progress Bar
   ------------------------------------------------------------ */

.progress-bar {
  transition: width 100ms linear,
              background-color 400ms ease;
}


/* ------------------------------------------------------------
   12. Reduced Motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

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

  .hero-category,
  .hero-title,
  .hero-subtitle,
  .hero-meta,
  .hero-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}