/* ============================================================
   animations.css — Keyframes + entrance effects (light theme)
   ============================================================ */

@keyframes value-flash {
  0%   { background: rgba(245,158,11,0.18); color: #92400E;
         box-shadow: 0 0 0 4px rgba(245,158,11,0.10); transform: scale(1.14); }
  60%  { background: rgba(245,158,11,0.06); color: var(--indigo);
         box-shadow: none; transform: scale(1.02); }
  100% { background: var(--indigo3); color: var(--indigo);
         transform: scale(1); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.86) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

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

@keyframes shake-in {
  0%   { opacity: 0; transform: translateX(-8px); }
  30%  { transform: translateX(5px); }
  55%  { transform: translateX(-2px); }
  75%  { transform: translateX(1px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes node-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(239,68,68,0.55)); }
  50%       { opacity: 0.45; filter: none; }
}

@keyframes dash-flow {
  to { stroke-dashoffset: -16; }
}

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

@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Metric pills — staggered pop-in */
.metric-pill { animation: pop-in 0.28s var(--ease-out) backwards; }
.metric-pill:nth-child(1) { animation-delay: 0.04s; }
.metric-pill:nth-child(2) { animation-delay: 0.10s; }
.metric-pill:nth-child(3) { animation-delay: 0.16s; }
.metric-pill:nth-child(4) { animation-delay: 0.22s; }
.metric-pill:nth-child(5) { animation-delay: 0.28s; }

/* Step cards — staggered fade-up */
.step-card { animation: fade-up var(--dur-slow) var(--ease-out) backwards; }
.steps-inner .step-card:nth-child(1) { animation-delay: 0.06s; }
.steps-inner .step-card:nth-child(2) { animation-delay: 0.12s; }
.steps-inner .step-card:nth-child(3) { animation-delay: 0.18s; }
.steps-inner .step-card:nth-child(4) { animation-delay: 0.24s; }
.steps-inner .step-card:nth-child(5) { animation-delay: 0.30s; }
.steps-inner .step-card:nth-child(6) { animation-delay: 0.36s; }
.steps-inner .step-card:nth-child(7) { animation-delay: 0.42s; }

.tips-box { animation: fade-up var(--dur-slow) var(--ease-out) 0.36s backwards; }

/* System buttons — slide in from right */
.system-btn { animation: slide-in-right var(--dur) var(--ease-out) backwards; }
.system-btn:nth-child(1) { animation-delay: 0.04s; }
.system-btn:nth-child(2) { animation-delay: 0.09s; }
.system-btn:nth-child(3) { animation-delay: 0.14s; }
.system-btn:nth-child(4) { animation-delay: 0.19s; }
.system-btn:nth-child(5) { animation-delay: 0.24s; }
.system-btn:nth-child(6) { animation-delay: 0.29s; }
.system-btn:nth-child(7) { animation-delay: 0.34s; }
.system-btn:nth-child(8) { animation-delay: 0.39s; }
.system-btn:nth-child(9) { animation-delay: 0.44s; }

/* Component cards */
.comp-card { animation: fade-up var(--dur-slow) var(--ease-out) backwards; }
.comp-card:nth-child(2) { animation-delay: 0.07s; }
.comp-card:nth-child(3) { animation-delay: 0.14s; }
.comp-card:nth-child(4) { animation-delay: 0.21s; }

.rp-content > * { animation: fade-in var(--dur) var(--ease-out); }

/* Arch edges */
.arch-edge {
  stroke-dasharray: 4 4;
  animation: dash-flow 1.4s linear infinite;
}

/* Bottleneck node pulse */
.arch-node-bottleneck {
  animation: node-pulse 1.3s var(--ease-in-out) infinite;
}

/* Header entrance */
.header { animation: fade-in var(--dur-slow) var(--ease-out); }

/* Page-level entrance for dashboard */
.plan-widget    { animation: fade-up var(--dur-slow) var(--ease-out) 0.04s backwards; }
.xp-bar-wrap    { animation: fade-up var(--dur-slow) var(--ease-out) 0.10s backwards; }
.mission-section{ animation: fade-up var(--dur-slow) var(--ease-out) 0.16s backwards; }
.mentor-card    { animation: fade-up var(--dur-slow) var(--ease-out) 0.22s backwards; }

/* ── Slider / param-change mode — fast reactive update ───── */
/* System switch keeps full stagger; slider/select uses these. */

@keyframes metric-update {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

@keyframes content-fade {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

body.is-computing .metric-pill {
  animation: metric-update 0.13s var(--ease-out) !important;
}
body.is-computing .step-card {
  animation: content-fade 0.10s var(--ease-snappy) !important;
}
body.is-computing .comp-card {
  animation: content-fade 0.08s var(--ease-snappy) !important;
}
body.is-computing .rp-content > * {
  animation: content-fade 0.08s var(--ease-snappy) !important;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}