/* =========================================================
   ANIMACOES DA HOME (pedido dela a 18-09: «varre toda a home e poe animacoes na
   pagina: entrada de texto, deslize, etc.»).

   Como funciona: o site ja tinha UMA entrada, a classe .rise (sobe 26px e ganha
   opacidade), acesa pelo produto.js quando a peca entra no ecra (ganha a classe .on).
   Esta folha NAO cria um segundo sistema: da a cada tipo de peca a SUA maneira de
   entrar, agarrada ao mesmo .on. Quem quiser tirar tudo isto, tira so este ficheiro.

   Regras da casa:
     - cada peca entra UMA vez, e so quando chega ao ecra;
     - o movimento vem sempre de perto (24 a 60px), nada atravessa a pagina;
     - uma curva so, a --fx do site; duracoes entre .6s e 1.1s;
     - prefers-reduced-motion: tudo aparece no estado final, sem movimento.
   So carrega na home (ver pagina() no gerar.mjs).
   ========================================================= */

/* ---------- 1. heroi: o titulo entra andar a andar ---------- */
/* o h1 deixa de entrar em bloco: ficam a vista os tres andares, cada um a subir por
   tras de uma mascara, como uma persiana, com 140ms entre eles */
.pr-cabeca-foto h1.rise{ opacity: 1; transform: none; }
.pr-cabeca-foto h1 .pr-l1{ display: block; }
.pr-cabeca-foto h1 .pr-l1,
.pr-cabeca-foto h1 .pr-lit,
.pr-cabeca-foto h1 .pr-ghost{
  clip-path: inset(0 0 100% 0); transform: translateY(.42em); opacity: 0;
  transition: clip-path 1s var(--fx), transform 1s var(--fx), opacity .5s ease;
}
.pr-cabeca-foto h1.on .pr-l1,
.pr-cabeca-foto h1.on .pr-lit,
.pr-cabeca-foto h1.on .pr-ghost{ clip-path: inset(-12% -6% -18% -6%); transform: none; opacity: 1; }
.pr-cabeca-foto h1.on .pr-lit{ transition-delay: .14s; }
.pr-cabeca-foto h1.on .pr-ghost{ transition-delay: .28s; }

/* a etiqueta desliza da esquerda; o paragrafo desfoca para nitido */
.pr-cabeca-foto .pr-eyebrow.rise{ transform: translateX(-28px); }
.pr-cabeca-foto .pr-eyebrow.rise.on{ transform: none; }
.pr-cabeca-foto .pr-lede.rise{ transform: translateY(14px); filter: blur(6px); transition: opacity .9s var(--fx) .3s, transform .9s var(--fx) .3s, filter .9s var(--fx) .3s; }
.pr-cabeca-foto .pr-lede.rise.on{ filter: none; }

/* as duas vias entram uma de cada lado e encontram-se ao meio */
.pr-cabeca-foto .pr-fork.rise{ opacity: 1; transform: none; }
.pr-cabeca-foto .pr-fork .pr-fork-c{ opacity: 0; transition: opacity .7s ease .45s, transform .9s var(--fx) .45s, border-color .25s, background .25s; }
.pr-cabeca-foto .pr-fork .pr-fork-c:nth-child(1){ transform: translateX(-36px); }
.pr-cabeca-foto .pr-fork .pr-fork-c:nth-child(2){ transform: translateX(36px); }
.pr-cabeca-foto .pr-fork.on .pr-fork-c{ opacity: 1; transform: none; }
/* depois de entrarem, o hover volta a mandar (sem o atraso da entrada) */
.pr-cabeca-foto .pr-fork.on .pr-fork-c:hover{ transform: translateY(-2px); transition-delay: 0s; }

/* os botoes crescem do sitio, o segundo um instante depois */
.pr-cabeca-foto .pr-actions.rise{ opacity: 1; transform: none; }
.pr-cabeca-foto .pr-actions .pr-btn{ opacity: 0; transform: translateY(16px) scale(.94); transition: opacity .6s ease .7s, transform .8s var(--fx) .7s, box-shadow .3s, background .3s; }
.pr-cabeca-foto .pr-actions .pr-btn + .pr-btn{ transition-delay: .82s, .82s, 0s, 0s; }
.pr-cabeca-foto .pr-actions.on .pr-btn{ opacity: 1; transform: none; }
.pr-cabeca-foto .pr-actions.on .pr-btn:hover{ transform: translateY(-2px); transition-delay: 0s; }

/* a demonstracao desliza da direita e assenta */
.pr-demo.rise{ transform: translateX(70px) scale(.97); transition: opacity 1s ease .25s, transform 1.2s var(--fx) .25s; }
.pr-demo.rise.on{ transform: none; }

/* ---------- 2. titulos de seccao: abrem da esquerda, e o marcador risca-se depois ---------- */
.cx .pr-sec-head h2.rise{ opacity: 1; transform: none; clip-path: inset(-10% 100% -20% -4%); transition: clip-path 1.1s var(--fx); }
.cx .pr-sec-head h2.rise.on{ clip-path: inset(-10% -6% -20% -4%); }
.cx .pr-sec-head h2.rise em{ background-size: 0% 44%; transition: background-size .9s var(--fx) .75s; }
.cx .pr-sec-head h2.rise.on em{ background-size: 100% 44%; }

/* ---------- 3. o rolo: o numero troca com um salto curto ---------- */
.cx-rolo-num span{ display: inline-block; transition: transform .45s var(--fx), opacity .3s ease; }
.cx-rolo-num span.troca{ transform: translateY(-.12em) scale(.96); opacity: .25; transition-duration: .12s; }
.cx-rolo-ico svg{ animation: an-ico .5s var(--fx); }
@keyframes an-ico{ from{ transform: scale(.4) rotate(-20deg); opacity: 0; } }
.cx-rolo.rise, .cx-rolo .rise{ transform: none; }

/* ---------- 4. a parede dos servicos: os azulejos caem em cascata ---------- */
.cx-parede.rise{ opacity: 1; transform: none; }
.cx-parede .cx-vd{ opacity: 0; translate: 0 34px; scale: .96; transition: opacity .7s ease, translate .9s var(--fx), scale .9s var(--fx), transform .5s var(--fx); }
.cx-parede.on .cx-vd{ opacity: 1; translate: 0 0; scale: 1; }
.cx-parede.on .cx-vd:nth-child(2){ transition-delay: .07s; }
.cx-parede.on .cx-vd:nth-child(3){ transition-delay: .14s; }
.cx-parede.on .cx-vd:nth-child(4){ transition-delay: .21s; }
.cx-parede.on .cx-vd:nth-child(5){ transition-delay: .28s; }
.cx-parede.on .cx-vd:nth-child(6){ transition-delay: .35s; }
.cx-parede.on .cx-vd:nth-child(7){ transition-delay: .42s; }
.cx-parede.on .cx-vd:nth-child(8){ transition-delay: .52s; }
/* usa-se translate/scale (propriedades soltas) e NAO transform: o transform destes
   azulejos ja e' da inclinacao ao rato (luz.js); se a entrada tambem o usasse, uma
   apagava a outra. */
.cx-parede .cx-vd .vd-n{ transition: -webkit-text-stroke-color .4s, translate 1s var(--fx) .3s; translate: 30px 0; }
.cx-parede.on .cx-vd .vd-n{ translate: 0 0; }

/* ---------- 5. recursos: os cartoes sobem e a fotografia assenta ---------- */
#knowledge .pr-kb-foto a.rise{ transform: translateY(40px); transition: opacity .8s ease, transform 1s var(--fx); }
#knowledge .pr-kb-foto a.rise.on{ transform: none; }
#knowledge .pr-kb-foto a:nth-child(2).rise{ transition-delay: .12s; }
#knowledge .pr-kb-foto a:nth-child(3).rise{ transition-delay: .24s; }
#knowledge .pr-kb-foto a.rise .kb-fundo{ transform: scale(1.18); transition: transform 1.8s var(--fx) .1s; }
#knowledge .pr-kb-foto a.rise.on .kb-fundo{ transform: scale(1); }
#knowledge .pr-kb-foto a.rise.on:hover .kb-fundo{ transform: scale(1.05); transition-delay: 0s; transition-duration: .8s; }
#knowledge .pr-kb-foto a.rise .pr-tag{ opacity: 0; translate: -14px 0; transition: opacity .5s ease .6s, translate .7s var(--fx) .6s; }
#knowledge .pr-kb-foto a.rise.on .pr-tag{ opacity: 1; translate: 0 0; }

/* ---------- 6. rodape: os botoes das redes saltam um a um ---------- */
.redes.rise{ opacity: 1; transform: none; }   /* o bloco fica quieto; quem entra sao as pecas la dentro */
.redes-bts a{ opacity: 0; scale: .5; transition: opacity .5s ease, scale .7s cubic-bezier(.2,1.4,.4,1), background .25s, color .25s, border-color .25s, transform .25s var(--fx), box-shadow .25s; }
.redes.on .redes-bts a{ opacity: 1; scale: 1; }
.redes.on .redes-bts a:nth-child(2){ transition-delay: .06s, .06s, 0s, 0s, 0s, 0s, 0s; }
.redes.on .redes-bts a:nth-child(3){ transition-delay: .12s, .12s, 0s, 0s, 0s, 0s, 0s; }
.redes.on .redes-bts a:nth-child(4){ transition-delay: .18s, .18s, 0s, 0s, 0s, 0s, 0s; }
.redes.on .redes-bts a:nth-child(5){ transition-delay: .24s, .24s, 0s, 0s, 0s, 0s, 0s; }
.redes h5{ opacity: 0; translate: -24px 0; transition: opacity .7s ease, translate .9s var(--fx); }
.redes.on h5{ opacity: 1; translate: 0 0; }

/* ---------- sem movimento: tudo no estado final ---------- */
@media (prefers-reduced-motion: reduce){
  .pr-cabeca-foto h1 .pr-l1, .pr-cabeca-foto h1 .pr-lit, .pr-cabeca-foto h1 .pr-ghost{ clip-path: none; transform: none; opacity: 1; transition: none; }
  .pr-cabeca-foto .pr-lede.rise{ filter: none; }
  .pr-cabeca-foto .pr-fork .pr-fork-c, .pr-cabeca-foto .pr-actions .pr-btn{ opacity: 1; transform: none; transition: none; }
  .cx .pr-sec-head h2.rise{ clip-path: none; transition: none; }
  .cx .pr-sec-head h2.rise em{ background-size: 100% 44%; transition: none; }
  .cx-parede .cx-vd, .cx-parede .cx-vd .vd-n{ opacity: 1; translate: 0 0; scale: 1; transition: none; }
  #knowledge .pr-kb-foto a.rise .kb-fundo{ transform: none; transition: none; }
  #knowledge .pr-kb-foto a.rise .pr-tag{ opacity: 1; translate: 0 0; transition: none; }
  .redes-bts a, .redes h5{ opacity: 1; scale: 1; translate: 0 0; transition: none; }
  .cx-rolo-ico svg{ animation: none; }
}