/* Pet Personality Quiz styles — extends /styles.css */

.muted { color: var(--ink-soft); font-weight: 400; font-size: .85em; }

/* ---------- intro card ---------- */
.quiz-intro {
  text-align: center;
}
.intro-lead {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 1.05rem;
}
.quiz-intro .field {
  display: block;
  text-align: left;
  margin: 0 0 1rem;
}
.quiz-intro .field > span {
  display: block;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: .4rem;
}
.quiz-intro input[type="text"] {
  width: 100%;
  padding: .7rem .8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fffdfa;
  font: inherit;
  color: var(--ink);
}
.quiz-intro input[type="text"]:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* ---------- progress bar ---------- */
.progress-wrap { margin: 0 0 1rem; }
.progress-text {
  font-size: .85rem;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.progress-bar {
  height: 8px;
  background: var(--muted);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, #ff6fa3 100%);
  border-radius: 999px;
  width: 0%;
  transition: width .35s ease;
}

/* ---------- question card ---------- */
.quiz-question {
  position: relative;
}
.question-text {
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--brand-ink);
  margin: 0 0 1rem;
}
.answers {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}
@media (min-width: 600px) {
  .answers { grid-template-columns: 1fr 1fr; }
}
.answer-btn {
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .04s ease;
  line-height: 1.35;
}
.answer-btn:hover {
  border-color: var(--brand);
  background: #fff8ef;
}
.answer-btn:active { transform: translateY(1px); }
.answer-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.answer-text { display: inline; }

.quiz-nav {
  margin-top: 1rem;
}

/* Question entrance animation */
.quiz-question.q-enter .question-text,
.quiz-question.q-enter .answers > * {
  animation: fadeUp .3s ease both;
}
.quiz-question.q-enter .answers > *:nth-child(1) { animation-delay: .05s; }
.quiz-question.q-enter .answers > *:nth-child(2) { animation-delay: .10s; }
.quiz-question.q-enter .answers > *:nth-child(3) { animation-delay: .15s; }
.quiz-question.q-enter .answers > *:nth-child(4) { animation-delay: .20s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- result card (designed as a share card) ---------- */
.result { margin: 1rem 0 1.5rem; }
.share-card {
  text-align: center;
  background: linear-gradient(180deg, #fff5e8 0%, #fff 60%, #fff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.2rem 1.2rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.share-card::before {
  /* subtle confetti dots in the background */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,138,61,.18) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 22%, rgba(124,77,255,.16) 0 5px, transparent 6px),
    radial-gradient(circle at 30% 80%, rgba(58,163,163,.15) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 85%, rgba(255,111,163,.15) 0 5px, transparent 6px);
  pointer-events: none;
}
.share-card > * { position: relative; z-index: 1; }

.share-card-emoji {
  font-size: clamp(4rem, 12vw, 5.5rem);
  line-height: 1;
  margin: 0 0 .5rem;
}
.share-card-subject {
  margin: 0 0 .25rem;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .85rem;
}
.share-card-title {
  font-size: clamp(1.7rem, 5.5vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 .55rem;
  color: var(--brand-ink);
  font-weight: 800;
}
.share-card-tagline {
  margin: 0 0 .85rem;
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
}
.share-card-description {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.55;
}
.share-card-brand {
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--ink-soft);
  opacity: .6;
  letter-spacing: .04em;
}

/* Reveal animation */
.share-card.reveal .share-card-emoji {
  animation: emojiPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
.share-card.reveal .share-card-title {
  animation: fadeUpBig .5s ease .15s both;
}
.share-card.reveal .share-card-tagline,
.share-card.reveal .share-card-description {
  animation: fadeUpBig .5s ease .3s both;
}
.share-card.reveal .breakdown {
  animation: fadeUpBig .5s ease .45s both;
}
@keyframes emojiPop {
  0%   { opacity: 0; transform: scale(.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeUpBig {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- top-3 breakdown ---------- */
.breakdown {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  margin: .3rem 0 0;
}
.breakdown-row { }
.breakdown-row-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  margin-bottom: .25rem;
}
.breakdown-emoji {
  font-size: 1.1rem;
  width: 1.4rem;
  text-align: center;
}
.breakdown-label {
  flex: 1;
  color: var(--ink);
  font-weight: 600;
}
.breakdown-row.winner .breakdown-label { color: var(--brand-ink); font-weight: 800; }
.breakdown-pct {
  color: var(--ink-soft);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.breakdown-row.winner .breakdown-pct { color: var(--brand-ink); }
.breakdown-bar {
  height: 6px;
  background: var(--muted);
  border-radius: 999px;
  overflow: hidden;
}
.breakdown-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width .6s ease;
}
.breakdown-row.winner .breakdown-fill {
  background: linear-gradient(90deg, var(--brand) 0%, #ff6fa3 100%);
}

/* ---------- result actions ---------- */
.result-actions { margin: 1rem 0 .65rem; }
.result-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.result-secondary-actions .btn {
  flex: 1 1 auto;
}
.btn-cta {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, #7c4dff 0%, #ad55e6 50%, #ff6fa3 100%);
  color: #fff !important;
  font-weight: 700;
  padding: .9rem 1.2rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(124, 77, 255, .35);
}
.btn-cta:hover { filter: brightness(1.05); }

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .share-card.reveal .share-card-emoji,
  .share-card.reveal .share-card-title,
  .share-card.reveal .share-card-tagline,
  .share-card.reveal .share-card-description,
  .share-card.reveal .breakdown,
  .quiz-question.q-enter .question-text,
  .quiz-question.q-enter .answers > * {
    animation: none;
  }
}