/* ============================================================
   TRANSITIONS — coreografia de entrada/saída entre telas
   Apenas transform/opacity (compositor), nunca width/height/top/left.
   ============================================================ */

.quiz-screen {
  /* transform: none em repouso — um transform não-"none" aqui criaria um
     containing block novo para os .quiz-stage[position:fixed] filhos e
     colapsaria a altura do palco. Só ganha transform durante a animação
     (classes .is-entering/.is-leaving abaixo). */
  transform: none;
  opacity: 1;
}

.quiz-screen.is-leaving {
  animation: screen-exit var(--duration-transition-exit) var(--ease-in-editorial) forwards;
  pointer-events: none;
}

.quiz-screen.is-entering {
  animation: screen-enter var(--duration-transition) var(--ease-out-editorial) forwards;
}

.quiz-screen.is-entering[data-parity="odd"] {
  animation-name: screen-enter-odd;
}

.quiz-screen.is-leaving[data-parity="odd"] {
  animation-name: screen-exit-odd;
}

@keyframes screen-exit {
  to {
    transform: translate(-40px, -24px) rotate(-4deg) scale(0.96);
    opacity: 0;
  }
}

@keyframes screen-exit-odd {
  to {
    transform: translate(40px, -24px) rotate(4deg) scale(0.96);
    opacity: 0;
  }
}

@keyframes screen-enter {
  from {
    transform: translate(30px, 28px) rotate(3deg) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes screen-enter-odd {
  from {
    transform: translate(-30px, 28px) rotate(-3deg) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-screen.is-leaving,
  .quiz-screen.is-entering,
  .quiz-screen.is-entering[data-parity="odd"],
  .quiz-screen.is-leaving[data-parity="odd"] {
    animation-name: screen-fade-only;
    animation-duration: var(--duration-transition);
  }
  @keyframes screen-fade-only {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ---- Entrada do Hero: título/parágrafo em stagger ---- */
.hero-reveal > * {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  animation: hero-item-in var(--duration-page) var(--ease-out-editorial) forwards;
}

.hero-reveal > *:nth-child(1) {
  animation-delay: 80ms;
}
.hero-reveal > *:nth-child(2) {
  animation-delay: 200ms;
}
.hero-reveal > *:nth-child(3) {
  animation-delay: 320ms;
}
.hero-reveal > *:nth-child(4) {
  animation-delay: 440ms;
}
.hero-reveal > *:nth-child(5) {
  animation-delay: 560ms;
}

@keyframes hero-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reveal > * {
    filter: none;
    transform: none;
    animation-duration: 160ms;
  }
}

/* ---- Revelação do resultado: parágrafos em cascata ---- */
.result-reveal > * {
  opacity: 0;
  transform: translateY(10px);
  animation: result-item-in var(--duration-result-reveal) var(--ease-out-editorial) forwards;
}

.result-reveal > *:nth-child(1) {
  animation-delay: 0ms;
}
.result-reveal > *:nth-child(2) {
  animation-delay: 200ms;
}
.result-reveal > *:nth-child(3) {
  animation-delay: 330ms;
}
.result-reveal > *:nth-child(4) {
  animation-delay: 460ms;
}
.result-reveal > *:nth-child(5) {
  animation-delay: 590ms;
}
.result-reveal > *:nth-child(6) {
  animation-delay: 720ms;
}

@keyframes result-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-reveal > * {
    transform: none;
    animation-duration: 120ms;
  }
}

/* ---- Micro-interação de seleção A/B ---- */
.option.is-selected-pulse {
  animation: option-stamp var(--duration-micro) var(--ease-spring-thread);
}

@keyframes option-stamp {
  0% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

/* ---- CTA final: glow pulsante sutil (loop) ---- */
.btn--pulse {
  animation: btn-glow var(--duration-glow-pulse) var(--ease-in-out-soft) infinite;
}

@keyframes btn-glow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(228, 197, 112, 0);
  }
  50% {
    box-shadow: 0 0 18px rgba(228, 197, 112, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--pulse {
    animation: none;
  }
}

/* ---- Parallax sutil de fundo (desktop, controlado via JS) ---- */
.quiz-scene__layer {
  transition: transform 600ms var(--ease-out-editorial);
}

@media (prefers-reduced-motion: reduce), (max-width: 899px) {
  .quiz-scene__layer {
    transform: none !important;
    transition: none !important;
  }
}