/* ============================================================
   Brasoft Confort — camada de interação dos botões
   Acompanha glass/botao.js. Só transform e opacity: nada aqui força layout.
   A aparência (o botão pérola) continua no CSS de cada página; este arquivo
   acrescenta apenas o comportamento ao toque.
   ============================================================ */

/* Inclinação sutil: o botão cede ao toque como uma superfície física.
   No original eram -2° no hover e +2° no clique, via framer-motion. */
.btn-primary, .btn-premium { perspective: 600px; }
.btn-primary:hover { transform: translateY(-1px) rotateX(-2deg) scale(1.015); }
.btn-primary:active { transform: translateY(2px) rotateX(2deg) scale(.985); }

/* Ondulação a partir do ponto do clique */
.btn-onda {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(252,248,245,.34) 0%, rgba(252,248,245,.12) 55%, rgba(252,248,245,0) 70%);
  pointer-events: none;
  z-index: 0;
  animation: btn-onda 620ms cubic-bezier(.22,.72,.28,1) forwards;
}
@keyframes btn-onda {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
/* Sobre superfícies claras a onda precisa ser escura para aparecer */
.on-dark .btn-primary .btn-onda,
.btn-invert .btn-onda {
  background: radial-gradient(circle, rgba(48,67,102,.26) 0%, rgba(48,67,102,.10) 55%, rgba(48,67,102,0) 70%);
}

/* Estado de carregando */
.btn-carregando { cursor: progress; }
.btn-giro {
  width: 1.05em; height: 1.05em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: btn-giro 720ms linear infinite;
  flex: none;
}
@keyframes btn-giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-primary:active { transform: none; }
  .btn-onda { display: none; }
  .btn-giro { animation-duration: 2.4s; }
}