/* ========================================================================== ANIMAÇÕES — reveal on scroll + contadores + barras de progresso ========================================================================== Progressive enhancement: por padrão (sem JS, ou se o navegador não suporta IntersectionObserver, ou o usuário pede "reduzir movimento") TUDO fica 100% visível e estático — nenhum conteúdo depende de JS para aparecer. As regras abaixo só entram em ação quando script.js confirma suporte e adiciona a classe `.js-animations` em . Funciona igual em desktop e mobile — os mesmos atributos (data-animate, data-animate-group, data-countup-end) valem para os dois. ========================================================================== */ /* Sem a classe .js-animations, nada fica escondido — fallback seguro */ html:not(.js-animations) [data-animate], html:not(.js-animations) [data-animate-group] > * { opacity: 1 !important; transform: none !important; } /* ---- Reveal individual (fade + leve deslizamento para cima) ---- */ html.js-animations [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1); } /* Variante "fade": só opacidade, sem deslocar (usada em elementos com position:absolute, como os cartões sobrepostos do diagnóstico e do comparativo antes/depois — deslocar quebraria o encaixe visual) */ html.js-animations [data-animate="fade"] { transform: none; } html.js-animations [data-animate].is-visible { opacity: 1; transform: none; } /* ---- Reveal em grupo, com efeito cascata nos filhos diretos ---- */ html.js-animations [data-animate-group] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1); } html.js-animations [data-animate-group].is-visible > * { opacity: 1; transform: none; } /* Atraso incremental por posição — cria o efeito de cascata */ html.js-animations [data-animate-group].is-visible > *:nth-child(1) { transition-delay: 0.05s; } html.js-animations [data-animate-group].is-visible > *:nth-child(2) { transition-delay: 0.15s; } html.js-animations [data-animate-group].is-visible > *:nth-child(3) { transition-delay: 0.25s; } html.js-animations [data-animate-group].is-visible > *:nth-child(4) { transition-delay: 0.35s; } html.js-animations [data-animate-group].is-visible > *:nth-child(5) { transition-delay: 0.45s; } html.js-animations [data-animate-group].is-visible > *:nth-child(6) { transition-delay: 0.55s; } html.js-animations [data-animate-group].is-visible > *:nth-child(7) { transition-delay: 0.65s; } html.js-animations [data-animate-group].is-visible > *:nth-child(8) { transition-delay: 0.75s; } /* ---- Barras de progresso "enchendo" ---- O JS zera a largura no load (guardando o valor real em data-target-width) e devolve o valor quando o elemento entra na viewport; esta transição é o que faz a barra "encher" suavemente. */ html.js-animations .rating-bar-fill, html.js-animations .score-metric-fill, html.js-animations .tile2-preview__fill, html.js-animations .m-rating-bar-fill, html.js-animations .m-score-metric-fill { transition: width 3.5s cubic-bezier(0.16, 0.8, 0.24, 1); } /* ---- Respeita a preferência do sistema por menos movimento ---- */ @media (prefers-reduced-motion: reduce) { html.js-animations [data-animate], html.js-animations [data-animate-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; } html.js-animations .rating-bar-fill, html.js-animations .score-metric-fill, html.js-animations .tile2-preview__fill, html.js-animations .m-rating-bar-fill, html.js-animations .m-score-metric-fill { transition: none !important; } }