/* ========================================
   QUIZ CAFÉ MOUNJARO — Estilos + Animações
   ======================================== */

/* Timeline stagger animation */
@keyframes timelineItemIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.timeline-item {
  opacity: 0;
  animation: timelineItemIn 350ms ease-out forwards;
}
.timeline-item:nth-child(1) { animation-delay: 0ms; }
.timeline-item:nth-child(2) { animation-delay: 200ms; }
.timeline-item:nth-child(3) { animation-delay: 400ms; }
.timeline-item:nth-child(4) { animation-delay: 600ms; }
.timeline-item:nth-child(5) { animation-delay: 800ms; }
.timeline-item:nth-child(6) { animation-delay: 1000ms; }
.timeline-item:nth-child(7) { animation-delay: 1200ms; }

/* Transições entre etapas */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-60px); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-in { animation: slideInRight 250ms ease-out forwards; }
.slide-out { animation: slideOutLeft 200ms ease-in forwards; }
.fade-in { animation: fadeIn 300ms ease-out forwards; }
.fade-in-up { animation: fadeInUp 300ms ease-out forwards; }

/* CTA pulsante */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.btn-pulse { animation: pulse 2s infinite; }

/* Barra de progresso */
.progress-bar-inner {
  transition: width 600ms ease-out, background-color 500ms ease;
}
@keyframes barPulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.3); }
}
.bar-pulse { animation: barPulse 300ms ease-out; }

/* Notificação topo (slide down/up) */
@keyframes notificationIn {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes notificationOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-100%); }
}
.notification-in { animation: notificationIn 400ms ease-out forwards; }
.notification-out { animation: notificationOut 300ms ease-in forwards; }

/* Feedback legacy (keep for compatibility) */
@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes feedbackOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.feedback-in { animation: feedbackIn 300ms ease-out forwards; }
.feedback-out { animation: feedbackOut 300ms ease-in forwards; }

/* Micro-celebração */
@keyframes celebrateIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
.celebrate { animation: celebrateIn 300ms ease-out forwards; }

/* Loading café pulsante */
@keyframes coffeePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}
.coffee-pulse { animation: coffeePulse 1.2s infinite; }

/* Barras diagnóstico */
@keyframes barGrow {
  from { width: 0%; }
}
.bar-grow {
  animation: barGrow 1.5s ease-out forwards;
  min-height: 16px;
}

/* Barras do diagnóstico precisam ter width 0 inicial e crescer via animation */
#bar-current, #bar-potential {
  width: 0%;
}
#bar-current { animation: barGrow 1.5s ease-out 0.3s forwards; }
#bar-potential { animation: barGrow 1.2s ease-out 1s forwards; }

/* Opção selecionada */
.option-selected {
  border-color: #E85D4A !important;
  background-color: #FEF2F0 !important;
  transform: scale(1.02);
  transition: all 200ms ease;
}

/* Opção hover/active */
.quiz-option {
  transition: all 150ms ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quiz-option:hover {
  transform: translateY(-2px);
  box-shadow: 4px 5px 0px 0px rgba(0,0,0,0.1);
}
.quiz-option:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}

/* CTA button press effect */
.btn-press {
  transition: all 100ms ease;
}
.btn-press:active {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}

/* Slider customizado */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e5e7eb;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E85D4A;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Phase label */
.phase-label {
  transition: all 300ms ease;
}

/* Quiz mode — permite scroll quando conteúdo excede a tela */
.quiz-mode {
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Ativa scroll na oferta */
.offer-mode {
  overflow-y: auto;
  height: auto;
}

/* Timer */
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.timer-pulse { animation: timerPulse 1s infinite; }

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 300ms ease, padding 300ms ease;
}
.faq-answer.open {
  max-height: 200px;
  padding: 0 16px 16px 16px;
}