/**
 * Quiz Microinteractions - High-converting subtle animations
 * CollectorHQ Debt Relief Quiz
 */

/* ============================================
   1. Progress Bar - Gradient + Glow
   ============================================ */
#quiz-progress-fill {
  background: linear-gradient(90deg, 
    var(--color-primary) 0%, 
    hsl(var(--primary-h, 217) calc(var(--primary-s, 91%) + 10%) calc(var(--primary-l, 60%) + 10%)) 100%
  );
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px var(--color-primary-alpha, rgba(59, 130, 246, 0.5));
  position: relative;
}

#quiz-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color-primary);
  opacity: 0.9;
}

/* ============================================
   2. Input Focus States - Glow Effect
   ============================================ */
.calc-input,
.calc-select {
  transition: all 0.2s ease-out;
}

.calc-input:focus,
.calc-select:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 
              0 0 20px rgba(59, 130, 246, 0.1);
  border-color: var(--color-primary);
}

/* Range slider track glow */
input[type="range"]::-webkit-slider-thumb {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 10px var(--color-primary);
}

/* ============================================
   3. Radio/Checkbox - Selection Animation
   ============================================ */
label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
  transition: all 0.2s ease-out;
}

label:has(input[type="radio"]):hover,
label:has(input[type="checkbox"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

label:has(input[type="radio"]:checked),
label:has(input[type="checkbox"]:checked) {
  animation: selectPulse 0.3s ease-out;
}

@keyframes selectPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Checkbox checkmark draw animation */
input[type="checkbox"]:checked {
  animation: checkDraw 0.2s ease-out;
}

@keyframes checkDraw {
  0% { 
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% { 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ============================================
   4. Card Hover - Lift Effect
   ============================================ */
.card {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 
              0 4px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Package step cards - stronger lift */
#results-package-steps .card {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.2s ease-out;
}

#results-package-steps .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.12);
}

/* ============================================
   5. Button Microinteractions
   ============================================ */

/* Primary button - magnetic hover effect */
button[data-hs-stepper-next-btn],
#quiz-calculate-btn,
#results-final-cta,
.btn-primary,
[class*="bg-primary"][class*="text-primary-foreground"] {
  position: relative;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  overflow: hidden;
}

button[data-hs-stepper-next-btn]:hover,
#quiz-calculate-btn:hover,
#results-final-cta:hover,
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

button[data-hs-stepper-next-btn]:active,
#quiz-calculate-btn:active,
#results-final-cta:active,
.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Ripple effect on click */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ============================================
   6. Staggered Reveal Animations
   ============================================ */
.stagger-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerIn 0.4s ease-out forwards;
}

.stagger-reveal:nth-child(1) { animation-delay: 0ms; }
.stagger-reveal:nth-child(2) { animation-delay: 80ms; }
.stagger-reveal:nth-child(3) { animation-delay: 160ms; }
.stagger-reveal:nth-child(4) { animation-delay: 240ms; }
.stagger-reveal:nth-child(5) { animation-delay: 320ms; }
.stagger-reveal:nth-child(6) { animation-delay: 400ms; }

@keyframes staggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Results page sections stagger */
#quiz-results > div {
  opacity: 0;
  transform: translateY(15px);
}

#quiz-results.revealed > div {
  animation: fadeSlideIn 0.5s ease-out forwards;
}

#quiz-results.revealed > div:nth-child(1) { animation-delay: 0ms; }
#quiz-results.revealed > div:nth-child(2) { animation-delay: 100ms; }
#quiz-results.revealed > div:nth-child(3) { animation-delay: 200ms; }
#quiz-results.revealed > div:nth-child(4) { animation-delay: 300ms; }
#quiz-results.revealed > div:nth-child(5) { animation-delay: 400ms; }
#quiz-results.revealed > div:nth-child(6) { animation-delay: 500ms; }
#quiz-results.revealed > div:nth-child(7) { animation-delay: 600ms; }
#quiz-results.revealed > div:nth-child(8) { animation-delay: 700ms; }
#quiz-results.revealed > div:nth-child(9) { animation-delay: 800ms; }

@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   7. Animated Counter
   ============================================ */
.count-up {
  display: inline-block;
}

/* ============================================
   8. Metric Value Pulse on Load
   ============================================ */
.metric-pulse {
  animation: metricPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes metricPop {
  0% { 
    transform: scale(0.8); 
    opacity: 0; 
  }
  60% { 
    transform: scale(1.1); 
  }
  100% { 
    transform: scale(1); 
    opacity: 1; 
  }
}

/* ============================================
   9. Success Confetti Container
   ============================================ */
#confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ============================================
   10. MicroInsight Slide-in
   ============================================ */
[id^="q"][id$="-insight"] {
  transition: all 0.3s ease-out;
  transform: translateX(-10px);
  opacity: 0;
}

[id^="q"][id$="-insight"]:not(.hidden) {
  transform: translateX(0);
  opacity: 1;
}

/* ============================================
   11. Package Hero Gradient Border
   ============================================ */
#results-package-hero {
  position: relative;
  background: linear-gradient(var(--color-card), var(--color-card)) padding-box,
              linear-gradient(135deg, var(--color-primary), var(--color-success)) border-box;
  border: 2px solid transparent;
}

/* ============================================
   12. Step Number Circle Animation
   ============================================ */
#results-package-steps .size-10 {
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

#results-package-steps .card:hover .size-10 {
  transform: scale(1.1);
  background-color: var(--color-primary);
  color: white;
}

/* ============================================
   13. Skeleton Loading State
   ============================================ */
.skeleton {
  background: linear-gradient(90deg, 
    var(--color-muted) 25%, 
    var(--color-surface) 50%, 
    var(--color-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-metric {
  height: 2em;
  width: 80%;
  margin: 0 auto;
}

/* ============================================
   14. Smooth Scroll Behavior
   ============================================ */
html {
  scroll-behavior: smooth;
}

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

/* ============================================
   15. Urgency Banner Pulse
   ============================================ */
#results-urgency-banner {
  animation: urgencyPulse 2s ease-in-out infinite;
}

@keyframes urgencyPulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2);
  }
  50% { 
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

/* ============================================
   16. Tooltip Styles
   ============================================ */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: var(--color-foreground);
  color: var(--color-background);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-out;
  z-index: 100;
  pointer-events: none;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* ============================================
   17. Value Metric Hover Glow
   ============================================ */
#results-package-hero .bg-muted {
  transition: all 0.2s ease-out;
}

#results-package-hero .bg-muted:hover {
  background-color: var(--color-primary);
  transform: scale(1.02);
}

#results-package-hero .bg-muted:hover > div:first-child {
  color: rgba(255, 255, 255, 0.8);
}

#results-package-hero .bg-muted:hover > div:last-child {
  color: white;
}