/* ============================================================
   RACHELEITE — Quiz "Che carattere ha il tuo brand?"
   Prototipo del blocco quiz_engine (DevBrief Cap. 04).
   Esperienza a schermo pieno: una domanda alla volta, risposta
   con un tap, avanzamento automatico, risultato come climax.
   Navigazione: tap, swipe, rotellina, tastiera (1-4, frecce, invio).
   ============================================================ */

html.overlay-open,
html.overlay-open body { overflow: hidden; }

.quiz {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--c-avorio);
  color: var(--c-ink);
}
.quiz[hidden] { display: none; }

/* Graffa in filigrana, presenza costante */
.quiz::before {
  content: "";
  position: absolute;
  right: -12vmax;
  bottom: -14vmax;
  width: 52vmax;
  aspect-ratio: 51 / 52;
  background: url("../img/favicon.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}

/* ---- Barra alta: progresso + contatore + chiusura ---- */
.quiz__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 1rem var(--gutter);
}
.quiz__count {
  font-family: var(--f-display);
  font-size: 1.125rem;
  color: var(--c-bordeaux);
  min-width: 5.5rem;
}
.quiz__progress {
  flex: 1;
  height: 2px;
  background: color-mix(in srgb, var(--c-petrolio) 15%, transparent);
  border-radius: 100vmax;
  overflow: hidden;
}
.quiz__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-terracotta);
  transition: width 450ms var(--ease-out);
}
.quiz__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border: 1.5px solid var(--c-line);
  border-radius: 50%;
  background: none;
  color: var(--c-ink);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.quiz__close:hover { background: var(--c-bordeaux); border-color: var(--c-bordeaux); color: var(--c-avorio); }

/* ---- Palco della domanda ---- */
.quiz__stage {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  padding: var(--space-2) var(--gutter) var(--space-3);
  overflow: hidden;
}
.quiz__screen {
  width: min(58rem, 100%);
  margin-inline: auto;
}
.quiz__kicker {
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--c-bordeaux);
  margin-bottom: var(--space-2);
}
.quiz__question {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  color: var(--c-petrolio);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
  text-wrap: balance;
}

.quiz__options {
  display: grid;
  gap: .8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .quiz__options { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
.quiz__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.35rem;
  background: color-mix(in srgb, var(--c-avorio-alt) 55%, var(--c-avorio));
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-soft);
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.4;
  text-align: left;
  color: var(--c-ink);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast),
              background var(--t-fast);
}
/* Hover solo dove esiste un vero puntatore: su iPhone il tap lascia
   uno stato hover "appiccicoso" che, al cambio domanda, faceva
   sembrare già selezionata l'opzione nella stessa posizione */
@media (hover: hover) and (pointer: fine) {
  .quiz__option:hover { transform: translateY(-3px); border-color: var(--c-bordeaux); }
}
.quiz__option .key {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  font-family: var(--f-display);
  font-size: .95rem;
  color: var(--c-bordeaux);
}
.quiz__option.is-picked {
  background: var(--c-petrolio);
  border-color: var(--c-petrolio);
  color: var(--c-avorio);
}
.quiz__option.is-picked .key {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: var(--c-avorio);
}

/* ---- Barra bassa: indietro + suggerimento gesti ---- */
.quiz__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 1rem var(--gutter) 1.35rem;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.quiz__back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 0;
  padding: .4rem .2rem;
  font: inherit;
  color: var(--c-bordeaux);
  cursor: pointer;
  visibility: hidden;
}
.quiz__back.is-on { visibility: visible; }
.quiz__gesture { text-align: right; }
@media (max-width: 47.9rem) {
  .quiz__gesture { display: none; }
}

/* ---- Risultato ---- */
.quiz__result {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  overflow: auto;
  visibility: hidden;
}
.quiz__result.is-on { visibility: visible; }

/* L'onda di colore che rivela il risultato.
   FIXED, non absolute: se fosse ancorata al contenitore che scorre,
   quando il risultato è più alto dello schermo lo scroll farebbe
   spuntare il fondo avorio sotto l'onda (testo a cavallo di due
   colori). Così invece copre sempre tutto lo schermo. */
.quiz__wash {
  position: fixed;
  inset: 0;
  background: var(--quiz-color, var(--c-petrolio));
  clip-path: circle(0% at 50% 62%);
}
.no-motion .quiz__result.is-on .quiz__wash,
.no-js .quiz__wash { clip-path: none; }

.quiz__result-inner {
  position: relative;
  width: min(52rem, 100%);
  margin: auto;
  padding: clamp(4.5rem, 10vh, 7rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  text-align: center;
  color: var(--quiz-ink, var(--c-avorio));
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}
.quiz__result-kicker {
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  opacity: .8;
}
.quiz__result-name {
  font-family: var(--f-display);
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: .95;
  /* I titoli di base sono petrolio: qui DEVE ereditare il colore
     testo dell'onda (panna sulle onde scure, scuro sulle chiare),
     altrimenti su Esploratore/Saggio/Sovrano sparisce nel fondo */
  color: inherit;
}
.quiz__result-name .hero__line { display: block; overflow: hidden; }
.quiz__result-desc {
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.quiz__result-secondary {
  max-width: 34rem;
  font-size: var(--fs-small);
  opacity: .85;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  padding-top: var(--space-3);
}
.quiz__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.quiz__chips li {
  padding: .35rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 100vmax;
  font-size: var(--fs-small);
}
.quiz__result-invito {
  max-width: 30rem;
  font-size: var(--fs-small);
  opacity: .9;
}
/* Gate della sfumatura secondaria: dentro il risultato, eredita il
   colore del testo dell'onda (funziona su tutte le 12 varianti) */
.quiz__gate {
  width: min(30rem, 100%);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  display: grid;
  gap: .9rem;
  justify-items: center;
}
.quiz__gate-title {
  font-size: var(--fs-small);
  line-height: 1.5;
}
.quiz__gate-form {
  width: 100%;
  display: grid;
  gap: .9rem;
  justify-items: center;
}
.quiz__gate-form input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  color: inherit;
  text-align: center;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
  padding: .45rem 0 .6rem;
}
.quiz__gate-form input[type="email"]::placeholder {
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.quiz__gate-form input[type="email"]:focus-visible {
  outline: none;
  border-bottom-color: currentColor;
}
.quiz__gate .quiz__consent {
  color: inherit;
  opacity: .9;
  text-align: left;
}
.quiz__gate .quiz__consent a { color: inherit; }
.quiz__gate .quiz__capture-status {
  color: inherit;
  opacity: .95;
}
.quiz__gate-alt {
  font-size: var(--fs-small);
  opacity: .85;
}
.quiz__gate-alt a { color: inherit; }

.quiz__result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.quiz__restart {
  background: none;
  border: 0;
  padding: .4rem .2rem;
  font: inherit;
  font-size: var(--fs-small);
  color: inherit;
  opacity: .8;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.quiz__restart:hover { opacity: 1; }
.quiz__result-actions .btn--ghost {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}
.quiz__result-actions .btn--ghost:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
}

/* ---- Cattura email prima del risultato (facoltativa) ---- */
.quiz__capture {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-content: center;
  overflow: auto;
  background: var(--c-avorio);
  padding: var(--space-3) var(--gutter);
}
.quiz__capture.is-on { display: grid; }
.quiz__capture-inner { display: grid; gap: var(--space-2); }
.quiz__capture-note { color: var(--c-ink-soft); max-width: 34rem; }

.quiz__capture-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
  max-width: 34rem;
}
.quiz__capture-field input {
  width: 100%;
  font: inherit;
  font-size: var(--fs-lead);
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--c-petrolio) 40%, transparent);
  padding: .55rem 0 .7rem;
  transition: border-color var(--t-fast) ease;
}
.quiz__capture-field input:focus-visible {
  outline: none;
  border-bottom-color: var(--c-terracotta);
}
.quiz__consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.quiz__consent input { margin-top: .25rem; accent-color: var(--c-terracotta); }
.quiz__consent a { color: var(--c-bordeaux); }

.quiz__capture-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.quiz__skip {
  background: none;
  border: 0;
  padding: .4rem 0;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--c-bordeaux);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.quiz__capture-status {
  font-size: var(--fs-small);
  color: var(--c-bordeaux);
  min-height: 1.4em;
}

/* Pulsazione di attesa prima del reveal ("sto ascoltando le risposte") */
.quiz__thinking {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  background: var(--c-avorio);
}
.quiz__thinking.is-on { display: grid; }
.quiz__thinking-inner {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  color: var(--c-petrolio);
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}
.quiz__thinking-dot {
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-terracotta);
  animation: quiz-pulse 900ms ease-in-out infinite;
}
@keyframes quiz-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz__thinking-dot { animation: none; }
}