/* ==========================================================================
   Design tokens
   All color, spacing, and motion decisions are centralized here so the rest
   of the sheet stays declarative. Change the palette or corner radii once,
   here, rather than hunting through selectors.
   ========================================================================== */
:root {
  /* Warm cream base + soft orange accent, per spec */
  --color-bg: #fffaf0;
  --color-card: #fffdf7;
  --color-card-alt: #fff6e9;
  --color-ink: #3a2e26;
  --color-ink-soft: #8a7a6c;
  --color-accent: #e0793c;
  --color-accent-strong: #c8632a;
  --color-accent-soft: #f4c49a;
  --color-accent-wash: #fdece0;
  --color-border: #f0ddc8;

  /* Shadows are tinted warm, not generic grey */
  --shadow-card: 0 24px 48px -24px rgba(150, 90, 40, 0.28);
  --shadow-btn-hover: 0 10px 22px -10px rgba(224, 121, 60, 0.45);

  /* Custom easing: smooth deceleration for exits, a springy "back" ease
     for anything that should feel alive on the way in. */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius-lg: 24px;   /* major containers */
  --radius-btn: 16px;  /* interactive buttons */

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  padding: 3rem 1.25rem;
}

.page {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ==========================================================================
   Header
   ========================================================================== */
.page-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.page-header h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.1rem;
  margin: 0;
  color: var(--color-ink);
}

.page-subtitle {
  margin: 0 auto;
  max-width: 40ch;
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ==========================================================================
   Quiz card
   ========================================================================== */
.quiz-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.5rem;
}

/* Progress */
.progress-track {
  height: 6px;
  width: 100%;
  background: var(--color-accent-wash);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: inherit;
  transition: width 0.5s var(--ease-smooth);
}

.progress-label {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

/* Scenario text */
.scenario-text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.55;
  color: var(--color-ink);
  margin: 1.75rem 0;

  /* transform/opacity only — cheap for the compositor */
  transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-bounce);
}

/* Choices */
.choices-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-bounce);
}

.choice-btn {
  text-align: left;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--color-border);
  background: #ffffff;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-ink);
  cursor: pointer;
  transition:
    transform 0.25s var(--ease-smooth),
    background-color 0.25s var(--ease-smooth),
    border-color 0.25s var(--ease-smooth),
    box-shadow 0.25s var(--ease-smooth);
}

.choice-btn:hover {
  background: var(--color-accent-wash);
  border-color: var(--color-accent-soft);
  transform: translateY(-2px);
}

.choice-btn:active {
  transform: translateY(0) scale(0.98);
}

.choice-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.choice-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* ==========================================================================
   Turn transitions
   Applied by app.js to #scenario-text and #choices-box on every answer.
   ========================================================================== */
.fade-out-bounce {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  pointer-events: none;
}

.fade-in-pop {
  animation: popIn 0.5s var(--ease-bounce) both;
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.92) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================================
   Results view
   ========================================================================== */
.results-view {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.results-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  margin: 0;
}

.results-intro {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.metric-row { display: flex; flex-direction: column; gap: 0.4rem; }

.metric-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 600;
}

.metric-value { color: var(--color-accent-strong); }

.metric-track {
  height: 10px;
  border-radius: 999px;
  background: var(--color-accent-wash);
  overflow: hidden;
}

.metric-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: inherit;
  transition: width 0.7s var(--ease-smooth);
}

.results-note {
  background: var(--color-card-alt);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink);
}

.restart-btn {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-accent);
  color: #fffaf0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth);
}

.restart-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
  background: var(--color-accent-strong);
}

.restart-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.page-footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.page-footer p { margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 480px) {
  body { padding: 2rem 1rem; }
  .quiz-card { padding: 1.5rem; border-radius: 20px; }
  .page-header h1 { font-size: 1.7rem; }
  .scenario-text { font-size: 1.2rem; }
}

/* ==========================================================================
   Respect reduced-motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}