/* Buyer Celebration Score — Custom Styles */

html { scroll-behavior: smooth; }

button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(224, 168, 46, 0.5);
  outline-offset: 2px;
}

.quiz-option {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.quiz-option:active {
  transform: scale(0.98);
}

#progress-bar {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#milestone-toast {
  will-change: opacity, transform;
}

@media (max-width: 768px) {
  body { touch-action: pan-y; }
}

#score-counter,
#live-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1em;
}

/* Section celebration overlay fade-in */
#section-celebration {
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Vault overlay entrance */
#vault-overlay {
  animation: vaultEnter 0.5s ease-out;
}
@keyframes vaultEnter {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}

/* Score reveal: subtle glow on the big number */
.font-display.text-7xl,
.font-display.text-8xl {
  text-shadow: 0 4px 30px rgba(224, 168, 46, 0.15);
}

/* Make .animate-bounce smoother */
.animate-bounce {
  animation: gentle-bounce 1.4s ease-in-out infinite;
}
@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Hide scrollbar but keep functionality on quiz card */
#quiz-card {
  scroll-behavior: smooth;
}

/* Exit intent modal animation */
#exit-intent-modal {
  animation: fadeIn 0.25s ease-out;
}
#exit-intent-modal > div {
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media print {
  header, footer, [role="navigation"], #vault-overlay, #exit-intent-modal, #section-celebration { display: none !important; }
  body { background: white; }
}