/* Efeitos por seção (ver assets/js/efeitos.js) */
.fx-mock{position:relative;z-index:2}

/* ícones dos cartões "Layout exclusivo", "Pronto para o celular" e "Preparado para o Google" */
.fx-icone{position:relative;overflow:visible}
.fx-icone svg{transform-origin:50% 50%}

/* seta do mouse: aproxima, clica e solta uma onda */
.fx-clique svg{transform-origin:20% 20%}
.fx-clique:after{content:"";position:absolute;left:30%;top:30%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid currentColor;opacity:0;pointer-events:none}
.fx-ativo .fx-clique svg{animation:fx-seta 2.6s cubic-bezier(.3,.7,.3,1) infinite}
.fx-ativo .fx-clique:after{animation:fx-onda 2.6s ease-out infinite}
@keyframes fx-seta{
  0%{transform:translate(7px,7px)}
  30%{transform:translate(0,0)}
  38%{transform:translate(0,0) scale(.78)}
  46%,100%{transform:translate(0,0) scale(1)}
}
@keyframes fx-onda{
  0%,36%{opacity:0;transform:scale(.4)}
  40%{opacity:.9;transform:scale(.6)}
  70%,100%{opacity:0;transform:scale(2.6)}
}

/* celular: vibra */
.fx-ativo .fx-vibra svg{animation:fx-vibra 2.6s linear infinite}
.fx-vibra:before,.fx-vibra:after{content:"";position:absolute;top:50%;width:3px;height:12px;margin-top:-6px;border-radius:2px;border:solid currentColor;border-width:0 2px;opacity:0}
.fx-vibra:before{left:2px;border-width:0 0 0 2px}
.fx-vibra:after{right:2px;border-width:0 2px 0 0}
.fx-ativo .fx-vibra:before,.fx-ativo .fx-vibra:after{animation:fx-ondas 2.6s linear infinite}
@keyframes fx-vibra{
  0%,4%{transform:rotate(0)}
  6%{transform:rotate(-14deg)}10%{transform:rotate(13deg)}14%{transform:rotate(-12deg)}18%{transform:rotate(11deg)}
  22%{transform:rotate(-9deg)}26%{transform:rotate(8deg)}30%{transform:rotate(-5deg)}34%{transform:rotate(3deg)}
  38%,100%{transform:rotate(0)}
}
@keyframes fx-ondas{0%,4%{opacity:0}8%,32%{opacity:.75}38%,100%{opacity:0}}

/* lupa: zoom */
.fx-zoom svg{transform-origin:45% 45%}
.fx-ativo .fx-zoom svg{animation:fx-lupa 2.6s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes fx-lupa{
  0%,10%{transform:scale(1) rotate(0)}
  32%{transform:scale(1.55) rotate(-8deg)}
  48%{transform:scale(1.45) rotate(-8deg)}
  66%,100%{transform:scale(1) rotate(0)}
}
.fx-ativo .fx-zoom{animation:fx-fundo 2.6s ease infinite}
@keyframes fx-fundo{0%,10%,66%,100%{box-shadow:0 0 0 0 rgba(42,53,184,0)}32%,48%{box-shadow:0 0 0 6px rgba(42,53,184,.12)}}

@media (prefers-reduced-motion:reduce){
  .fx-icone svg,.fx-icone,.fx-icone:before,.fx-icone:after{animation:none!important}
}

/* frase digitada na barra do navegador do topo */
.fx-digita #hero .hero-browser > label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fx-digitando{position:absolute;left:16px;right:16px;top:0;bottom:0;display:flex;align-items:center;font-weight:500;color:#111216;white-space:nowrap;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s ease}
.fx-digitando i{display:inline-block;width:2px;height:1.15em;margin-left:2px;background:#111216;animation:fx-cursor 1s steps(1) infinite}
.fx-modo-frase .fx-digitando{opacity:1}
.fx-modo-frase > :not(.fx-digitando){visibility:hidden}
@keyframes fx-cursor{50%{opacity:0}}