/* ============================================================
   MOTION.CSS  —  Entrada coreografada do hero (motion blur)

   Tudo roda em --hero-speed (hoje 1.2x). Os valores das variáveis são
   escritos em velocidade 1; o momento real é o valor ÷ 1,2.

   Sequência real (valor escrito entre parênteses):
     0,00s  título — palavra a palavra, 1,67s em cada (2s), com
            0,06s entre elas (0,07s). Como as palavras seguem a
            ordem do texto, a nitidez varre de cima para baixo em
            qualquer largura de tela.
     0,83s  descrição, 1,25s (1s / 1,5s)
     1,00s  telefone + logo, selo e botão, 1,67s (1,2s / 2s)
     1,25s  boxes flutuantes, 1s cada (1,5s / 1,2s), 0,17s entre eles:
            1,25s esquerda · 1,42s cima · 1,58s baixo
   Fim da sequência: ~2,67s (o telefone, o logo e o selo fecham juntos).

   Depois da entrada, os boxes seguem flutuando em elipse (heroFlutuaA/B/C).

   O logo e o selo estão amarrados ao telefone (--hero-t5 aponta para
   --hero-t3), então movendo o telefone os três andam juntos.

   As etapas se sobrepõem de propósito: o título ainda está ganhando
   nitidez enquanto as demais entram.

   Para ajustar o ritmo, mexa só nas variáveis abaixo: os tXX são os
   atrasos de cada etapa e os --hero-dur, a duração de cada entrada.

   Por que @keyframes e não transition: o main.js aplica estilos
   inline no selo e adiciona classes em tempos próprios. Animação
   CSS vence estilo inline na cascata, então a sequência acontece
   sem alterar uma linha de JS.

   Carregado DEPOIS de styles.css; nenhum arquivo antigo é editado.
   ============================================================ */

:root{
  /* Velocidade geral da sequência. Todos os atrasos e durações abaixo
     são divididos por este número na hora de animar: 1 = tempos como
     escritos, 1.2 = 1,2x mais rápido, 0.8 = mais lento. */
  --hero-speed:1.2;

  /* Atrasos: quando cada etapa começa (em velocidade 1).
     Os que apontam para outra variável ficam amarrados a ela — mudar
     o telefone move junto o logo, o selo e os boxes. */
  --hero-t1:0s;                        /* título (1ª palavra)        */
  --hero-t2:1s;                        /* descrição                  */
  /* Telefone (e com ele logo e selo): 0,2s depois da descrição → 1,2s */
  --hero-phone-lag:.2s;
  --hero-t3:calc(var(--hero-t2) + var(--hero-phone-lag));
  /* Boxes: amarrados ao telefone, com 0,3s próprio de atraso —
     o primeiro entra em 1,5s. */
  --hero-box-lag:.3s;
  /* Defasagem de um box para o seguinte, na ordem esquerda → cima → baixo */
  --hero-box-step:.2s;
  --hero-t4:calc(var(--hero-t3) + var(--hero-box-lag));
  --hero-t5:var(--hero-t3);            /* logo + selo — com o telefone */

  /* Defasagem entre uma palavra do título e a seguinte. É o que faz
     a nitidez varrer o título de cima para baixo em vez de o bloco
     inteiro desfocar por igual. */
  --hero-word-step:.07s;

  /* Durações: quanto cada entrada leva para ficar nítida. */
  --hero-dur-title:2s;   /* cada palavra do título */
  --hero-dur-descr:1.5s; /* descrição         */
  --hero-dur-phone:2s;   /* telefone          */
  --hero-dur-box:1.2s;   /* boxes             */
  /* Logo e selo acompanham o telefone do começo ao fim: começam
     juntos e assentam juntos, em vez de entrar num piscar. */
  --hero-dur-brand:var(--hero-dur-phone);
  --hero-ease:cubic-bezier(.22,1,.36,1);
}

/* A máscara do hero precisa liberar o overflow: com overflow:hidden
   o desfoque é cortado rente à borda da linha e o efeito some. */
#hero-title .line-wrap,
#hero-sub   .line-wrap{overflow:visible}

/* O percurso vem de --hero-rise, então cada elemento que usa este
   keyframe escolhe o quanto sobe sem precisar de um keyframe próprio. */
@keyframes heroBlurIn{
  from{opacity:0;transform:translateY(var(--hero-rise,14px));filter:blur(12px)}
  to  {opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes heroBlurInScale{
  from{opacity:0;transform:scale(.97);filter:blur(16px)}
  to  {opacity:1;transform:scale(1);filter:blur(0)}
}
/* Sem transform: os boxes têm parallax por estilo inline no main.js,
   e uma animação com fill:both congelaria esse transform para sempre. */
@keyframes heroBlurInFlat{
  from{opacity:0;filter:blur(10px)}
  to  {opacity:1;filter:blur(0)}
}
/* Logo e selo: metade do deslocamento das demais entradas. Com o
   percurso curto eles assentam no lugar em vez de entrar voando. */
@keyframes heroBrandIn{
  from{opacity:0;transform:translateY(7px);filter:blur(10px)}
  to  {opacity:1;transform:translateY(0);filter:blur(0)}
}

/* 1 — Título: quem anima são as palavras (.hw), não o bloco.
   O .line-inner fica neutro para não desfocar tudo por igual — sem
   isto o styles.css o deixaria em opacity:0 esperando o main.js. */
#hero-title .line-inner{
  opacity:1;
  transform:none;
  filter:none;
  animation:none;
}
#hero-title .hw{
  display:inline-block;      /* filter e transform não se aplicam a inline puro */
  animation:heroBlurIn calc(var(--hero-dur-title) / var(--hero-speed)) var(--hero-ease)
            calc((var(--hero-t1) + var(--i) * var(--hero-word-step)) / var(--hero-speed)) both;
}
/* 2 — Descrição (sobe pouco, para não saltar) */
#hero-sub .line-inner{
  --hero-rise:5px;
  animation:heroBlurIn calc(var(--hero-dur-descr) / var(--hero-speed)) var(--hero-ease)
            calc(var(--hero-t2) / var(--hero-speed)) both;
}
/* 3 — Telefone (0,2s depois da descrição) */
.hero-phone-scene{
  animation:heroBlurInScale calc(var(--hero-dur-phone) / var(--hero-speed)) var(--hero-ease)
            calc(var(--hero-t3) / var(--hero-speed)) both;
}
/* 4 — Boxes flutuantes, um a um.
   A ordem é visual, não a do HTML: --bi 0 é a da esquerda, 1 a de
   cima e 2 a de baixo. Por isso o índice vive no CSS e não na
   marcação — reordenar é mexer em três números aqui. */
.hfc-tl{--bi:0}   /* esquerda — "mais clientes atendidos"      */
.hfc-tr{--bi:1}   /* cima     — "nota fiscal pelo WhatsApp"    */
.hfc-br{--bi:2}   /* baixo    — "seu app, sua marca"           */

.hero-float-card{
  --bi:0;
  animation:heroBlurInFlat calc(var(--hero-dur-box) / var(--hero-speed)) var(--hero-ease)
            calc((var(--hero-t4) + var(--bi) * var(--hero-box-step)) / var(--hero-speed)) both,
            var(--hfc-nome) var(--hfc-dur) linear var(--hfc-atraso) infinite;
}

/* Flutuação contínua: cada card dá voltas numa elipse própria, sem parar.
   Vinte e quatro pontos por volta (a cada 15°) com velocidade constante: a direção
   muda pouco de um ponto para o outro, então o movimento não "trava" nas
   viradas como acontecia com um caminho de quatro cantos.

   Usa as propriedades `translate` e `rotate`, e não `transform`: o
   paralaxe do main.js escreve transform nos cards a cada rolagem, e uma
   animação de transform passaria por cima dele. As três se somam.

   O atraso negativo começa a animação no meio do ciclo: os cards já
   nascem em fases diferentes e nunca se sincronizam. */
@keyframes heroFlutuaA{
  0%{translate:0.00px 0.00px;rotate:0.00deg}
  4.16667%{translate:0.65px -0.07px;rotate:0.08deg}
  8.33333%{translate:1.25px -0.27px;rotate:0.15deg}
  12.5%{translate:1.77px -0.59px;rotate:0.21deg}
  16.6667%{translate:2.17px -1.00px;rotate:0.26deg}
  20.8333%{translate:2.41px -1.48px;rotate:0.29deg}
  25%{translate:2.50px -2.00px;rotate:0.30deg}
  29.1667%{translate:2.41px -2.52px;rotate:0.29deg}
  33.3333%{translate:2.17px -3.00px;rotate:0.26deg}
  37.5%{translate:1.77px -3.41px;rotate:0.21deg}
  41.6667%{translate:1.25px -3.73px;rotate:0.15deg}
  45.8333%{translate:0.65px -3.93px;rotate:0.08deg}
  50%{translate:0.00px -4.00px;rotate:0.00deg}
  54.1667%{translate:-0.65px -3.93px;rotate:-0.08deg}
  58.3333%{translate:-1.25px -3.73px;rotate:-0.15deg}
  62.5%{translate:-1.77px -3.41px;rotate:-0.21deg}
  66.6667%{translate:-2.17px -3.00px;rotate:-0.26deg}
  70.8333%{translate:-2.41px -2.52px;rotate:-0.29deg}
  75%{translate:-2.50px -2.00px;rotate:-0.30deg}
  79.1667%{translate:-2.41px -1.48px;rotate:-0.29deg}
  83.3333%{translate:-2.17px -1.00px;rotate:-0.26deg}
  87.5%{translate:-1.77px -0.59px;rotate:-0.21deg}
  91.6667%{translate:-1.25px -0.27px;rotate:-0.15deg}
  95.8333%{translate:-0.65px -0.07px;rotate:-0.08deg}
  100%{translate:0.00px 0.00px;rotate:0.00deg}
}
@keyframes heroFlutuaB{
  0%{translate:0.00px 0.00px;rotate:0.00deg}
  4.16667%{translate:-0.52px -0.09px;rotate:-0.06deg}
  8.33333%{translate:-1.00px -0.33px;rotate:-0.12deg}
  12.5%{translate:-1.41px -0.73px;rotate:-0.18deg}
  16.6667%{translate:-1.73px -1.25px;rotate:-0.22deg}
  20.8333%{translate:-1.93px -1.85px;rotate:-0.24deg}
  25%{translate:-2.00px -2.50px;rotate:-0.25deg}
  29.1667%{translate:-1.93px -3.15px;rotate:-0.24deg}
  33.3333%{translate:-1.73px -3.75px;rotate:-0.22deg}
  37.5%{translate:-1.41px -4.27px;rotate:-0.18deg}
  41.6667%{translate:-1.00px -4.67px;rotate:-0.12deg}
  45.8333%{translate:-0.52px -4.91px;rotate:-0.06deg}
  50%{translate:0.00px -5.00px;rotate:0.00deg}
  54.1667%{translate:0.52px -4.91px;rotate:0.06deg}
  58.3333%{translate:1.00px -4.67px;rotate:0.13deg}
  62.5%{translate:1.41px -4.27px;rotate:0.18deg}
  66.6667%{translate:1.73px -3.75px;rotate:0.22deg}
  70.8333%{translate:1.93px -3.15px;rotate:0.24deg}
  75%{translate:2.00px -2.50px;rotate:0.25deg}
  79.1667%{translate:1.93px -1.85px;rotate:0.24deg}
  83.3333%{translate:1.73px -1.25px;rotate:0.22deg}
  87.5%{translate:1.41px -0.73px;rotate:0.18deg}
  91.6667%{translate:1.00px -0.33px;rotate:0.13deg}
  95.8333%{translate:0.52px -0.09px;rotate:0.06deg}
  100%{translate:0.00px 0.00px;rotate:0.00deg}
}
@keyframes heroFlutuaC{
  0%{translate:0.00px 0.00px;rotate:0.00deg}
  4.16667%{translate:0.78px -0.06px;rotate:0.06deg}
  8.33333%{translate:1.50px -0.23px;rotate:0.11deg}
  12.5%{translate:2.12px -0.51px;rotate:0.16deg}
  16.6667%{translate:2.60px -0.87px;rotate:0.19deg}
  20.8333%{translate:2.90px -1.30px;rotate:0.21deg}
  25%{translate:3.00px -1.75px;rotate:0.22deg}
  29.1667%{translate:2.90px -2.20px;rotate:0.21deg}
  33.3333%{translate:2.60px -2.62px;rotate:0.19deg}
  37.5%{translate:2.12px -2.99px;rotate:0.16deg}
  41.6667%{translate:1.50px -3.27px;rotate:0.11deg}
  45.8333%{translate:0.78px -3.44px;rotate:0.06deg}
  50%{translate:0.00px -3.50px;rotate:0.00deg}
  54.1667%{translate:-0.78px -3.44px;rotate:-0.06deg}
  58.3333%{translate:-1.50px -3.27px;rotate:-0.11deg}
  62.5%{translate:-2.12px -2.99px;rotate:-0.16deg}
  66.6667%{translate:-2.60px -2.63px;rotate:-0.19deg}
  70.8333%{translate:-2.90px -2.20px;rotate:-0.21deg}
  75%{translate:-3.00px -1.75px;rotate:-0.22deg}
  79.1667%{translate:-2.90px -1.30px;rotate:-0.21deg}
  83.3333%{translate:-2.60px -0.87px;rotate:-0.19deg}
  87.5%{translate:-2.12px -0.51px;rotate:-0.16deg}
  91.6667%{translate:-1.50px -0.23px;rotate:-0.11deg}
  95.8333%{translate:-0.78px -0.06px;rotate:-0.06deg}
  100%{translate:0.00px 0.00px;rotate:0.00deg}
}
.hfc-tl{--hfc-nome:heroFlutuaA;--hfc-dur:9s;  --hfc-atraso:-2s}
.hfc-tr{--hfc-nome:heroFlutuaB;--hfc-dur:11s; --hfc-atraso:-5s}
.hfc-br{--hfc-nome:heroFlutuaC;--hfc-dur:7.5s;--hfc-atraso:-8s}
/* 5 — Logo + botão (entrada mais longa e com menos percurso). O selo
   "100% White Label" não está aqui: ele mora dentro do telefone e entra
   junto com ele. */
.hero-logo,
.hero-cta{
  animation:heroBrandIn calc(var(--hero-dur-brand) / var(--hero-speed)) var(--hero-ease)
            calc(var(--hero-t5) / var(--hero-speed)) both;
}

/* Quem pediu menos movimento vê o hero pronto, sem sequência nem
   desfoque. O bloco do styles.css zera opacity/transform, mas não
   conhece filter nem estas animações. */
@media (prefers-reduced-motion:reduce){
  #hero-title .line-inner,
  #hero-title .hw,
  #hero-sub   .line-inner,
  .hero-phone-scene,
  .hero-float-card,
  .hero-logo,
  .hero-cta{
    animation:none!important;
    translate:none!important;
    opacity:1!important;
    filter:none!important;
  }
  #hero-title .line-inner,
  #hero-title .hw,
  #hero-sub   .line-inner,
  .hero-phone-scene,
  .hero-logo,
  .hero-cta{transform:none!important}
}


/* ========================
   BOTÃO FLUTUANTE DO WHATSAPP — oscilação
   ======================== */
/* Sobe e desce de leve, para o botão chamar o olho sem piscar nem
   saltar. Usa a propriedade `translate`, e não `transform`, para não
   brigar com o translateY que centraliza o balão "Fale conosco". */
@keyframes waFlutua{
  0%,100%{ translate:0 0 }
  50%    { translate:0 -8px }
}
.wa-float{animation:waFlutua 3s ease-in-out infinite}
/* Para enquanto o ponteiro está em cima: o balão fica parado para ler
   e o alvo do clique não foge. */
.wa-float:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .wa-float{animation:none;translate:none}
}