/* Botão Neon com Bordas Animadas — Helix Loja de Efeitos
   Tokens: personalize no :root (contrato --fx-*). */
:root{
  --fx-bg:#06040f;
  --fx-ink:#f4f0fb;
  --fx-accent:#7a67ff;          /* cor neon (linhas, preenchimento e glow) */
  --fx-muted:#9a8fc7;
  --fx-speed:1;                 /* multiplicador de duração */
  --fx-radius:0px;
  --fx-neon-linha:2px;          /* espessura das linhas correndo pela borda */
}

.fx-botao-neon-bordas{
  position:relative;display:inline-block;padding:25px 30px;color:var(--fx-accent);text-decoration:none;
  text-transform:uppercase;letter-spacing:4px;font-family:inherit;font-weight:700;overflow:hidden;
  border-radius:var(--fx-radius);transition:calc(.5s * var(--fx-speed));
}
.fx-botao-neon-bordas:hover,
.fx-botao-neon-bordas:focus-visible,
.fx-botao-neon-bordas--on{
  color:var(--fx-bg);background:var(--fx-accent);
  box-shadow:0 0 5px var(--fx-accent), 0 0 25px var(--fx-accent), 0 0 50px var(--fx-accent), 0 0 200px var(--fx-accent);
  -webkit-box-reflect:below 1px linear-gradient(transparent, #0006);
}
.fx-botao-neon-bordas__texto{position:relative;z-index:2}
.fx-botao-neon-bordas__linha{position:absolute;display:block}
.fx-botao-neon-bordas__linha:nth-child(1){top:0;left:0;width:100%;height:var(--fx-neon-linha);transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--fx-accent));animation:fx-botao-neon-bordas-topo calc(1s * var(--fx-speed)) linear infinite}
.fx-botao-neon-bordas__linha:nth-child(2){top:0;right:0;width:var(--fx-neon-linha);height:100%;transform:translateY(-100%);
  background:linear-gradient(180deg, transparent, var(--fx-accent));animation:fx-botao-neon-bordas-direita calc(1s * var(--fx-speed)) linear infinite;animation-delay:calc(.25s * var(--fx-speed))}
.fx-botao-neon-bordas__linha:nth-child(3){bottom:0;right:0;width:100%;height:var(--fx-neon-linha);
  background:linear-gradient(270deg, transparent, var(--fx-accent));animation:fx-botao-neon-bordas-baixo calc(1s * var(--fx-speed)) linear infinite;animation-delay:calc(.5s * var(--fx-speed))}
.fx-botao-neon-bordas__linha:nth-child(4){bottom:0;left:0;width:var(--fx-neon-linha);height:100%;transform:translateY(100%);
  background:linear-gradient(360deg, transparent, var(--fx-accent));animation:fx-botao-neon-bordas-esquerda calc(1s * var(--fx-speed)) linear infinite;animation-delay:calc(.75s * var(--fx-speed))}

/* As linhas correm pela borda por translate, não por left/top: cada uma tem largura (ou
   altura) de 100% do botão, então translateX(-100%) percorre exatamente a mesma distância
   que left:-100% percorria — só que sem recalcular layout a cada frame, em loop infinito. */
@keyframes fx-botao-neon-bordas-topo{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}
@keyframes fx-botao-neon-bordas-direita{0%{transform:translateY(-100%)}50%,100%{transform:translateY(100%)}}
@keyframes fx-botao-neon-bordas-baixo{0%{transform:translateX(100%)}50%,100%{transform:translateX(-100%)}}
@keyframes fx-botao-neon-bordas-esquerda{0%{transform:translateY(100%)}50%,100%{transform:translateY(-100%)}}

/* reduced motion: linhas paradas, botão usável; hover ainda acende (contrato) */
.fx-botao-neon-bordas.fx-rm .fx-botao-neon-bordas__linha{animation:none}