/* ========================================================================== Animacoes de entrada ========================================================================== Unica camada que NAO existe na pagina original. Regras que guiaram a implementacao: - so anima opacity e transform, entao nao ha reflow nem deslocamento de layout; - o estado inicial (invisivel) so e' aplicado quando recebe .anim-on, classe que o animacoes.js adiciona. Sem JS, a pagina aparece inteira, exatamente como o original; - o estado final e' sempre opacity:1 / transform:none, ou seja, o resultado depois da animacao e' pixel a pixel igual ao original; - prefers-reduced-motion desliga tudo. ========================================================================== */ :root { --anim-duracao: 700ms; --anim-curva: cubic-bezier(0.22, 0.61, 0.36, 1); --anim-deslocamento: 26px; } /* --- estado inicial (somente com JS ativo) ------------------------------- */ .anim-on [data-anim] { opacity: 0; will-change: opacity, transform; transition: opacity var(--anim-duracao) var(--anim-curva), transform var(--anim-duracao) var(--anim-curva); transition-delay: var(--anim-atraso, 0ms); } .anim-on [data-anim="sobe"] { transform: translate3d(0, var(--anim-deslocamento), 0); } .anim-on [data-anim="desce"] { transform: translate3d(0, calc(var(--anim-deslocamento) * -1), 0); } .anim-on [data-anim="esquerda"] { transform: translate3d(calc(var(--anim-deslocamento) * -1.4), 0, 0); } .anim-on [data-anim="direita"] { transform: translate3d(calc(var(--anim-deslocamento) * 1.4), 0, 0); } .anim-on [data-anim="zoom"] { transform: scale(0.94); } .anim-on [data-anim="fade"] { transform: none; } /* --- estado revelado ---------------------------------------------------- */ .anim-on [data-anim].anim-visivel { opacity: 1; transform: none; } /* solta o will-change quando a animacao termina */ .anim-on [data-anim].anim-pronto { will-change: auto; transition: none; } /* --- botao flutuante do WhatsApp ---------------------------------------- */ .anim-on .fab { opacity: 0; transform: scale(0.6) translate3d(0, 12px, 0); transition: opacity 500ms var(--anim-curva), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1); } .anim-on .fab.anim-visivel { opacity: 1; transform: none; } /* --- rolagem suave nas ancoras dos botoes de cotacao -------------------- */ html { scroll-behavior: smooth; } /* --- acessibilidade: respeita a preferencia do sistema ------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .anim-on [data-anim], .anim-on [data-anim].anim-visivel, .anim-on .fab, .anim-on .fab.anim-visivel { opacity: 1; transform: none; transition: none; will-change: auto; } }