/* ============================================================
   ANIMAÇÕES — entradas de tela, microinterações e 3D sutil.
   Nada aqui altera a identidade visual: só o tempo em que ela
   aparece. Tudo em CSS (sem bibliotecas) para rodar offline e
   com folga de performance no tablet.
   ============================================================ */

/* ---------- Transição entre telas ---------------------------------------- */
.screen{
  opacity:0;
  transform:translate3d(0,0,0);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  will-change:opacity,transform;
}
.screen.is-in{opacity:1}

.screen.is-entering{opacity:0;transform:translate3d(0,26px,0) scale(.988)}
.screen.is-leaving{opacity:0;transform:translate3d(0,-22px,0) scale(.99);pointer-events:none}

/* ---------- Entradas encadeadas ------------------------------------------ */
@keyframes riseIn{
  from{opacity:0;transform:translate3d(0,34px,0)}
  to  {opacity:1;transform:translate3d(0,0,0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to  {opacity:1}
}
@keyframes sealIn{
  from{opacity:0;transform:rotateY(-34deg) scale(.86)}
  to  {opacity:1;transform:rotateY(0deg) scale(1)}
}
@keyframes artSweep{
  from{opacity:0;transform:translate3d(-46px,26px,0) rotate(-2.2deg) scale(1.05)}
  to  {opacity:1;transform:none}
}
@keyframes artDrop{
  from{opacity:0;transform:translate3d(0,-40px,0) scale(1.04)}
  to  {opacity:1;transform:none}
}
@keyframes cardIn{
  from{opacity:0;transform:perspective(1200px) rotateX(-13deg) translate3d(0,42px,-60px)}
  to  {opacity:1;transform:perspective(1200px) rotateX(0deg) translate3d(0,0,0)}
}
@keyframes ruleIn{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}
@keyframes titleIn{
  from{opacity:0;transform:perspective(1400px) rotateX(38deg) translate3d(0,26px,0)}
  to  {opacity:1;transform:perspective(1400px) rotateX(0deg) translate3d(0,0,0)}
}

/* utilitário aplicado pelo app.js */
.is-in .anim{animation:riseIn .68s var(--ease-out) both}
.is-in .anim[data-delay="1"]{animation-delay:.16s}
.is-in .anim[data-delay="2"]{animation-delay:.30s}
.is-in .anim[data-delay="3"]{animation-delay:.44s}
.is-in .anim[data-delay="4"]{animation-delay:.58s}

/* ---------- Arte e selo por tela -----------------------------------------
   A animação vai no <img> do key visual, nunca no `.artbox` — é o
   artbox que carrega o `scale(--art-boost)` que faz a arte cobrir a
   tela, e animar transform ali por cima apagaria esse ajuste. */
.is-in .kv--abertura-p,
.is-in .kv--abertura-l,
.is-in .kv--end-p,
.is-in .kv--end-l    {animation:artDrop 1.15s var(--ease-out) both}
.is-in .kv--intro-p,
.is-in .kv--intro-l  {animation:artSweep 1.15s var(--ease-out) both}
.is-in .kv--quiz-p,
.is-in .kv--quiz-l   {animation:artSweep .95s var(--ease-out) both}
.is-in .kv--result-p,
.is-in .kv--result-l {animation:artSweep 1.25s var(--ease-out) both}

/* selo grande gira em 3D; o pequeno das perguntas só aparece */
.is-in .selo--abertura-p,.is-in .selo--abertura-l,
.is-in .selo--intro-p,  .is-in .selo--intro-l,
.is-in .selo--result-l,
.is-in .selo--end-p,    .is-in .selo--end-l{
  animation:sealIn .95s var(--ease-out) both;animation-delay:.06s;
}
.is-in .selo--quiz-p,.is-in .selo--quiz-l,
.is-in .selo--result-p{animation:fadeIn .7s var(--ease) both;animation-delay:.08s}

.is-in .mc{animation:fadeIn .9s var(--ease) both;animation-delay:.42s}

/* ---------- Perguntas ----------------------------------------------------- */
.is-in .progress,
.is-in .counter{animation:riseIn .6s var(--ease-out) both;animation-delay:.14s}
.is-in .tit-quiz{animation:riseIn .68s var(--ease-out) both;animation-delay:.22s}

/* recomposição das alternativas a cada nova pergunta */
.answers.is-fresh .answer{animation:cardIn .72s var(--ease-out) both}
.answers.is-fresh .answer:nth-child(1){animation-delay:.30s}
.answers.is-fresh .answer:nth-child(2){animation-delay:.40s}
.answers.is-fresh .answer:nth-child(3){animation-delay:.50s}

/* troca de pergunta sem trocar de tela */
@keyframes qOut{
  from{opacity:1;transform:translate3d(0,0,0)}
  to  {opacity:0;transform:translate3d(0,-30px,0)}
}
.screen--quiz.is-swapping .tit-quiz,
.screen--quiz.is-swapping .answers{animation:qOut .28s var(--ease) both}

/* ---------- Resultado ------------------------------------------------------ */
.is-in .result-eyebrow{animation:riseIn .7s var(--ease-out) both;animation-delay:.46s}
.is-in .result-title  {animation:titleIn .9s var(--ease-out) both;animation-delay:.56s}
.is-in .result-desc   {animation:riseIn .7s var(--ease-out) both;animation-delay:.72s}
.is-in .result-rule   {animation:ruleIn .6s var(--ease-out) both;animation-delay:.86s}
.is-in .result-drink  {animation:riseIn .7s var(--ease-out) both;animation-delay:.94s}
.is-in .result-recipe {animation:riseIn .7s var(--ease-out) both;animation-delay:1.02s}
.is-in .btn--result   {animation:riseIn .7s var(--ease-out) both;animation-delay:1.12s}

/* ---------- Encerramento --------------------------------------------------- */
.is-in .tagline-end{animation:riseIn .8s var(--ease-out) both;animation-delay:.62s}

/* ---------- Confirmação da resposta ---------------------------------------- */
@keyframes pulseRing{
  0%  {box-shadow:0 0 0 0 rgba(240,73,27,.42)}
  70% {box-shadow:0 0 0 26px rgba(240,73,27,0)}
  100%{box-shadow:0 0 0 0 rgba(240,73,27,0)}
}
.answer.is-picked .answer__badge{animation:pulseRing .62s var(--ease-out)}