/* ============================================================
   ANIMAÇÕES DE ENTRADA
   Só opacity e transform: rodam no compositor e não entram na
   conta do CLS. Nada de animar height, top ou margin.
   A dobra não anima, porque o elemento de LCP está nela.
   Rede de segurança: sem a classe .js nada fica escondido, então
   se o JavaScript não subir o conteúdo aparece normalmente.
   ============================================================ */

/* ---- Bloco inteiro ---- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Variantes de gesto, para os blocos não entrarem todos do mesmo jeito.
   Quem usar reveal--left ou reveal--right precisa de overflow-x: clip na
   seção que o contém, senão o deslocamento vaza para fora da tela. */
.js .reveal--left  { transform: translateX(-34px); }
.js .reveal--right { transform: translateX(34px); }
.js .reveal--zoom  { transform: scale(.94); }
.js .reveal--left.is-in, .js .reveal--right.is-in, .js .reveal--zoom.is-in { transform: none; }

/* ---- Cascata nos filhos das grades ---- */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* O atraso é calculado por nth-child. A lista antiga parava no nono filho,
   e a grade de setores tem 26: do décimo em diante todos entravam juntos.
   Aqui a cascata continua e satura, para o último item não demorar
   segundos a aparecer. */
[data-stagger].is-in > *:nth-child(1)  { transition-delay: .04s; }
[data-stagger].is-in > *:nth-child(2)  { transition-delay: .08s; }
[data-stagger].is-in > *:nth-child(3)  { transition-delay: .12s; }
[data-stagger].is-in > *:nth-child(4)  { transition-delay: .16s; }
[data-stagger].is-in > *:nth-child(5)  { transition-delay: .20s; }
[data-stagger].is-in > *:nth-child(6)  { transition-delay: .24s; }
[data-stagger].is-in > *:nth-child(7)  { transition-delay: .28s; }
[data-stagger].is-in > *:nth-child(8)  { transition-delay: .32s; }
[data-stagger].is-in > *:nth-child(9)  { transition-delay: .36s; }
[data-stagger].is-in > *:nth-child(10) { transition-delay: .40s; }
[data-stagger].is-in > *:nth-child(11) { transition-delay: .44s; }
[data-stagger].is-in > *:nth-child(12) { transition-delay: .48s; }
[data-stagger].is-in > *:nth-child(13) { transition-delay: .52s; }
[data-stagger].is-in > *:nth-child(14) { transition-delay: .56s; }
[data-stagger].is-in > *:nth-child(15) { transition-delay: .60s; }
[data-stagger].is-in > *:nth-child(n+16) { transition-delay: .64s; }

.no-anim, .no-anim > * { transition: none !important; }

/* ---- Gestos por bloco ---- */
/* Cards de categoria e de produto sobem um pouco mais e com leve escala. */
.js .cat-grid[data-stagger] > *,
.js .prod-grid[data-stagger] > * { transform: translateY(26px) scale(.985); }
.cat-grid[data-stagger].is-in > *,
.prod-grid[data-stagger].is-in > * { transform: none; }

/* Chips de setor entram de baixo, curtos, sem escala. */
.js .areas-grid[data-stagger] > * { transform: translateY(14px); }

/* Números só aparecem, sem deslocamento: o contador já dá o movimento.
   O par com .is-in é obrigatório. Sem ele esta regra, que é mais
   específica que a genérica de entrada, deixaria os números invisíveis
   para sempre. */
.js .stats[data-stagger] > * { transform: none; }
.stats[data-stagger].is-in > * { opacity: 1; }

/* ---- Respeito a quem pediu menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal--left, .js .reveal--right, .js .reveal--zoom,
  .js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-stagger].is-in > * { transition-delay: 0s !important; }
  * { animation: none !important; scroll-behavior: auto; }
}