/* ===== Animations & Transitions ===== */

/* Number counter pulse on change */
.stat__value.pulse {
  animation: valuePulse 0.3s ease;
}

@keyframes valuePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Card entrance on stage transitions */
.card {
  animation: cardIn 0.4s ease both;
}

.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.1s; }
.card:nth-child(4) { animation-delay: 0.15s; }
.card:nth-child(5) { animation-delay: 0.2s; }

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

/* Chart container fade in */
.chart-container {
  animation: chartIn 0.5s ease 0.2s both;
}

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

/* Button click ripple */
.btn--fab.clicked {
  animation: fabPulse 0.15s ease;
}

@keyframes fabPulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Project item entrance */
.project-item {
  animation: projectSlide 0.25s ease both;
}

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

/* Progress bar glow when full */
.progress__fill--full {
  box-shadow: 0 0 8px currentColor;
}

/* Trust gain flash */
.trust-flash {
  animation: trustFlash 0.6s ease;
}

@keyframes trustFlash {
  0% { color: var(--accent-amber); text-shadow: 0 0 12px var(--accent-amber); }
  100% { color: var(--accent-blue); text-shadow: none; }
}

/* Stage transition overlay */
.stage-transition {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: stageTransition 1.5s ease both;
  pointer-events: none;
}

.stage-transition__text {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--accent-blue);
  animation: stageTextPulse 1.5s ease both;
}

@keyframes stageTransition {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes stageTextPulse {
  0% { opacity: 0; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1.05); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* Quantum chip glow cycle */
.quantum-chip--active {
  animation: chipGlow 2s ease-in-out infinite alternate;
}

@keyframes chipGlow {
  from { box-shadow: 0 0 4px rgba(88, 166, 255, 0.3); }
  to { box-shadow: 0 0 12px rgba(88, 166, 255, 0.6); }
}

/* Endgame panel dramatic entrance */
#s3-endgame-panel {
  animation: endgameReveal 1s ease both;
}

@keyframes endgameReveal {
  from {
    opacity: 0;
    transform: scale(0.95);
    box-shadow: 0 0 0 rgba(188, 140, 255, 0);
  }
  to {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 30px rgba(188, 140, 255, 0.15);
  }
}

/* Factory visual container */
.factory-visual {
  grid-column: 1 / -1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  height: 100px;
}

.factory-visual canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Combat visual container */
.combat-visual {
  background: #0a0e17;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  height: 140px;
  margin-bottom: var(--space-sm);
}

.combat-visual canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Particle container */
.particle-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 150;
}

/* Milestone particle burst */
.milestone-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  animation: particleBurst 0.8s ease-out forwards;
}

@keyframes particleBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px, 0), var(--py, 0)) scale(0);
  }
}

/* Click spark */
.click-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkFade 0.4s ease-out forwards;
}

@keyframes sparkFade {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px, 0), var(--py, 0)) scale(0.3);
  }
}

/* Smooth number transitions */
.stat__value {
  transition: color 0.2s ease;
}

/* Hover lift for interactive cards */
.card:has(button):hover {
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}