/* ==========================================================================
   Lead qualification questionnaire (Plan Finder)
   Enterprise-grade step transitions + progress
   ========================================================================== */

@keyframes lqEnterForward {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lqEnterBack {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lqExitForward {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes lqExitBack {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}
@keyframes lqShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.lead-qualifier .lq-enter-forward {
  animation: lqEnterForward 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lead-qualifier .lq-enter-back {
  animation: lqEnterBack 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lead-qualifier .lq-exit-forward {
  animation: lqExitForward 0.2s ease-in both;
  pointer-events: none;
}
.lead-qualifier .lq-exit-back {
  animation: lqExitBack 0.2s ease-in both;
  pointer-events: none;
}

/* Tailwind-friendly aliases used by JSX class toggles */
.lead-qualifier .lq-step-panel {
  will-change: opacity, transform;
}

.lead-qualifier .lq-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: lqShimmer 1.4s ease-in-out infinite;
}
.dark .lead-qualifier .lq-skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .lead-qualifier .lq-enter-forward,
  .lead-qualifier .lq-enter-back,
  .lead-qualifier .lq-exit-forward,
  .lead-qualifier .lq-exit-back,
  .lead-qualifier .lq-skeleton {
    animation: none;
  }
}