/* ============================================================================
   GARAGE GALS . GARAGE PERSONALITY QUIZ
   ----------------------------------------------------------------------------
   Lives in the dark #quiz band. A card flips between question and result.
   Built by js/quiz.js into [data-quiz]. Depends on tokens.css.
   ============================================================================ */

.quiz {
  max-width: 44rem;
  margin-inline: auto;
}

.quiz__card {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  background: color-mix(in srgb, var(--ink-700) 82%, transparent);
  border: 1px solid rgba(245, 239, 228, 0.14);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-5);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  overflow: hidden;
  isolation: isolate;
}
.quiz__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-red-flare);
  background-size: 200% 100%;
  animation: rail-shimmer 6s linear infinite;
}

/* progress */
.quiz__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.quiz__steps { display: flex; gap: 0.4rem; }
.quiz__pip {
  width: 2rem; height: 4px;
  border-radius: var(--r-pill);
  background: rgba(245, 239, 228, 0.2);
  transition: background var(--dur-3) var(--ease-standard);
}
.quiz__pip.is-active { background: var(--red-400); box-shadow: var(--glow-red-sm); }
.quiz__count {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.55);
}

/* question */
.quiz__stage { position: relative; }
.quiz__q {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--weight-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--cream-50);
  margin-bottom: var(--space-lg);
}
.quiz__q em { font-style: italic; color: var(--red-400); }

.quiz__options { display: grid; gap: 0.75rem; }
.quiz__opt {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  padding: 1.05rem 1.2rem;
  border-radius: var(--r-md);
  border: 1.5px solid rgba(245, 239, 228, 0.16);
  background: rgba(245, 239, 228, 0.03);
  color: var(--cream-100);
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out-back),
              border-color var(--dur-2), background var(--dur-2), color var(--dur-2);
}
.quiz__opt:hover {
  transform: translateX(6px);
  border-color: var(--red-400);
  background: color-mix(in srgb, var(--red-500) 14%, transparent);
  color: var(--cream-50);
}
.quiz__opt .emoji {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(245, 239, 228, 0.08);
  font-size: 1.2rem;
  transition: background var(--dur-2);
}
.quiz__opt:hover .emoji { background: var(--red-500); }
.quiz__opt .key {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: rgba(245, 239, 228, 0.4);
}

/* enter/leave transitions */
.quiz__stage.is-leaving .quiz__q,
.quiz__stage.is-leaving .quiz__options { opacity: 0; transform: translateY(-10px); }
.quiz__q, .quiz__options {
  transition: opacity var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo);
}
.quiz__stage.is-entering .quiz__q,
.quiz__stage.is-entering .quiz__options { opacity: 0; transform: translateY(12px); }

/* result */
.quiz__result { text-align: center; }
.quiz__result-emoji {
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  line-height: 1;
  margin-bottom: var(--space-sm);
  display: inline-block;
  animation: float-y 5s var(--ease-in-out-cubic) infinite;
}
.quiz__result-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--red-300);
}
.quiz__result-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--cream-50);
  margin-block: var(--space-2xs) var(--space-sm);
}
.quiz__result-title em { font-style: italic; color: var(--red-400); }
.quiz__result-body { color: rgba(245, 239, 228, 0.78); max-width: 38ch; margin-inline: auto; line-height: var(--lh-relax); }
.quiz__result-rec {
  margin: var(--space-lg) auto 0;
  max-width: 32rem;
  padding: var(--space-md);
  border-radius: var(--r-md);
  background: rgba(245, 239, 228, 0.05);
  border: 1px solid rgba(245, 239, 228, 0.12);
}
.quiz__result-rec .label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.5);
}
.quiz__result-rec .rec {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semi);
  color: var(--cream-50);
  margin-top: 0.2rem;
}
.quiz__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}
.quiz__retake {
  background: none;
  color: rgba(245, 239, 228, 0.6);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin-top: var(--space-md);
  cursor: pointer;
}
.quiz__retake:hover { color: var(--cream-50); }

@media (max-width: 520px) {
  .quiz__opt .key { display: none; }
}