/* =========================================================
   ENGAGEMENT — self-check quiz, myth vs fact, floating
   WhatsApp, count-up stats, steps timeline
   ========================================================= */

/* ---------- Self-check quiz ---------- */
.quiz-section .section-head { margin-bottom: var(--space-6); }
.quiz__hi { text-align: center; color: var(--brand-700); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.quiz {
  max-width: 44rem; margin-inline: auto; padding: clamp(var(--space-5), 4vw, var(--space-7));
  background: var(--color-surface); border-radius: var(--radius-xl, 1.25rem);
  box-shadow: 0 24px 48px -24px rgb(60 60 70 / 0.28); border-top: 5px solid var(--brand-500);
}
.quiz__bar { height: 0.5rem; border-radius: var(--radius-full); background: var(--neutral-100); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), var(--brand-500)); transition: width 400ms var(--ease); }
.quiz__count { margin: var(--space-2) 0 var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-muted); text-align: right; }
.quiz__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__q.is-active { animation: vn-quiz-in 350ms var(--ease); }
.quiz__q legend { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); padding: 0; }
.quiz__question { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem); line-height: 1.25; color: var(--ink-800); }
.quiz__question-hi { color: var(--color-text-muted); font-size: var(--text-md, 1.05rem); }
.quiz__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.quiz__opt {
  min-height: 3.25rem; padding: var(--space-3) var(--space-4); cursor: pointer;
  font: inherit; font-weight: var(--weight-bold); color: var(--ink-800);
  background: var(--neutral-50); border: 2px solid var(--neutral-200); border-radius: var(--radius-lg);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.quiz__opt small { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium, 500); opacity: 0.75; }
.quiz.is-done .quiz__bar { display: none; }
.quiz__opt:hover { border-color: var(--brand-400); background: var(--brand-50); transform: translateY(-2px); }
.quiz__opt:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; }
.quiz__opt.is-chosen { background: var(--brand-500); border-color: var(--brand-500); color: var(--neutral-0); }
.quiz__back { margin-top: var(--space-4); padding: var(--space-1) 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quiz__back:hover { color: var(--brand-700); }
.quiz__result { text-align: left; animation: vn-quiz-in 400ms var(--ease); }
.quiz__result:focus { outline: none; }
.quiz__meter { position: relative; height: 0.75rem; margin-bottom: var(--space-5); border-radius: var(--radius-full); background: linear-gradient(90deg, #5BB974, var(--gold-500) 50%, #D9480F); }
.quiz__meter span { position: absolute; top: 50%; left: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--neutral-0); border: 4px solid var(--ink-800); transform: translate(-50%, -50%); transition: left 900ms var(--ease); }
.quiz__result h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); color: var(--ink-800); margin-bottom: var(--space-2); }
.quiz__result[data-band="high"] h3 { color: #B4380B; }
.quiz__result > p { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.quiz__form { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--brand-50); }
.quiz__form-title { margin-bottom: var(--space-4); }
.quiz__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.quiz__form .btn { margin-top: var(--space-2); }
.quiz__note { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
@keyframes vn-quiz-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .quiz__opts, .quiz__fields { grid-template-columns: 1fr; }
  .quiz__opt { min-height: 3rem; }
  .quiz__opt small { display: inline; margin-left: 0.4rem; }
  .quiz__opt small::before { content: "/ "; }
}

/* ---------- Myth vs fact ---------- */
.myths { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.myth { perspective: 1200px; }
.myth__card {
  position: relative; display: grid; width: 100%; min-height: 15rem; padding: 0; border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer; transform-style: preserve-3d;
  transition: transform 650ms var(--ease);
}
.myth__card.is-flipped { transform: rotateY(180deg); }
.myth__card:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 4px; border-radius: var(--radius-lg); }
.myth__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.myth__front { background: var(--color-surface); box-shadow: var(--shadow-sm); border: 1px solid var(--neutral-200); }
.myth__back { transform: rotateY(180deg); background: linear-gradient(150deg, var(--ink-800), var(--ink-900)); color: var(--neutral-0); }
.myth__tag { align-self: flex-start; padding: 0.2rem 0.7rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.myth__front .myth__tag { background: #FDE7E0; color: #B4380B; }
.myth__back .myth__tag { background: var(--gold-500); color: var(--ink-900); }
.myth__text { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; }
.myth__front .myth__text { color: var(--ink-800); }
.myth__back .myth__text { font-family: var(--font-body, inherit); font-size: var(--text-md, 1.05rem); line-height: 1.55; color: var(--neutral-100); }
.myth__hi { color: var(--color-text-muted); font-size: var(--text-sm); }
.myth__hint { margin-top: auto; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--brand-700); }
.myth__card:hover .myth__front { border-color: var(--brand-300); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.hero__actions--center { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .myth__card, .myth__card.is-flipped { transform: none; }
  .myth__back { transform: none; opacity: 0; }
  .myth__card.is-flipped .myth__back { opacity: 1; }
  .myth__card.is-flipped .myth__front { opacity: 0; }
}

/* ---------- Floating WhatsApp (tablet & desktop; phones use the action bar) ---------- */
.wa-float { position: fixed; right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.wa-float__btn {
  position: relative; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%;
  background: var(--whatsapp); color: var(--neutral-0); box-shadow: 0 10px 24px -8px rgb(31 157 85 / 0.7);
  transition: transform var(--duration) var(--ease);
}
.wa-float__btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--whatsapp); z-index: -1; animation: vn-wa-pulse 2.6s ease-out infinite; }
.wa-float__btn:hover { transform: scale(1.08); }
.wa-float__btn svg { width: 1.9rem; height: 1.9rem; }
.wa-float__dot { position: absolute; top: 0.15rem; right: 0.15rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--brand-500); border: 2px solid var(--neutral-0); }
.wa-float.is-read .wa-float__dot { display: none; }
.wa-float__bubble {
  position: relative; display: flex; gap: var(--space-3); align-items: flex-start; max-width: 18rem;
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) 0.25rem var(--radius-lg);
  background: var(--color-surface); box-shadow: 0 16px 40px -12px rgb(30 30 36 / 0.35); animation: vn-bubble-in 400ms var(--ease);
}
.wa-float__bubble img { flex: 0 0 auto; width: 2.5rem; height: auto; }
.wa-float__bubble p { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-800); }
.wa-float__close { position: absolute; top: 0.35rem; right: 0.35rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; }
.wa-float__close:hover { background: var(--neutral-100); }
.wa-float__close svg { width: 0.9rem; height: 0.9rem; }
@keyframes vn-wa-pulse { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes vn-bubble-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .wa-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-float__btn::before { animation: none; } }

/* ---------- Steps: progress line fills card by card ---------- */
.step {
  overflow: hidden; border-top: 0;
  background-image: linear-gradient(var(--neutral-200), var(--neutral-200));
  background-size: 100% 4px; background-repeat: no-repeat;
}
.step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-500), var(--brand-500));
  transition: width 700ms var(--ease);
}
.step:nth-child(2)::after { transition-delay: 350ms; }
.step:nth-child(3)::after { transition-delay: 700ms; }
.step:nth-child(4)::after { transition-delay: 1050ms; }
.step:nth-child(5)::after { transition-delay: 1400ms; }
.step.is-visible::after { width: 100%; }
.step::before { transition: transform 500ms var(--ease), background 500ms var(--ease); transform: scale(0.85); }
.step.is-visible::before { transform: none; }
@media (prefers-reduced-motion: reduce) { .step::after { width: 100%; transition: none; } .step::before { transform: none; } }