/* =============================================================================
   TAKA DESIGN — BOTÃO FLUTUANTE DO WHATSAPP
   -----------------------------------------------------------------------------
   Carregue por último (não pertence a nenhuma dobra). Em index.html o
   elemento fica FORA de <main> e de <footer>, direto em <body>: várias
   seções do site têm `isolation: isolate` (about/services/process/portfolio/
   cta-final/footer), e um `position: fixed` nascido DENTRO de uma delas fica
   preso na pilha de empilhamento daquela seção em vez de flutuar por cima de
   todo o resto da página. Como irmão de <main>/<footer>, ele sempre paint por
   cima.

   Cor do próprio Design System, não o verde oficial do WhatsApp: o MESMO
   degradê de .btn-neon (design-system.css: indigo-deep → violeta → rosa,
   com o mesmo `gradient-pan` e a mesma dupla camada de glow). Este é o botão
   de conversão mais visível do site — precisa ler como "a cor de ação da
   Taka", não como um widget de terceiro colado por cima. O ícone é só a
   forma reconhecível do glifo do WhatsApp, preenchida em branco.
   ============================================================================= */

.whatsapp-fab {
  position: fixed;
  right: clamp(1.125rem, 3vw, 2rem);
  bottom: clamp(1.125rem, 3vw, 2rem);
  z-index: 500;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.25rem, 6vw, 3.75rem);
  height: clamp(3.25rem, 6vw, 3.75rem);
  border-radius: 50%;
  isolation: isolate; /* o anel (::before) nasce ATRÁS do ícone, nunca por cima */

  color: #fff;
  background: linear-gradient(135deg, var(--ds-indigo-deep), var(--ds-violet) 55%, var(--ds-pink));
  background-size: 180% 180%;

  animation-name: gradient-pan, fab-rise;
  animation-duration: 7s, .9s;
  animation-timing-function: ease, var(--ds-ease);
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, both;
  animation-delay: 0s, 1.15s;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16) inset,
    0 10px 30px -10px rgba(99, 102, 241, .85),
    0 0 40px -14px rgba(236, 72, 153, .9);
  transition: transform .35s var(--ds-ease-spring), box-shadow .35s var(--ds-ease);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .26) inset,
    0 16px 42px -12px rgba(99, 102, 241, 1),
    0 0 62px -12px rgba(236, 72, 153, 1);
}
.whatsapp-fab:active { transform: translateY(0) scale(.96); }

.whatsapp-fab__icon {
  position: relative;
  z-index: 1;
  width: 54%;
  height: 54%;
  fill: currentColor;
}

/* O pulso — mesma construção do .pulse-dot do DS (crescer + esvanecer em
   loop), só dimensionado para um glow de botão inteiro, não um indicador de
   status de 8px. `pointer-events: none` para nunca roubar o clique do link. */
.whatsapp-fab__ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--ds-indigo-deep), var(--ds-violet) 55%, var(--ds-pink));
  animation: fab-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes fab-ping {
  0%          { opacity: .6; transform: scale(1); }
  75%, 100%   { opacity: 0; transform: scale(1.7); }
}

@keyframes fab-rise {
  from { opacity: 0; transform: translateY(22px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 539px) {
  .whatsapp-fab { right: .875rem; bottom: .875rem; }
}

/* -----------------------------------------------------------------------------
   Compacto — congela o degradê, PRESERVA a entrada
   -----------------------------------------------------------------------------
   ARMADILHA: o FAB declara DUAS animações no mesmo elemento, por propriedades
   longas — `gradient-pan` (infinita, varre background-position a cada frame,
   num elemento `position: fixed` que fica visível durante TODO o scroll) e
   `fab-rise` (finita, .9s, a entrada do botão). Um `animation: none` aqui
   mataria as duas: o botão apareceria estático, já posicionado, e a entrada
   aprovada sumiria. Por isso a lista é RECONSTRUÍDA com só a finita — cada
   propriedade longa redeclarada, para nenhum valor da lista antiga sobrar.

   O ANEL NÃO ENTRA NESTE CONGELAMENTO. `fab-ping` (.whatsapp-fab__ring) anima
   apenas `transform` e `opacity` — classe barata, o compositor resolve sem
   repintar — e é ele que faz o botão de conversão mais visível do site
   continuar chamando atenção. Continua pulsando, sem alteração nenhuma.

   `background-size: 100% 100%` pelo mesmo motivo documentado em app.css para
   .btn-neon (que usa EXATAMENTE o mesmo degradê e o mesmo gradient-pan):
   parado na posição 0% de um fundo a 180% 180%, o botão mostraria só
   índigo → violeta e perderia o rosa. A 100% o degradê inteiro cabe no
   círculo, imóvel — é a cor de ação da Taka por completo. */
@media (max-width: 899px) {
  .whatsapp-fab {
    animation-name: fab-rise;
    animation-duration: .9s;
    animation-timing-function: var(--ds-ease);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: 1.15s;
    background-size: 100% 100%;
  }
}

/* -----------------------------------------------------------------------------
   Toque — o hover do FAB não pode grudar
   -----------------------------------------------------------------------------
   Mesma condição de capacidade do bloco aprovado no Portfólio. No iOS o :hover
   fica preso no tap: o FAB voltaria da conversa com o WhatsApp levantado 3px e
   com o glow em escala, e ficaria assim até o usuário tocar em outro lugar.

   OS DOIS `:not()` SÃO OBRIGATÓRIOS, não especificidade decorativa:

   · `:focus-visible` COMPARTILHA A MESMA REGRA que `:hover` lá em cima. Uma
     neutralização de `.whatsapp-fab:hover` empataria em especificidade (0,2,0)
     e, vindo depois, apagaria o foco de teclado junto — inclusive o de um
     teclado externo ligado a um aparelho touch, que é exatamente quem cai
     neste @media.

   · `:active` é o ÚNICO retorno tátil que sobra no toque, e `.whatsapp-fab:active`
     também é (0,2,0): sem a exclusão, a neutralização (declarada depois) o
     venceria e o toque no botão passaria a não responder a nada.

   O que sobra é exatamente o alvo: o gesto de hover, e só ele, devolvido ao
   repouso que a regra base já pinta. */
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .whatsapp-fab:hover:not(:focus-visible):not(:active) {
    transform: none;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .16) inset,
      0 10px 30px -10px rgba(99, 102, 241, .85),
      0 0 40px -14px rgba(236, 72, 153, .9);
  }
}