/* Micro-celebration animations for workflow step/stage completion */

@keyframes checkmark-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100px) rotate(720deg); opacity: 0; }
}

@keyframes stage-banner-slide {
  0% { transform: translateY(-20px); opacity: 0; }
  20% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}

@keyframes progress-fill {
  from { width: var(--progress-from, 0%); }
  to { width: var(--progress-to, 0%); }
}

.celebration-checkmark {
  animation: checkmark-pop 0.4s ease-out;
}

.celebration-confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confetti-fall 1.5s ease-in forwards;
}

.stage-complete-banner {
  animation: stage-banner-slide 3s ease-in-out forwards;
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  background: var(--ev-success, #22c55e);
  color: white;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.progress-bar-animated {
  animation: progress-fill 0.8s ease-out forwards;
}