/* =========================================================
   STRYVEFIT — INTERAÇÕES PREMIUM (B1.1/B2)
   =========================================================
   Sistema reutilizável de CTA principal animado.

   Aplicado via classe visual .sf-animated-cta
   (Home mantém também o seletor #btnCriarFicha, sem
   nenhuma mudança visual em relação ao B1.1 aprovado).

   Efeito aprovado: o PRÓPRIO FUNDO do botão é um
   gradiente largo da paleta STRYVEFIT que desliza
   continuamente (background-position animado):

     red-orange  #ff3d00
     orange      #ff6500
     bright      #ff7a00 (transição interna do gradiente)
     amber/gold  #ff9800 → #ffb000

   O glow atrás do botão (::after) usa o MESMO gradiente
   e a MESMA animação — cores sempre sincronizadas.

   Arquivo carregado SOMENTE pelas páginas públicas do
   funil + sucesso. A página de Oferta NÃO carrega
   este arquivo.

   CSS-only. Sem JS, sem libs. Anima somente
   background-position/opacity/transform.
   ========================================================= */


/* =========================================================
   1) GRADIENTE ANIMADO — FUNDO DO BOTÃO
   ========================================================= */

#btnCriarFicha,
.sf-animated-cta {
  position: relative;

  isolation: isolate;

  background-image:
    linear-gradient(
      90deg,
      #ff3d00 0%,
      #ff6500 25%,
      #ff9800 50%,
      #ffb000 62%,
      #ff6500 80%,
      #ff3d00 100%
    );

  background-size: 400% 100%;

  color: #ffffff;

  will-change: background-position;

  animation:
    btn-gradient-flow
    4.5s
    ease-in-out
    infinite
    alternate;
}

/* normaliza variações de borda entre botões (ex.: telegram) */
.sf-animated-cta.sf-animated-cta {
  border-color: transparent;
}


/* =========================================================
   2) GLOW EXTERNO SINCRONIZADO (::after, atrás do botão)
   Mesmo gradiente + mesma animação = o halo acompanha
   as cores do botão em tempo real.
   ========================================================= */

#btnCriarFicha::after,
.sf-animated-cta::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  border-radius: inherit;

  pointer-events: none;

  background-image:
    linear-gradient(
      90deg,
      #ff3d00 0%,
      #ff6500 25%,
      #ff9800 50%,
      #ffb000 62%,
      #ff6500 80%,
      #ff3d00 100%
    );

  background-size: 400% 100%;

  filter: blur(16px);

  opacity: 0.5;

  transition:
    opacity 0.25s ease;

  will-change: background-position;

  animation:
    btn-gradient-flow
    4.5s
    ease-in-out
    infinite
    alternate;
}


/* =========================================================
   MOVIMENTO DO GRADIENTE — uma única @keyframes
   reutilizada por todos os botões (background-position
   0% → 100% com size 400% percorre toda a faixa de cores
   e retorna suavemente).
   ========================================================= */

@keyframes btn-gradient-flow {

  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }

}


/* =========================================================
   HOVER — somente dispositivos com apontador preciso.
   Gradiente CONTINUA fluindo (sem reiniciar animação);
   apenas lift + scale sutil + glow um pouco mais intenso.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  #btnCriarFicha:hover,
  .sf-animated-cta.sf-animated-cta:hover {
    transform: translateY(-2px) scale(1.015);
  }

  #btnCriarFicha:hover::after,
  .sf-animated-cta.sf-animated-cta:hover::after {
    opacity: 0.70;
  }

}


/* =========================================================
   ACTIVE — sensação física de pressão no clique
   (sem JavaScript, sem atraso de navegação)
   ========================================================= */

#btnCriarFicha:active,
.sf-animated-cta.sf-animated-cta:active {
  transform: translateY(1px) scale(0.98);
}


/* =========================================================
   FOCUS — acessibilidade de teclado com halo visível
   ========================================================= */

#btnCriarFicha:focus-visible,
.sf-animated-cta.sf-animated-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;

  box-shadow:
    var(--shadow-orange, 0 14px 34px rgba(255, 106, 0, 0.25)),
    0 0 0 6px rgba(255, 106, 0, 0.35);
}


/* =========================================================
   ACESSIBILIDADE — prefers-reduced-motion
   Gradiente para (posição estática); botões permanecem
   bonitos e funcionais.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #btnCriarFicha,
  #btnCriarFicha::after,
  .sf-animated-cta,
  .sf-animated-cta::after {
    animation: none;
  }

  #btnCriarFicha:hover,
  #btnCriarFicha:active,
  .sf-animated-cta.sf-animated-cta:hover,
  .sf-animated-cta.sf-animated-cta:active {
    transform: none;
  }

}