/* =====================================================================
   Portfólio · Revelar ao rolar
   Só esconde quando o JS confirmou que vai revelar (classe .js no <html>),
   assim a página nunca fica em branco sem script.
   ===================================================================== */

.js .revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--saida), transform .8s var(--saida);
    transition-delay: var(--atraso, 0s);
}
.js .revelar.visivel { opacity: 1; transform: none; }

/* Títulos de seção sobem de trás de uma máscara */
.js .secao-titulo.revelar,
.js .contato-titulo.revelar {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .9s var(--saida);
}
.js .secao-titulo.revelar.visivel,
.js .contato-titulo.revelar.visivel { clip-path: inset(0 0 -10% 0); }

@media (prefers-reduced-motion: reduce) {
    .js .revelar,
    .js .secao-titulo.revelar,
    .js .contato-titulo.revelar { opacity: 1; transform: none; clip-path: none; }
}