/* MOVIMENTO DO PORTAL (dono, 02/11/2026: "fazer as coisas rodarem mais
   suavemente... bounce left, bounce up lento, carregar em cascata... em TUDO
   no caminhada precisa ficar EXTREMAMENTE FINO").

   Regras:
   - Trocar de tela nunca pisca: a tela nova entra POR CIMA da antiga, que
     só recua e escurece (nunca as duas transparentes ao mesmo tempo).
   - Ir mais fundo empurra da direita; voltar devolve da esquerda (e volta
     para onde a pessoa estava na página); trocar de aba sobe e esmaece.
   - Conteúdo que chega entra em cascata (sobe devagar com um leve quique);
     cartões de trilha e linhas de ranking entram da direita (bounce left).
   - Folhas (avisos, convites) sobem devagar com mola.
   - Quem pede menos movimento no aparelho não vê nada disso. */

:root{
  --mola:cubic-bezier(.22,1,.36,1);          /* desacelera longo, sem passar */
  --mola-quique:cubic-bezier(.34,1.32,.5,1);  /* passa um pouco e volta */
  --empurra:cubic-bezier(.32,.72,0,1);        /* empurrar de tela, estilo iOS */
}

/* ---------------------------------------------------- troca de tela */
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-timing-function:var(--empurra)}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:none}
html[data-dir=avanca]::view-transition-old(root){animation:mv-recua-e .5s var(--empurra) both}
html[data-dir=avanca]::view-transition-new(root){animation:mv-chega-d .5s var(--empurra) both}
html[data-dir=volta]::view-transition-old(root){animation:mv-sai-d .44s var(--empurra) both}
html[data-dir=volta]::view-transition-new(root){animation:mv-chega-e .44s var(--empurra) both}
html[data-dir=fade]::view-transition-old(root){animation:mv-fica .36s linear both}
html[data-dir=fade]::view-transition-new(root){animation:mv-sobe-fade .36s var(--mola) both}
@keyframes mv-recua-e{to{transform:translateX(-18%);filter:brightness(.62)}}
@keyframes mv-chega-d{from{transform:translateX(34%);opacity:0}45%{opacity:1}to{transform:none;opacity:1}}
@keyframes mv-sai-d{to{transform:translateX(26%);opacity:0}}
@keyframes mv-chega-e{from{transform:translateX(-14%);filter:brightness(.62)}to{transform:none;filter:none}}
@keyframes mv-fica{to{opacity:1}}
@keyframes mv-sobe-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* voltar: a tela de baixo aparece por baixo da que sai */
html[data-dir=volta]::view-transition-old(root){z-index:2}
html[data-dir=volta]::view-transition-new(root){z-index:1}
/* sem View Transitions (navegador antigo): só a tela nova, suave */
.tela.anim-avanca{animation:mv-chega-d .46s var(--empurra) backwards}
.tela.anim-volta{animation:mv-chega-e .4s var(--empurra) backwards}
.tela.anim-fade{animation:mv-sobe-fade .34s var(--mola) backwards}
/* a aba ativa do devocional desliza entre Hoje / Trilhas / Ranking */
.dv-abas a[aria-current]{view-transition-name:dv-aba}
::view-transition-group(dv-aba){animation-duration:.42s;animation-timing-function:var(--mola-quique)}

/* ---------------------------------------------------- cascata
   O JS marca a tela que acabou de entrar com .entra e numera os filhos
   (--i). Só na primeira vez que a tela aparece: redesenho de dados não
   reanima, voltar não reanima. */
.tela.entra [data-mv]{animation:mv-cascata .62s var(--mola-quique) backwards;animation-delay:calc(var(--i,0) * 58ms + 60ms)}
.tela.entra [data-mv="esq"]{animation-name:mv-bounce-left;animation-duration:.66s}
.tela.entra [data-mv="pop"]{animation-name:mv-pop;animation-duration:.5s}
@keyframes mv-cascata{0%{opacity:0;transform:translateY(16px)}62%{opacity:1;transform:translateY(-2px)}100%{opacity:1;transform:none}}
@keyframes mv-bounce-left{0%{opacity:0;transform:translateX(26px)}60%{opacity:1;transform:translateX(-3px)}100%{opacity:1;transform:none}}
@keyframes mv-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}

/* revelar com a rolagem: o que estava abaixo da dobra espera escondido e
   sobe devagar quando entra na tela; os que chegam juntos, em sequência */
[data-mv-espera]{opacity:0;transform:translate3d(0,26px,0) scale(.985)}
[data-mv-espera].mv-visto{animation:mv-revela .9s var(--mola) both;animation-delay:calc(var(--j,0) * 90ms)}
[data-mv-espera="esq"].mv-visto{animation-name:mv-bounce-left}
@keyframes mv-revela{0%{opacity:0;transform:translate3d(0,26px,0) scale(.985)}55%{opacity:1}100%{opacity:1;transform:none}}
.cartao.capa-foto[data-mv-espera]::before{transform:scale(1.1)}
.cartao.capa-foto[data-mv-espera].mv-visto::before{animation:mv-assenta 1.6s var(--mola) both;animation-delay:calc(var(--j,0) * 90ms)}
[data-mv-espera] .dv-barra>i,[data-mv-espera] .rv-mini-barra>i{transform:scaleX(0);transform-origin:left center}
[data-mv-espera].mv-visto .dv-barra>i,[data-mv-espera].mv-visto .rv-mini-barra>i{animation:mv-cresce 1.1s var(--mola) .35s both}

/* Caminhada: a linha do tempo se desenha de cima para baixo enquanto os
   cartões entram (as bolinhas vêm junto com cada cartão). */
.tela.entra .tempo::before{animation:mv-linha 1.8s var(--mola) .1s both;transform-origin:top center}
@keyframes mv-linha{from{transform:scaleY(0)}}
.tempo>li[data-mv-espera]::before{transform:scale(.4)}
.tempo>li[data-mv-espera].mv-visto::before{animation:mv-pop .6s var(--mola-quique) both;animation-delay:calc(var(--j,0) * 90ms + .25s)}

/* conteúdo que chegou depois do "carregando" (ex.: Família, Irmãos) */
.mv-chegou{animation:mv-cascata .55s var(--mola-quique) backwards;animation-delay:calc(var(--i,0) * 50ms)}

/* fotos dos cartões do início assentam devagar */
.tela.entra .cartao.capa-foto::before{animation:mv-assenta 1.4s var(--mola) backwards}
@keyframes mv-assenta{from{transform:scale(1.08)}}

/* ---------------------------------------------------- devocional */
/* barras de progresso crescem a partir do zero */
.tela.entra .dv-barra>i,.tela.entra .rv-mini-barra>i,.tela.entra .barra-revisao>i{animation:mv-cresce 1s var(--mola) backwards;animation-delay:calc(var(--i,0) * 58ms + 260ms);transform-origin:left center}
@keyframes mv-cresce{from{transform:scaleX(0)}}
/* dias da semana da ofensiva acendem um a um */
.tela.entra .dv-semana .dv-dia{animation:mv-pop .5s var(--mola-quique) backwards}
.tela.entra .dv-semana .dv-dia:nth-child(1){animation-delay:.22s}.tela.entra .dv-semana .dv-dia:nth-child(2){animation-delay:.27s}
.tela.entra .dv-semana .dv-dia:nth-child(3){animation-delay:.32s}.tela.entra .dv-semana .dv-dia:nth-child(4){animation-delay:.37s}
.tela.entra .dv-semana .dv-dia:nth-child(5){animation-delay:.42s}.tela.entra .dv-semana .dv-dia:nth-child(6){animation-delay:.47s}
.tela.entra .dv-semana .dv-dia:nth-child(7){animation-delay:.52s}
/* selos saltam em sequência */
.tela.entra .dv-selos>div{animation:mv-pop .55s var(--mola-quique) backwards}
.tela.entra .dv-selos>div:nth-child(2){animation-delay:.06s}.tela.entra .dv-selos>div:nth-child(3){animation-delay:.12s}
.tela.entra .dv-selos>div:nth-child(4){animation-delay:.18s}.tela.entra .dv-selos>div:nth-child(5){animation-delay:.24s}
.tela.entra .dv-selos>div:nth-child(6){animation-delay:.3s}
/* número da ofensiva e dos pontos: o JS conta de 0 até o valor */
.mv-conta{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------- folhas e avisos */
.dv-veu{animation:mv-veu .4s ease both}
.dv-folha{animation:mv-folha .78s var(--mola-quique) both}
@keyframes mv-veu{from{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@keyframes mv-folha{0%{transform:translateY(100%)}68%{transform:translateY(-8px)}100%{transform:none}}
.dv-veu.saindo{animation:mv-veu-sai .28s ease both}
.dv-veu.saindo .dv-folha{animation:mv-folha-sai .3s var(--mola) both}
@keyframes mv-veu-sai{to{opacity:0}}
@keyframes mv-folha-sai{to{transform:translateY(60%);opacity:0}}
.toast{animation:mv-toast .5s var(--mola-quique) both}
@keyframes mv-toast{from{opacity:0;transform:translate(-50%,22px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}

/* toque: afunda com mola e volta */
a.cartao,button.cartao,.dv-cartao,.btn,.rv-item,.dv-rank{transition:transform .35s var(--mola-quique),border-color .25s,background .25s}
a.cartao:active,button.cartao:active,a.dv-cartao:active,.rv-item:active{transform:scale(.975);transition-duration:.12s}

@media (prefers-reduced-motion:reduce){
  [data-mv-espera]{opacity:1!important;transform:none!important}
  .tela.entra [data-mv],[data-mv-espera].mv-visto,.mv-chegou,.dv-folha,.dv-veu,.toast,.tela.entra .dv-barra>i,.tela.entra .dv-semana .dv-dia,.tela.entra .dv-selos>div,.tela.entra .cartao.capa-foto::before{animation:none!important}
}