/* ==========================================================================
   INAEC · 03-ANIMAÇÕES
   Movimento discreto, a serviço da leitura.

   Regras que orientaram as escolhas:
   · Curto. Nada acima de 620ms — o leitor não deve esperar pelo texto.
   · Uma vez só. Elementos não repetem a entrada ao rolar de volta.
   · Só translada e esvanece. Sem escala, giro ou salto: é um portal
     institucional, e movimento chamativo compete com o conteúdo.
   · Degrada com segurança. A ocultação inicial vive sob `html.js`; sem
     JavaScript nada fica escondido. Com "movimento reduzido" no sistema,
     tudo aparece de imediato.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Equivale a Avançado › Efeitos de Movimento › Entrance Animation, aplicado
   por widget. Não precisa ser portado.
   ========================================================================== */

:root {
  --anim-duracao: 620ms;
  --anim-curva: cubic-bezier(0.22, 0.68, 0.36, 1);
  /* Deslocamento maior do que os 14px originais: a entrada anterior era tão
     curta que, no fim, quase não se percebia que havia movimento. 26px ainda
     ficam abaixo do que chamaria atenção para si mesmos. */
  --anim-deslocamento: 26px;
  --anim-escala: 0.985;
  --anim-passo: 85ms; /* atraso entre irmãos de uma grade */
}

/* --- Estado inicial ------------------------------------------------------
   Aplicado apenas quando o JS está presente para revertê-lo. */
.js [data-revelar] {
  opacity: 0;
  /* Translação + uma redução mínima de escala. A escala é o que dá a
     impressão de aproximação; sozinho, o deslocamento vertical lê como um
     empurrão. 1,5% é pouco o bastante para não borrar o texto no caminho. */
  transform: translate3d(0, var(--anim-deslocamento), 0) scale(var(--anim-escala));
  transition: opacity var(--anim-duracao) var(--anim-curva),
              transform var(--anim-duracao) var(--anim-curva),
              filter var(--anim-duracao) var(--anim-curva);
  filter: blur(2px);
  will-change: opacity, transform;
}

.js [data-revelar="fade"]     { transform: scale(var(--anim-escala)); }
.js [data-revelar="esquerda"] { transform: translate3d(calc(var(--anim-deslocamento) * -1.4), 0, 0); }
.js [data-revelar="direita"]  { transform: translate3d(calc(var(--anim-deslocamento) *  1.4), 0, 0); }

.js [data-revelar].esta-visivel {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* --- Escalonamento -------------------------------------------------------
   Filhos de um grupo entram em sequência. O passo é pequeno de propósito:
   o conjunto inteiro se resolve em menos de meio segundo. */
.js [data-revelar-grupo] > * { transition-delay: 0ms; }
.js [data-revelar-grupo] > *:nth-child(2) { transition-delay: calc(var(--anim-passo) * 1); }
.js [data-revelar-grupo] > *:nth-child(3) { transition-delay: calc(var(--anim-passo) * 2); }
.js [data-revelar-grupo] > *:nth-child(4) { transition-delay: calc(var(--anim-passo) * 3); }
.js [data-revelar-grupo] > *:nth-child(5) { transition-delay: calc(var(--anim-passo) * 4); }
.js [data-revelar-grupo] > *:nth-child(6) { transition-delay: calc(var(--anim-passo) * 5); }
.js [data-revelar-grupo] > *:nth-child(7) { transition-delay: calc(var(--anim-passo) * 6); }
.js [data-revelar-grupo] > *:nth-child(8) { transition-delay: calc(var(--anim-passo) * 7); }
/* A partir do nono, o atraso congela: uma grade de dezessete especialistas
   levaria um segundo e meio para terminar de entrar, e as últimas fileiras
   ficariam esperando por algo que o leitor nem está vendo. */
.js [data-revelar-grupo] > *:nth-child(n+9) { transition-delay: calc(var(--anim-passo) * 8); }

/* --- Refinamentos de interação -------------------------------------------
   Fluidez também vem daqui: nada muda de estado instantaneamente. */
a, button, .card, .post, .conselheiro, .pilar, .numerada > li, .destaque {
  transition-timing-function: var(--anim-curva);
}

/* Sublinhado que cresce a partir da origem, em vez de piscar */
.prosa a:not(.btn):not(.link-arrow) {
  background-image: linear-gradient(var(--inaec-verde), var(--inaec-verde));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size 320ms var(--anim-curva), color 320ms var(--anim-curva);
}
@media (hover: hover) {
  .prosa a:not(.btn):not(.link-arrow):hover { background-size: 100% 1px; }
}

/* Cards da grade institucional reagem com elevação curta */
.numerada > li,
.destaque,
.conselheiro,
.post,
.card,
.artigo-item {
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: 280ms;
}
@media (hover: hover) {
  .numerada > li:hover,
  .destaque:hover,
  .post:hover,
  .card:hover { transform: translateY(-3px); }
}

/* --- Botões --------------------------------------------------------------
   Elevação curta e sombra: o botão precisa parecer pressionável antes do
   clique, e responder ao clique com um recuo. */
.btn {
  transition: transform 200ms var(--anim-curva),
              box-shadow 200ms var(--anim-curva),
              background-color 200ms var(--anim-curva),
              border-color 200ms var(--anim-curva),
              color 200ms var(--anim-curva);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* --- Setas ---------------------------------------------------------------
   A seta avança um pouco no hover: reforça a direção do link sem precisar de
   uma segunda palavra no rótulo. */
.link-arrow svg { transition: transform 260ms var(--anim-curva); }
@media (hover: hover) {
  .link-arrow:hover svg { transform: translateX(5px); }
}

/* --- Menu principal ------------------------------------------------------
   O sublinhado do menu NÃO mora aqui: ele já existe em sections/header.css,
   como uma régua do gradiente institucional que cresce da esquerda.

   Uma segunda regra foi adicionada neste arquivo e as duas passaram a
   disputar o mesmo pseudo-elemento. Como header.css é carregado depois, ele
   vencia em `left` e `width`, mas o `right` da regra daqui sobrevivia — e no
   hover o traço começava recuado e terminava fora do item, desalinhado de
   todos os outros. Fica registrado para ninguém recriá-la.

   O único acréscimo é o item de submenu aberto, que header.css não cobria. */
.site-nav__toggle[aria-expanded="true"]::after { transform: scaleX(1); }

/* --- Capas ---------------------------------------------------------------
   O reenquadramento lento dá vida à listagem sem tirar o foco do título. */
.post__capa,
.artigo-item__capa { overflow: hidden; }
.post__capa img { transition: transform 720ms var(--anim-curva); }
@media (hover: hover) {
  .post:hover .post__capa img { transform: scale(1.04); }
}

/* --- Régua do gradiente --------------------------------------------------
   Entra crescendo a partir da esquerda, uma vez, quando a seção aparece. */
.js [data-revelar] .regua,
.js .regua[data-revelar] { transform-origin: left center; }
.js [data-revelar]:not(.esta-visivel) .regua { transform: scaleX(0); }
.js [data-revelar] .regua { transition: transform 720ms var(--anim-curva) 160ms; }

/* Retrato ganha nitidez de cor ao passar o cursor — devolve a saturação
   que o tratamento institucional reduz. */
.retrato img { transition: filter 420ms var(--anim-curva), transform 620ms var(--anim-curva); }
@media (hover: hover) {
  .conselheiro:hover .retrato img,
  .conselho-destaque:hover .retrato img { filter: saturate(1); transform: scale(1.03); }
}
.retrato { overflow: hidden; }

/* --- Preferência do usuário ---------------------------------------------
   Desliga tudo, sem deixar nada invisível. */
@media (prefers-reduced-motion: reduce) {
  .js [data-revelar],
  .js [data-revelar].esta-visivel {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .js [data-revelar-grupo] > * { transition-delay: 0ms; }
  .js [data-revelar]:not(.esta-visivel) .regua,
  .js [data-revelar] .regua { transform: none; transition: none; }
  .retrato img,
  .conselheiro:hover .retrato img,
  .conselho-destaque:hover .retrato img { transform: none; transition: none; }
  .btn, .btn:hover, .btn:active,
  .post:hover, .card:hover, .numerada > li:hover, .destaque:hover { transform: none; }
  .link-arrow svg, .link-arrow:hover svg,
  .post__capa img, .post:hover .post__capa img { transform: none; transition: none; }
  .site-nav__link::after { transition: none; }
}