/* =========================================================== Meu Ponto de Luz — camada de movimento da página de venda Complementa a venda.css; nada aqui redefine cor, fonte ou layout. Regra da casa: só animamos `opacity` e `transform`. Qualquer outra propriedade (top, height, width, margin) obriga o navegador a recalcular o layout a cada quadro e engasga em celular fraco. Tudo abaixo depende da classe .js-mov no , colocada por um script no . Sem JavaScript a classe não existe, os estados iniciais não valem e a página aparece inteira, como hoje. =========================================================== */ /* ---------------------------------------------- estado inicial */ .js-mov [data-mov]{ opacity:0; transform:translate3d(0,22px,0); } /* elementos que já entraram: o JS devolve o controle ao CSS */ .js-mov [data-mov].mov-pronto{ opacity:1; transform:none; } /* o celular do herói entra com uma inclinação mínima que se desfaz */ .js-mov .palco[data-mov]{ transform:translate3d(0,34px,0) scale(.975); } /* ---------------------------------------------- halo do sol */ /* Segue o mouse no desktop. É a luz da manhã reagindo a quem chegou — o mesmo vocabulário do produto, não um efeito de vitrine. */ .mov-halo{ position:absolute; top:0;left:0; width:620px;height:620px; margin:-310px 0 0 -310px; border-radius:50%; pointer-events:none; z-index:-1; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(246,217,172,.40) 0%, rgba(246,217,172,.16) 34%, rgba(246,217,172,0) 68%); transition:opacity 1.1s ease; } .mov-halo.mov-visivel{opacity:1} /* ---------------------------------------------- brilho do destaque */ /* Uma única passada de luz sobre "às 6 da manhã", quando o herói entra. Passa uma vez e nunca mais: brilho em loop vira anúncio piscando. O recorte no texto (background-clip) só entra junto com a classe que o JS coloca, e sai quando a animação termina. Assim, se o navegador não suportar o recorte ou o JS falhar no meio, o texto nunca fica transparente — o pior caso é não haver brilho nenhum. */ .js-mov .heroi h1 .luzida.mov-brilho{ background-image:linear-gradient(100deg, var(--terracota) 0%, var(--terracota) 40%, #EFC489 50%, var(--terracota) 60%, var(--terracota) 100%); background-repeat:no-repeat; background-size:260% 100%; background-position:-160% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:mov-passar-luz 1.6s cubic-bezier(.4,0,.2,1) 1 both; } @keyframes mov-passar-luz{ from{background-position:-160% 0} to{background-position:160% 0} } /* ---------------------------------------------- a conversa no celular */ /* Os balões nunca saem do fluxo — só ficam transparentes. Se usassem `display:none`, a tela do celular encolheria e voltaria a crescer a cada mensagem, empurrando o herói inteiro. */ .js-mov .fone-tela [data-cena]{ opacity:0; transform:translate3d(0,10px,0); } .js-mov .fone-tela [data-cena].mov-dito{ opacity:1; transform:none; transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1); } /* a bolha de reticências, criada pelo script. Fica absoluta sobre o lugar exato da mensagem que vem a seguir, então não ocupa espaço próprio: ela vira a mensagem. */ .mov-digitando{ position:absolute; left:14px; /* mesmo recuo do padding da .fone-tela */ display:flex;align-items:center;gap:5px; padding:14px 15px; background:#FFFFFF; border:1px solid var(--linha); border-radius:14px 14px 14px 4px; box-shadow:0 1px 2px rgba(34,64,95,.04); opacity:0; transform:translate3d(0,6px,0); transition:opacity .3s ease,transform .3s ease; pointer-events:none; } .mov-digitando.mov-visivel{opacity:1;transform:none} .mov-digitando span{ width:6px;height:6px;border-radius:50%; background:var(--tinta-3); animation:mov-ponto 1.3s ease-in-out infinite; } .mov-digitando span:nth-child(2){animation-delay:.18s} .mov-digitando span:nth-child(3){animation-delay:.36s} @keyframes mov-ponto{ 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} } /* ---------------------------------------------- o mapa acendendo */ /* A seção diz "Você nunca está orando sozinho" — e o mapa já chegava com tudo aceso desde sempre. Agora o Brasil se desenha e as luzes acendem uma a uma, na primeira vez que a seção entra na tela. Depois disso voltam a respirar exatamente como já faziam. O `animation:none` é o que segura o pulso: sem ele a animação `respirar` mandaria na opacidade e nenhuma luz poderia ficar apagada esperando a vez. */ .js-mov .mapa-contorno{ fill-opacity:0; transition:fill-opacity 1.3s ease .8s; } .js-mov .mapa-svg.mov-aceso .mapa-contorno{fill-opacity:1} .js-mov .mapa-svg .pulso{ animation:none; opacity:0; transition:opacity .85s ease; } .js-mov .mapa-svg .pulso.mov-acesa{opacity:1} /* devolvida ao pulso original — o atraso por cidade continua no style inline que o PHP escreve, então a dessincronia se mantém */ .js-mov .mapa-svg .pulso.mov-respira{ animation:respirar 4.2s ease-in-out infinite; transition:none; } /* ---------------------------------------------- peso ao toque */ /* Um botão que não responde ao dedo parece imagem. 2,5% de recuo é o suficiente para o toque ter peso sem virar brinquedo. */ .btn{transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease} .btn:active{transform:scale(.975)} @media (hover:hover) and (pointer:fine){ .btn-luz:hover{transform:translateY(-2px)} } /* os cartões de plano ganham relevo no ponteiro, não no toque */ @media (hover:hover) and (pointer:fine){ .plano{transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease} .plano:hover{transform:translateY(-4px)} } /* ---------------------------------------------- respeito ao usuário */ /* Quem pediu menos movimento no sistema recebe a página pronta, sem nenhuma entrada. Não é acessibilidade decorativa: movimento causa enjoo de verdade em quem tem sensibilidade vestibular. */ @media (prefers-reduced-motion:reduce){ .js-mov [data-mov]{opacity:1!important;transform:none!important} /* a conversa do celular chega inteira, sem a cena */ .js-mov .fone-tela [data-cena]{opacity:1;transform:none;transition:none} .mov-digitando{display:none} /* o mapa chega pronto: aceso e preenchido, sem acender na frente */ .js-mov .mapa-svg .pulso{opacity:1;transition:none} .js-mov .mapa-contorno{fill-opacity:1;transition:none} .mov-halo{display:none} .js-mov .heroi h1 .luzida.mov-brilho{ background-image:none; -webkit-text-fill-color:currentColor; animation:none; } .btn:active{transform:none} }