/* Animações da Área do cliente: as mesmas do site (theme/fracto/assets/css/main.css + js/main.js).
   Estados iniciais só com JS ativo (classe .js no <html>), para não esconder nada sem JS.
   Curva expo.out do GSAP ≈ cubic-bezier(.16, 1, .3, 1). */
:root { --ac-expo: cubic-bezier(.16, 1, .3, 1); }

/* Elementos que sobem e aparecem (1 s, 0,08 s entre eles) */
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal].is-in { animation: ac-reveal 1s var(--ac-expo) var(--ac-delay, 0s) backwards; }
@keyframes ac-reveal { from { opacity: 0; transform: translateY(28px); } }

/* Cabeçalho desce suavemente */
.js [data-reveal-header]:not(.is-in) { opacity: 0; }
.js [data-reveal-header].is-in { animation: ac-drop 1s var(--ac-expo) var(--ac-delay, 0s) backwards; }
@keyframes ac-drop { from { opacity: 0; transform: translateY(-20px); } }

/* Títulos revelados linha a linha, por trás de uma máscara (1,1 s, 0,09 s entre linhas) */
.js [data-split]:not(.is-split) { visibility: hidden; }
.js [data-split] .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .line__inner { display: block; }
.js [data-split]:not(.is-in) .line__inner { transform: translateY(105%); }
.js [data-split].is-in .line__inner { animation: ac-line 1.1s var(--ac-expo) var(--ac-delay, 0s) backwards; }
@keyframes ac-line { from { transform: translateY(105%); } }

/* Já passou da tela (link direto para o meio da página) ou a largura mudou: aparece sem animar */
.js [data-reveal].is-static, .js [data-reveal-header].is-static, .js [data-split].is-static .line__inner { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal]:not(.is-in), .js [data-reveal-header]:not(.is-in) { opacity: 1; }
	.js [data-split]:not(.is-in) .line__inner { transform: none; }
	.js [data-reveal].is-in, .js [data-reveal-header].is-in, .js [data-split].is-in .line__inner { animation: none; }
}