/* =========================================================
   ZH OUTFITS — REVELAR AO ROLAR
   Estado "escondido" e a transição de entrada usados por
   js/revelar-ao-rolar.js.

   IMPORTANTE: só esconde quando o <html> tem a classe
   .revelar-on, que é colocada pelo próprio JS. Sem JS (ou com
   "reduzir movimento" ligado), tudo aparece normalmente.
   ========================================================= */

.revelar-on .revelar{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

.revelar-on .revelar.is-visivel{
  opacity:1;
  transform:none;
}

/* cabeçalhos de seção sobem um pouco menos, fica mais elegante */
.revelar-on .section__head.revelar,
.revelar-on .catalogo__head.revelar{ transform:translateY(22px); }
.revelar-on .section__head.is-visivel,
.revelar-on .catalogo__head.is-visivel{ transform:none; }

/* depois de aparecer, solta o will-change pra não pesar na rolagem */
.revelar-on .revelar.is-visivel{ will-change:auto; }

@media (prefers-reduced-motion: reduce){
  .revelar-on .revelar{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}