/* Tela de abertura: mesmo versiculo e mesmo ritmo do aplicativo,
   com a contagem discreta pra pessoa saber quanto falta. */

.abertura{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 36px;
  animation:abertura-sair .9s ease-in-out 10s forwards;
}

.abertura-brilho{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 42%,
    rgba(232,163,61,.15) 0%,
    rgba(183,121,31,.06) 38%,
    rgba(15,15,15,0) 70%);
  opacity:0;
  animation:abertura-surgir 2.6s ease-out .12s forwards;
}

.abertura-centro{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  max-width:680px;text-align:center;
}

.abertura-fio{
  display:block;width:52px;height:1px;background:var(--ouro);
  opacity:0;transform:translateY(26px);
  animation:abertura-entrar 1.3s cubic-bezier(.16,.8,.3,1) .3s forwards;
}
.abertura-fio-base{margin-top:34px;animation-delay:1.9s}

.abertura-versiculo{
  margin-top:34px;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(22px,4.4vw,34px);
  line-height:1.45;color:var(--texto);
  opacity:0;transform:translateY(26px);
  animation:abertura-entrar 1.3s cubic-bezier(.16,.8,.3,1) .7s forwards;
}

.abertura-referencia{
  margin-top:26px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ouro);
  opacity:0;transform:translateY(26px);
  animation:abertura-entrar 1.3s cubic-bezier(.16,.8,.3,1) 1.5s forwards;
}

.abertura-rodape{
  position:absolute;
  bottom:calc(46px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transform:translateY(26px);
  animation:abertura-entrar 1.3s cubic-bezier(.16,.8,.3,1) 2.3s forwards;
}

.abertura-marca{
  font-size:15px;letter-spacing:.16em;color:var(--apagado);
}

/* Contagem discreta: informa sem disputar com o versiculo. */
.abertura-contagem{
  font-size:19px;letter-spacing:.14em;
  color:var(--apagado);opacity:.9;
}
.abertura-contagem b{
  font-weight:600;font-size:25px;color:var(--ouro);
  font-variant-numeric:tabular-nums;
}

@keyframes abertura-surgir{to{opacity:1}}
@keyframes abertura-entrar{to{opacity:1;transform:translateY(0)}}
@keyframes abertura-sair{to{opacity:0;visibility:hidden;pointer-events:none}}

/* Quem pediu menos animacao no sistema ve tudo parado, sem movimento. */
@media (prefers-reduced-motion:reduce){
  .abertura-brilho,.abertura-fio,.abertura-versiculo,
  .abertura-referencia,.abertura-rodape{
    animation:none;opacity:1;transform:none;
  }
  .abertura{animation:abertura-sair .01s linear 10s forwards}
}