/* BTN-01 · Botão origem — HTML/CSS/JS puro, sem React nem Motion.
   O círculo nasce no ponto do toque ou do cursor (no centro, quando o foco vem do teclado) e
   cobre o botão inteiro. Diâmetro = o dobro da distância até o canto mais longe, medido no JS.

   Tokens: redeclare no seu próprio escopo. Os valores abaixo são o padrão da biblioteca (tema preto).
   Diferença consciente em relação à variante que rodou no trento: ali o CTA tem degradê fixo e o
   texto não troca de cor; aqui o texto troca, como no original do 21st.dev. */
.c-botao-origem {
  --c-btn-fundo: #141414;
  --c-btn-tinta: #ebebeb;
  --c-btn-circulo: #ebebeb;
  --c-btn-tinta-sobre-circulo: #0a0a0a;
  --c-btn-linha: rgba(235, 235, 235, .14);
  --c-btn-raio: 12px;
  --c-btn-altura: 48px;
  --c-btn-ease: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--c-btn-altura);
  padding: 0 32px;
  border: .5px solid var(--c-btn-linha);
  border-radius: var(--c-btn-raio);
  overflow: hidden;
  background: var(--c-btn-fundo);
  color: var(--c-btn-tinta);
  font: 500 15px/1 inherit;
  letter-spacing: -.02em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;          /* tira o atraso do toque duplo no celular */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, color .3s var(--c-btn-ease);
}
.c-botao-origem:active { transform: scale(.985); }
.c-botao-origem[disabled], .c-botao-origem[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.c-botao-origem.is-cheio { color: var(--c-btn-tinta-sobre-circulo); }

/* o círculo: z-index -1 com isolation no pai, para não vazar para fora da pilha do botão */
.c-botao-origem__circulo {
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--d, 0px);
  height: var(--d, 0px);
  border-radius: 50%;
  background: var(--c-btn-circulo);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s var(--c-btn-ease);
  pointer-events: none;
}
.c-botao-origem.is-cheio .c-botao-origem__circulo { transform: translate(-50%, -50%) scale(1); }
.c-botao-origem__rotulo { position: relative; }

/* variante preenchida: o inverso — fundo claro, círculo escuro */
.c-botao-origem--solido {
  --c-btn-fundo: #ebebeb;
  --c-btn-tinta: #0a0a0a;
  --c-btn-circulo: #0a0a0a;
  --c-btn-tinta-sobre-circulo: #ebebeb;
  --c-btn-linha: transparent;
}
/* variante de destaque: usa o âmbar como fundo */
.c-botao-origem--destaque {
  --c-btn-fundo: #e8ad32;
  --c-btn-tinta: #171717;
  --c-btn-circulo: #171717;
  --c-btn-tinta-sobre-circulo: #e8ad32;
  --c-btn-linha: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .c-botao-origem, .c-botao-origem__circulo { transition: none; }
}