/* ════════════════════════════════════════════════════════════
   CTA BETA — "Manda um Broady"
   Botão dispara horizontalmente: prepara → lança p/ direita
   → retorna da esquerda (mesma linha) em estado "Entregue"
   → volta ao azul "Saber Mais" → repete.
   Só anima no hover do botão (classe .is-firing — one-shot).
   ════════════════════════════════════════════════════════════ */

.cta-section.is-beta {
  position: relative;
  overflow: hidden;
  padding: 80px 0 110px;
}

.cta-section.is-beta .cta-content {
  position: relative;
  z-index: 2;
}

.cta-stage {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

/* ═══════════ Rastro horizontal atrás do botão ═══════════ */
.cta-streak {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 5px;
  transform: translateY(-50%);
  /* Gradiente: mais intenso no lado do botão (direita), fade longo pra trás (esquerda) */
  background: linear-gradient(90deg,
    rgba(24, 62, 235, 0)    0%,
    rgba(24, 62, 235, 0.35) 35%,
    rgba(24, 62, 235, 0.8)  75%,
    rgba(24, 62, 235, 1)    100%);
  border-radius: 6px;
  filter: blur(0.5px);
  box-shadow: 0 0 12px rgba(24, 62, 235, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.cta-section.is-beta.is-firing .cta-streak {
  animation: cta-streak 2.5s ease-out 1 forwards;
}

/* ═══════════ Botão real: a animação ═══════════ */
.cta-section.is-beta .cta-stage > .cta-link {
  position: relative;
  overflow: hidden;
  z-index: 2;
  transform-origin: 50% 50%;
  will-change: transform, opacity, background-color, box-shadow;
  /* Anula a transition herdada de .btn-blue (opacity/transform) que atrasa o primeiro frame da animação */
  transition: none !important;
}
.cta-section.is-beta .cta-stage > .cta-link:hover {
  /* Anula o :hover do .btn-blue (opacity 0.88) que sobrepõe a animação */
  opacity: 1;
}
.cta-section.is-beta.is-firing .cta-stage > .cta-link {
  animation: cta-fire 2.5s cubic-bezier(0.3, 0.05, 0.25, 1) 1 forwards;
}

/* Rótulos com troca "Saber Mais" ↔ "Entregue" */
.cta-link__label {
  display: inline-flex;
  align-items: center;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: #FFFFFF;
}
.cta-section.is-beta.is-firing .cta-link__label {
  animation: cta-label-swap 2.5s steps(1, end) 1 forwards;
}

.cta-link__delivered {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0.2px;
  opacity: 0;
  pointer-events: none;
}
.cta-link__delivered svg {
  width: 18px;
  height: 18px;
  color: #FFFFFF;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}
.cta-section.is-beta.is-firing .cta-link__delivered {
  animation: cta-delivered-swap 2.5s steps(1, end) 1 forwards;
}

/* ═══════════ Keyframes — foguete: recoil → lança → volta verde ═══════════ */
@keyframes cta-fire {
  0% {
    transform: translate(0, 0);
    opacity: 1;
    background: #183EEB;
    box-shadow: 0 8px 24px rgba(24, 62, 235, 0.25);
  }
  4% {
    transform: translate(-8px, 0) rotate(-3deg) scale(0.98);
    opacity: 1;
  }
  7% {
    transform: translate(-18px, 0) rotate(-7deg) scale(0.95);
    opacity: 1;
  }
  14% {
    transform: translate(720px, 0) rotate(8deg) scale(0.94);
    opacity: 0;
    background: #183EEB;
  }
  14.01%, 20% {
    transform: translate(-720px, 0) rotate(0) scale(0.94);
    opacity: 0;
    background: #22C55E;
  }
  30% {
    transform: translate(0, 0) rotate(0) scale(1);
    opacity: 1;
    background: #22C55E;
    box-shadow: 0 14px 30px rgba(34, 197, 94, 0.4);
  }
  75% {
    transform: translate(0, 0);
    opacity: 1;
    background: #22C55E;
    box-shadow: 0 14px 30px rgba(34, 197, 94, 0.4);
  }
  88% {
    transform: translate(0, 0);
    opacity: 1;
    background: #183EEB;
    box-shadow: 0 8px 24px rgba(24, 62, 235, 0.25);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    background: #183EEB;
    box-shadow: 0 8px 24px rgba(24, 62, 235, 0.25);
  }
}

/* Rastro: nasce quando o botão cruza a origem indo pra direita (após recoil) */
@keyframes cta-streak {
  0%, 7%    { opacity: 0;    width: 0; }
  9%        { opacity: 0.9;  width: 80px; }
  11%       { opacity: 1;    width: 300px; }
  13%       { opacity: 0.75; width: 580px; }
  14%       { opacity: 0.35; width: 700px; }
  15%, 100% { opacity: 0;    width: 0; }
}

@keyframes cta-label-swap {
  0%, 13%, 88%, 100% { opacity: 1; }
  14%, 87%           { opacity: 0; }
}

@keyframes cta-delivered-swap {
  0%, 13%, 88%, 100% { opacity: 0; }
  14%, 87%           { opacity: 1; }
}

/* ═══════════ Mobile ═══════════ */
@media (max-width: 640px) {
  .cta-section.is-beta { padding: 60px 0 90px; }

  .cta-section.is-beta.is-firing .cta-stage > .cta-link {
    animation-name: cta-fire-sm;
  }
  @keyframes cta-fire-sm {
    0% {
      transform: translate(0, 0);
      opacity: 1;
      background: #183EEB;
    }
    6% {
      transform: translate(-14px, 0) rotate(-6deg) scale(0.95);
      opacity: 1;
    }
    14% {
      transform: translate(380px, 0) rotate(7deg) scale(0.94);
      opacity: 0;
      background: #183EEB;
    }
    14.01%, 20% {
      transform: translate(-380px, 0);
      opacity: 0;
      background: #22C55E;
    }
    30%, 75% {
      transform: translate(0, 0);
      opacity: 1;
      background: #22C55E;
    }
    88%, 100% {
      transform: translate(0, 0);
      opacity: 1;
      background: #183EEB;
    }
  }
  @keyframes cta-streak {
    0%, 7%    { opacity: 0;    width: 0; }
    9%        { opacity: 0.85; width: 60px; }
    11%       { opacity: 1;    width: 200px; }
    13%       { opacity: 0.55; width: 340px; }
    14%       { opacity: 0.2;  width: 400px; }
    15%, 100% { opacity: 0;    width: 0; }
  }
}

/* ═══════════ Reduzir movimento ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .cta-section.is-beta.is-firing .cta-stage > .cta-link,
  .cta-section.is-beta.is-firing .cta-streak,
  .cta-section.is-beta.is-firing .cta-link__label,
  .cta-section.is-beta.is-firing .cta-link__delivered {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .cta-streak,
  .cta-link__delivered { display: none !important; }
}