/* ===== Jornada do Batismo — estilos complementares ===== */

:root { scroll-behavior: smooth; }

/* Animações de entrada */
@keyframes pop { 0%{transform:scale(.9);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes floatUp { 0%{transform:translateY(12px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes selo { 0%{transform:scale(.3) rotate(-20deg);opacity:0} 60%{transform:scale(1.15) rotate(8deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.anim-pop { animation: pop .35s ease both; }
.anim-up { animation: floatUp .45s ease both; }
.anim-selo { animation: selo .6s cubic-bezier(.2,1.2,.3,1) both; }
.anim-shake { animation: shake .35s ease; }

/* Trilha: linha conectora entre fases */
.trilha-line::before{
  content:""; position:absolute; left:50%; top:-2.5rem; height:2.5rem; width:4px;
  transform:translateX(-50%); background:linear-gradient(#bfe7fb,#bfe7fb);
  border-radius:9999px;
}
.trilha-line:first-child::before{ display:none; }

/* Cartão de fase bloqueada */
.fase-lock{ filter:grayscale(.7); opacity:.6; }

/* Flashcard do versículo (vira ao clicar) */
.flip{ perspective:1000px; }
.flip-inner{ transition:transform .5s; transform-style:preserve-3d; position:relative; }
.flip.is-flipped .flip-inner{ transform:rotateY(180deg); }
.flip-face{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-back{ transform:rotateY(180deg); position:absolute; inset:0; }

/* Player de áudio */
.audio-btn{ transition:transform .1s ease, background .2s ease; }
.audio-btn:active{ transform:scale(.92); }

/* Acordeão tira-dúvidas */
.acc-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.acc.open .acc-body{ max-height:600px; }
.acc.open .acc-chevron{ transform:rotate(180deg); }
.acc-chevron{ transition:transform .3s ease; }

/* Quiz */
.quiz-opt[disabled]{ cursor:default; }

/* Impressão do certificado (fallback quando o PDF não pode ser gerado) */
@media print{
  @page { size: A4 landscape; margin: 0; }
  body * { visibility:hidden; }
  #certificado, #certificado * { visibility:visible; }
  #certificado{ position:absolute; left:0; top:0; margin:0; box-shadow:none !important; }
  .no-print{ display:none !important; }
}