/* ============================================
   TAILWIND CONFIG + CUSTOM STYLES
   ============================================ */

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Option Card Styles */
.option-card {
  transition: all 0.2s ease;
  border: 2px solid #e5e7eb;
}
.option-card:hover {
  border-color: #059669;
  border-width: 2.5px;
  transform: translateY(-1px);
}
.option-card.just-selected {
  border-color: #059669;
  border-width: 2.5px;
  background-color: #d1fae5;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
.option-card.just-selected:hover {
  border-color: #059669;
  border-width: 2.5px;
  transform: none;
}

/* ============================================
   ANIMATIONS
   ============================================ */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Slide animations for question transitions */
@keyframes slideOutLeft {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-60px); }
}
@keyframes slideOutRight {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(60px); }
}
@keyframes slideInFromRight {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromLeft {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}
.slide-out-left { animation: slideOutLeft 0.25s ease-out forwards; }
.slide-out-right { animation: slideOutRight 0.25s ease-out forwards; }
.slide-in-from-right { animation: slideInFromRight 0.3s ease-out forwards; }
.slide-in-from-left { animation: slideInFromLeft 0.3s ease-out forwards; }

/* Floating emoji animation */
@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(0.5); }
  50% { opacity: 1; transform: translateY(-20px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-50px) scale(1); }
}
.floating-emoji {
  position: absolute;
  pointer-events: none;
  animation: floatUp 0.8s ease-out forwards;
  font-size: 1.25rem;
  z-index: 10;
}

/* Button bounce animation */
@keyframes buttonBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.98); }
}
.btn-bounce { animation: buttonBounce 0.3s ease-out; }