/* =========================================================================
   MERAKI — camada de interação dos botões
   Compartilhada pelo site e pelas páginas legais. Carregue este arquivo em
   qualquer página/sistema da Meraki que precise dos mesmos botões.

   A identidade não muda: pílula de contorno branco sobre preto.

   · hover  — um traço de luz corre pelo contorno, dando uma volta completa,
              enquanto a borda de base recua para o traço se destacar
   · active — o botão inverte: fundo branco, texto preto. Fica em evidência
              no momento do clique em vez de escurecer
   · focus  — anel branco visível, porque teclado também é gente

   Para aplicar em um botão novo, basta dar a ele a classe .btn-meraki.
   ========================================================================= */

/* O ângulo precisa ser uma propriedade registrada para poder ser animado —
   custom property comum não interpola. Sem suporte (navegador antigo), o
   traço simplesmente fica parado, o que ainda lê como um brilho no contorno. */
@property --btn-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* O `position` vai dentro de :where() — especificidade zero — de propósito.
   Um `position: relative` normal aqui empataria com, por exemplo,
   `.btn-send--sm { position: absolute }` do rodapé e venceria só por vir
   depois no cascade. Foi exatamente o que aconteceu uma vez: o botão do
   rodapé virou relative, herdou o `left: 78.365%` e saiu da tela no celular. */
:where(.btn-meraki, .btn-outline, .btn-send, .consent__btn, .btn-inline) {
  position: relative;
}

.btn-meraki,
.btn-outline,
.btn-send,
.consent__btn,
.btn-inline {
  isolation: isolate;
  cursor: pointer;
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    border-color 0.4s ease;
}

/* ---- traço de luz que percorre o contorno --------------------------------
   Uma faixa clara girando dentro de um gradiente cônico, recortada em anel
   pelo mask-composite. Como o recorte usa o mesmo border-radius do botão, o
   traço acompanha a pílula em vez de descrever um retângulo.              */
.btn-meraki::before,
.btn-outline::before,
.btn-send::before,
.consent__btn::before,
.btn-inline::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--btn-angle),
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0) 232deg,
    rgba(255, 255, 255, 0.35) 288deg,
    #ffffff 340deg,
    #ffffff 356deg,
    rgba(255, 255, 255, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-meraki:hover::before,
.btn-outline:hover::before,
.btn-send:hover:not(:disabled)::before,
.consent__btn:hover::before,
.btn-inline:hover::before,
.btn-meraki:focus-visible::before,
.btn-outline:focus-visible::before,
.btn-send:focus-visible::before,
.consent__btn:focus-visible::before,
.btn-inline:focus-visible::before {
  opacity: 1;
  animation: btn-trace 1.6s linear infinite;
}

@keyframes btn-trace {
  to { --btn-angle: 360deg; }
}

/* a borda de base recua no hover para o traço ficar sendo o protagonista */
.btn-meraki:hover,
.btn-outline:hover,
.btn-send:hover:not(:disabled),
.consent__btn:hover,
.btn-inline:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---- clique: inverte para branco ---------------------------------------- */
.btn-meraki:active,
.btn-outline:active,
.btn-send:active:not(:disabled),
.consent__btn:active,
.btn-inline:active {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
  transition-duration: 0.06s;
}

/* o traço some no clique: o botão já está branco, não há contorno para correr */
.btn-meraki:active::before,
.btn-outline:active::before,
.btn-send:active::before,
.consent__btn:active::before,
.btn-inline:active::before {
  opacity: 0;
  animation: none;
}

/* O texto do .btn-outline usa background-clip:text com gradiente, então
   `color` sozinho não pega — precisa desligar o gradiente e forçar o
   preenchimento. */
.btn-outline:active .grad-text,
.btn-meraki:active .grad-text {
  background-image: none;
  -webkit-text-fill-color: #000000;
  color: #000000;
}

/* a seta do "Enviar Mensagem" é um SVG branco: sobre fundo branco sumiria */
.btn-send:active img,
.btn-meraki:active img {
  filter: invert(1);
}

.btn-meraki:focus-visible,
.btn-outline:focus-visible,
.btn-send:focus-visible,
.consent__btn:focus-visible,
.btn-inline:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  /* sem a volta do traço; o contorno acende de uma vez, e o clique continua
     invertendo para branco (que é estado, não movimento) */
  .btn-meraki::before,
  .btn-outline::before,
  .btn-send::before,
  .consent__btn::before,
  .btn-inline::before { animation: none !important; }

  .btn-meraki:hover::before,
  .btn-outline:hover::before,
  .btn-send:hover::before,
  .consent__btn:hover::before,
  .btn-inline:hover::before {
    background: #ffffff;
    opacity: 1;
  }
}