/* VitalsPass landing — race animation + page isolation */

.vitalspass {
  background-color: #f9fafb;
  color: #111827; /* original landing body color (gray-900) */
  /* Body copy matches Heartland / Klaviyo landings */
  font-family: "ProximaNova", "ProximaNovaB", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.vitalspass p,
.vitalspass li,
.vitalspass label,
.vitalspass input,
.vitalspass button,
.vitalspass span,
.vitalspass a {
  font-family: "ProximaNova", "ProximaNovaB", sans-serif;
}

.vitalspass p {
  font-weight: 600;
  line-height: 1.5;
}

/* Titles align with Heartland / Klaviyo landings (Proxima Nova Bold) */
.vitalspass h1,
.vitalspass h2,
.vitalspass h3,
.vitalspass .vitalspass-brand {
  font-family: "ProximaNovaB", "ProximaNova", sans-serif !important;
  /* Beat Tailwind font-extrabold/black: ProximaNovaB is already the bold face */
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}

.vitalspass h1 {
  font-family: "ProximaNovaEB", "ProximaNovaB", "ProximaNova", sans-serif !important;
}

/* How It Works: titles stay white on the dark panel */
.vitalspass section.bg-gray-950 h2,
.vitalspass section.bg-gray-950 h3 {
  color: #fff !important;
}

@keyframes vitalspass-slowLoad {
  0%, 55% { opacity: 0; transform: translateY(6px); }
  62% { opacity: 1; transform: translateY(-8px); }
  68%, 92% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes vitalspass-slowSpinner {
  0%, 55% { opacity: 1; pointer-events: auto; }
  62%, 100% { opacity: 0; pointer-events: none; }
}

@keyframes vitalspass-fastLoad {
  0%, 5% { opacity: 0; }
  22%, 92% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes vitalspass-fastSkeleton {
  0% { opacity: 1; }
  20%, 100% { opacity: 0; pointer-events: none; }
}

.vitalspass .anim-slow-content {
  animation: vitalspass-slowLoad 6.5s infinite ease-in-out;
}

.vitalspass .anim-slow-spinner {
  animation: vitalspass-slowSpinner 6.5s infinite ease-in-out;
}

.vitalspass .anim-fast-content {
  animation: vitalspass-fastLoad 6.5s infinite ease-in-out;
}

.vitalspass .anim-fast-skeleton {
  animation: vitalspass-fastSkeleton 6.5s infinite ease-in-out;
}

/* Sit above Best Worlds navbar when diagnostic modal opens */
.vitalspass #diagnosticModal {
  z-index: 10050;
}