/* Quiz component styles — Tailwind CDN handles utility classes */

/* Animations */
@keyframes floatUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(37, 211, 102, 0.15); }
  50% { box-shadow: 0 0 30px rgba(37, 211, 102, 0.3); }
}

.animate-float-up { animation: floatUp 400ms ease-out both; }
.animate-scale-in { animation: scaleIn 350ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }

/* Option cards */
.quiz-option {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
}
.quiz-option:hover {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}
.quiz-option:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
}
.quiz-option.option-card-selected {
  box-shadow: 0 0 0 1px #167A5A, 0 10px 24px -16px rgba(22, 122, 90, 0.45);
}
.quiz-option:hover .option-marker { transform: translateY(-1px); }
.option-marker { transition: transform 200ms ease, background-color 200ms ease; }

/* Buttons */
.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 18px -10px rgba(22, 122, 90, 0.75);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.btn-primary:hover {
  box-shadow: 0 12px 22px -12px rgba(22, 122, 90, 0.8);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 5px 12px -8px rgba(22, 122, 90, 0.7);
}

.btn-secondary {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
}
.btn-secondary:hover {
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0); }

/* Question title */
.question-title { text-wrap: balance; }

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