/* ===========================================================
   Orbit Border Button — porte vanilla do componente do Originkit.
   O original e React + motion/react. Aqui: zero JS de animacao.

   Tres pecas, como no original:
   - BANDA: mascara "caixa inteira MENOS caixa de conteudo" com
     mask-composite: exclude. Sobra exatamente a faixa da borda, e
     os cantos internos o browser calcula sozinho.
   - COMETA: um QUADRADO do tamanho da diagonal, centralizado, que
     gira por transform. Tem que ser quadrado: conic-gradient numa
     caixa achatada distorce o arco e ele vira um fiapo que cruza as
     pontas quase instantaneamente.
   - CONTEUDO: o texto, sempre por cima.
   =========================================================== */

/* O arco herda: o hover e setado no botao e precisa alcancar as
   camadas de dentro. Com inherits:false o hover nao chegava nelas. */
@property --orbita-arco {
  syntax: "<angle>";
  inherits: true;
  initial-value: 108deg;
}
@property --orbita-solido {
  syntax: "<angle>";
  inherits: true;
  initial-value: 32deg;
}

.btn--orbita {
  --orbita-cor: var(--yellow);
  --orbita-faixa: 2px;
  --orbita-volta: 3.3s;

  position: relative;
  overflow: visible;
  border-color: transparent;
  isolation: isolate;
}

/* mata o brilho que atravessa (efeitos.css) — duas animacoes no
   mesmo botao viram poluicao */
.btn--orbita::after { content: none; }

/* ---- BANDA: a faixa, recortada por mascara ---- */
.btn--orbita > .btn--orbita__banda {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: var(--orbita-faixa);
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;

  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: border-box, content-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: border-box, content-box;
  mask-composite: exclude;
}

/* ---- COMETA: quadrado que gira ---- */
.btn--orbita__cometa {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: orbita-girar var(--orbita-volta) linear infinite;
  will-change: transform;
}

/* anti-horario, como no preset (ccw) */
@keyframes orbita-girar {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* ---- as duas camadas do cometa ---- */
.btn--orbita__halo,
.btn--orbita__nucleo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--orbita-cor) 0deg,
    var(--orbita-cor) var(--orbita-solido),
    transparent var(--orbita-arco),
    transparent 360deg
  );
  transition: --orbita-arco .45s cubic-bezier(.33, 1, .68, 1),
              --orbita-solido .45s cubic-bezier(.33, 1, .68, 1);
}

.btn--orbita__halo { filter: blur(10px); }
.btn--orbita__nucleo { opacity: .6; }

/* ---- CONTEUDO por cima ---- */
.btn--orbita > .btn--orbita__conteudo {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}

/* Hover: o arco fecha a volta inteira e o anel vira solido.
   O "solido" e o ponto onde o rastro comeca a apagar; no cheio ele
   encosta no proprio arco e o anel fica chapado. */
.btn--orbita:hover,
.btn--orbita:focus-visible {
  --orbita-arco: 360deg;
  --orbita-solido: 360deg;
}

.btn--orbita:focus-visible {
  outline: 2px solid var(--orbita-cor);
  outline-offset: 3px;
}

/* ===========================================================
   FUNDO NEUTRO — a cor sai do preenchimento e vai pra luz.

   O componente original tem fill preto por baixo do anel. Com o
   vermelho cheio do botao a luz clara nao tinha contra o que
   contrastar: o amarelo borrava por dentro do vermelho e virava
   uma mancha laranja. Fundo escuro, e o anel vira a unica cor.
   =========================================================== */
.btn--orbita,
.btn--orbita:hover {
  background: rgba(16, 10, 11, .82);
  color: var(--white);
  border-color: transparent;
  box-shadow: none;
}
.btn--orbita:hover {
  background: rgba(28, 17, 18, .92);
  transform: translateY(-2px);
}

/* O verde do WhatsApp deixa de ser o fundo e vira o cometa —
   continua identificando o botao, sem competir com o amarelo. */
.btn--orbita.btn--wa { --orbita-cor: #25d366; }

@media (prefers-reduced-motion: reduce) {
  .btn--orbita__cometa { animation: none; }
  .btn--orbita__halo,
  .btn--orbita__nucleo { transition: none; }
}

/* A guarda tem que testar mask-composite, que e a propriedade de que o
   anel realmente depende — nao conic-gradient. Testando o gradiente,
   um navegador com conic mas sem mascara passava pela guarda, a faixa
   nao era recortada e o cometa preenchia o botao inteiro: um borrao
   girando embaixo do texto nos quatro botoes de conversao. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .btn--orbita > .btn--orbita__banda { display: none; }
  .btn--orbita { border-color: var(--border-strong); }
}