@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
  50% { box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.15); }
}
@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
}

.animate-fade-in-up { animation: fadeInUp 0.5s ease-out both; }
.animate-fade-in { animation: fadeIn 0.4s ease-out both; }
.animate-scale-in { animation: scaleIn 0.4s ease-out both; }
.animate-slide-right { animation: slideInRight 0.4s ease-out both; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* Custom selection pill styles */
.selection-pill {
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}
.selection-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.selection-pill.selected {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Rating stars */
.star-btn { transition: all 0.15s ease; cursor: pointer; }
.star-btn:hover { transform: scale(1.2); }
.star-btn.active { color: #f59e0b; transform: scale(1.1); }

/* Progress bar */
.progress-fill {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa);
}

/* Textarea & inputs */
.survey-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.survey-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Result card */
.result-card {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border: 1px solid #e0e7ff;
}

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4338ca 100%);
}

/* Skill bar animation */
@keyframes fillBar {
  from { width: 0; }
}
.skill-bar-fill {
  animation: fillBar 1s ease-out both;
}