/* ✈️ Aviõezinhos cruzando o site.
   O que voa é o PRÓPRIO símbolo da marca — a logo da Gonpack APP já é um
   aviãozinho de papel com o ponto âmbar. Não precisa de avião desenhado
   com um logo colado em cima.

   Pedido dele (18/08): "não coloca muito para as pessoas não ficarem
   tontas". Então são só 3, bem devagar (de 52 a 78 segundos para
   atravessar), translúcidos e sempre no MESMO sentido — nada de aviões
   cruzando em direções opostas, que é o que embrulha o estômago.

   COR: #0F5FBD, tirada do próprio logo (assets/logo-horizontal-claro.svg).
   Serve nos dois fundos do site — é escura o bastante para aparecer no
   branco das seções de baixo e clara o bastante para aparecer no navy do
   topo. O ponto âmbar #FFB13D é o mesmo do símbolo.

   ATRÁS DO CONTEÚDO (pedido dele, 18/08): o avião passa por cima do
   FUNDO das seções, mas por baixo de todo texto e cartão — assim nunca
   atrapalha a leitura. Quem faz isso é o par de z-index abaixo: a camada
   fica no 0 (acima do fundo das seções, que nem é posicionado) e todo
   .wrap sobe para o 1. Mexer num sem mexer no outro quebra o efeito.

   pointer-events:none é obrigatório — sem isso a camada engole os
   cliques dos botões que estiverem embaixo dela. */
#avioes{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* No index (e nas páginas do styles.css) todo conteúdo mora dentro de um
   .wrap. Nas páginas com <style> próprio — trabalhe-conosco,
   seja-influencer e influencer — os contêineres são outros: .logo,
   .caixa e .rodape. Subindo os quatro para o z-index 1, o avião passa
   por baixo de texto, cartão e botão em TODAS as páginas.

   Página nova? Se ela não usar nenhuma destas classes, o avião vai
   passar por CIMA do texto dela — é só acrescentar o contêiner aqui. */
.wrap,
.logo,
.caixa,
.rodape{position:relative;z-index:1}
#avioes i{position:absolute;left:0;display:block;color:#0F5FBD;
  animation-name:voar;animation-timing-function:linear;
  animation-iteration-count:infinite;will-change:transform}
#avioes svg{display:block;width:100%;height:auto}

/* Opacidade num lugar só. Ele achou o primeiro tom claro demais
   (18/08) — subiu, e dá para subir mais sem risco de leitura, porque
   agora o avião passa por trás do texto. */
#avioes i:nth-child(1){opacity:.30}
#avioes i:nth-child(2){opacity:.24}
#avioes i:nth-child(3){opacity:.27}

@keyframes voar{
  from{transform:translate3d(-16vw,0,0) rotate(-5deg)}
  to  {transform:translate3d(116vw,-7vh,0) rotate(-5deg)}
}

/* Quem pediu ao sistema para reduzir animação não vê avião nenhum.
   Enjoo e labirintite são exatamente o caso de uso desta regra. */
@media (prefers-reduced-motion: reduce){
  #avioes{display:none}
}

/* No celular a tela é estreita: 2 aviões já é bastante. */
@media (max-width:640px){
  #avioes i:nth-child(3){display:none}
}