/* ============================================================
   LAYOUT — cenário de fundo, palco do quiz, grid de telas
   ============================================================ */

.quiz-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--color-forest-900);
  background-image: url("../assets/img/bg-quizz-mobile.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: scene-fade-in var(--duration-page) var(--ease-out-editorial) forwards;
}

@keyframes scene-fade-in {
  to {
    opacity: 1;
  }
}

.quiz-scene__layer {
  position: absolute;
  inset: -3%;
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  will-change: transform;
}

@media (min-width: 900px) {
  .quiz-scene {
    background-image: url("../assets/img/bg-quizz-desk.webp");
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-scene {
    opacity: 1;
    animation: none;
  }
}

/* Palco fixo (telas de pergunta): sem scroll de documento */
.quiz-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(4vh, 4.5rem) var(--space-3) 6vh;
  overflow: hidden;
}

.quiz-stage[data-scroll-mode="auto"] {
  position: static;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: visible;
  padding: max(6vh, 4.5rem) var(--space-3) 6vh;
}

.quiz-frame {
  position: relative;
  width: 100%;
  max-width: 560px;
  transform: translateY(-3%);
}

/* Sem caixa própria, o texto precisa caber dentro da área em branco real
   da foto — mais estreita do que parecia quando um cartão opaco cobria
   qualquer sobra. Larguras calibradas a partir da posição real dessa
   área nas duas imagens (ver bg/), não um valor arbitrário. */
@media (min-width: 640px) and (max-width: 899px) {
  .quiz-frame {
    max-width: 340px;
    transform: translateY(2%);
  }
}

@media (max-width: 639px) {
  .quiz-frame {
    max-width: 250px;
    transform: translateY(2%);
  }
}

/* Vinheta escura sutil atrás do texto — não é uma caixa (sem contorno
   nem cor sólida): garante contraste onde o texto claro cruza os fios
   dourados ou o brilho da colagem, já que o comprimento do texto é
   variável. Se removida, nada quebra — é só uma rede de segurança. */
.quiz-frame::before {
  content: "";
  position: absolute;
  inset: -8% -14%;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    rgba(4, 8, 4, 0.55) 0%,
    rgba(4, 8, 4, 0.32) 45%,
    rgba(4, 8, 4, 0.1) 70%,
    transparent 85%
  );
  pointer-events: none;
}

/* O resultado é o único texto de comprimento variável (4-6 parágrafos +
   bloco de oferta) — pode ficar mais alto que a viewport, então rola.
   Ganha um painel de vidro fosco próprio (em vez da vinheta pontual das
   outras telas) para manter contraste do início ao fim da rolagem. */
.quiz-frame--paper {
  padding: var(--space-4) 0 var(--space-6);
}

/* O resultado carrega seu próprio fundo (acima), então não precisa se
   espremer na largura estreita calibrada para caber dentro da foto —
   usa uma medida de leitura confortável em vez disso. */
@media (min-width: 640px) and (max-width: 899px) {
  .quiz-frame--paper {
    max-width: 420px;
  }
}

@media (max-width: 639px) {
  .quiz-frame--paper {
    max-width: 320px;
  }
}

.quiz-frame--paper::before {
  content: "";
  position: absolute;
  inset: -4vh -6% 0;
  z-index: -1;
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 80px);
  mask-image: linear-gradient(to bottom, transparent, black 80px);
}

/* Grid de telas: todas ocupam a mesma célula, para transição sem reflow.
   min-height + grid-template explícitos garantem que cada .quiz-screen
   (item de grid, stretch por padrão) sempre preencha a viewport inteira —
   isso importa porque, durante a animação, o .quiz-screen ganha um
   transform e vira o containing block do seu .quiz-stage[position:fixed]
   filho; sem altura garantida aqui, o palco colapsaria durante a transição. */
.quiz-deck {
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.quiz-deck > .quiz-screen {
  grid-area: 1 / 1;
}

.quiz-screen {
  min-width: 0;
}

.quiz-screen[hidden] {
  display: none !important;
}

/* Indicador de progresso (fio dourado).
   position:fixed + selo de fundo translúcido: a colagem por trás é
   imprevisível (ora clara, ora escura), então o indicador carrega seu
   próprio contraste garantido em vez de confiar no que estiver atrás. */
.quiz-progress {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: calc(100% - 2 * var(--space-3));
  max-width: 400px;
  padding: 0.5rem var(--space-2);
  border-radius: 999px;
  background: rgba(16, 25, 15, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.quiz-progress[hidden] {
  display: none !important;
}

.quiz-progress__track {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(243, 239, 228, 0.25);
  overflow: hidden;
}

.quiz-progress__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-gold-600), var(--color-gold-300));
  transition: transform var(--duration-thread-progress) var(--ease-in-out-soft);
}

.quiz-progress__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-offwhite);
  text-align: center;
}

.quiz-progress__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--color-gold-300);
  text-align: center;
  font-style: italic;
}