/* LunaChat — sistema de movimento.
   O Cauã: «está sem animação nenhuma, está muito dura».
   Regra: movimento serve a compreensão, nunca o espectáculo. Entrada curta, curva
   de saída rápida, nada a piscar. Tudo desliga em prefers-reduced-motion. */

:root{
  --t-rapido: 120ms;
  --t-medio: 220ms;
  --t-lento: 420ms;
  --curva: cubic-bezier(.16,1,.3,1);      /* sai depressa, assenta devagar */
  --curva-suave: cubic-bezier(.4,0,.2,1);
}

/* ---- entrada: o conteúdo sobe 8px e aparece, em cascata ---- */
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[data-entra]{animation:entra var(--t-lento) var(--curva) both}
[data-entra="1"]{animation-delay:40ms}  [data-entra="2"]{animation-delay:80ms}
[data-entra="3"]{animation-delay:120ms} [data-entra="4"]{animation-delay:160ms}
[data-entra="5"]{animation-delay:200ms} [data-entra="6"]{animation-delay:240ms}
[data-entra="7"]{animation-delay:280ms} [data-entra="8"]{animation-delay:320ms}

/* ---- lista: cada linha entra a seguir à anterior ---- */
.cascata > *{animation:entra 380ms var(--curva) both}
.cascata > *:nth-child(1){animation-delay:30ms}
.cascata > *:nth-child(2){animation-delay:70ms}
.cascata > *:nth-child(3){animation-delay:110ms}
.cascata > *:nth-child(4){animation-delay:150ms}
.cascata > *:nth-child(5){animation-delay:190ms}
.cascata > *:nth-child(n+6){animation-delay:230ms}

/* ---- troca de secção: cruza em vez de saltar ---- */
@keyframes troca{from{opacity:0;transform:translateY(6px) scale(.996)}to{opacity:1;transform:none}}
[data-vista].activa{animation:troca var(--t-medio) var(--curva) both}

/* ---- toque: tudo o que reage ao rato tem a mesma curva ---- */
a,button,.cartao,[data-toque]{transition:
  background-color var(--t-rapido) var(--curva-suave),
  border-color var(--t-rapido) var(--curva-suave),
  color var(--t-rapido) var(--curva-suave),
  box-shadow var(--t-medio) var(--curva-suave),
  transform var(--t-medio) var(--curva)}
button:active,[data-toque]:active{transform:translateY(1px)}

/* ---- abrir e fechar por altura, sem salto ---- */
.dobra{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-medio) var(--curva-suave)}
.dobra > *{overflow:hidden}
.dobra[aria-expanded="true"],.dobra.aberta{grid-template-rows:1fr}

/* ---- à espera: brilho que atravessa, não ponto a pulsar ---- */
@keyframes varre{to{background-position-x:-200%}}
.esqueleto{
  background:linear-gradient(90deg,#efeeec 0%,#f7f6f4 40%,#efeeec 80%);
  background-size:200% 100%;animation:varre 1.4s linear infinite;
  border-radius:4px;color:transparent!important}

/* ---- feito: o cartão recolhe em vez de desaparecer ---- */
@keyframes recolhe{
  0%{opacity:1;transform:none;max-height:400px}
  60%{opacity:0;transform:translateX(14px)}
  100%{opacity:0;transform:translateX(14px);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0}
}
.recolhendo{animation:recolhe var(--t-lento) var(--curva-suave) forwards;overflow:hidden}

/* ---- número que conta em vez de aparecer ---- */
@keyframes sobe-num{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.numero{animation:sobe-num var(--t-medio) var(--curva) both;font-variant-numeric:tabular-nums}

/* ---- quem prefere menos movimento, não leva nenhum ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}