/* Feixe na Borda
   Uma luz corre pela borda de um card, botão ou imagem, contornando os
   cantos, sem parar. A borda é um anel de 1 px recortado por máscara; dentro
   dele, uma mancha de luz radial anda pelo caminho do contorno
   (offset-path) em loop. O conteúdo não é tocado. */
:root{
  --fx-bg:#000000;
  --fx-ink:#ededed;
  --fx-accent:#ea5420;
  --fx-muted:#7c7c7c;
  --fx-speed:1;
  --fx-radius:12px;

  --fx-feixe-cor:#ff2f5f;                 /* cor da luz */
  --fx-feixe-cor-2:transparent;           /* segunda cor no rastro (transparente = luz de uma cor só) */
  --fx-feixe-tamanho:350px;               /* diâmetro da mancha de luz */
  --fx-feixe-espessura:1px;               /* grossura da borda iluminada */
  --fx-feixe-volta:8s;                    /* tempo de uma volta completa (linear) */
  --fx-feixe-borda:rgba(255,255,255,.1);  /* cor da borda apagada, por baixo da luz */
  --fx-feixe-intensidade:1;               /* opacidade da luz */
}

.fx-feixe-na-borda{
  position:relative;
  isolation:isolate;
}
/* o anel: cobre o elemento e só deixa visível a faixa da borda.
   A faixa é o padding; a máscara recorta content-box de border-box
   (a forma com border + padding-box não funcionou no Chrome 152: ficou vazia). */
.fx-feixe-na-borda__anel{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  overflow:hidden;
  z-index:2;
  padding:var(--fx-feixe-espessura);
  -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;
}
/* borda apagada, por baixo */
.fx-feixe-na-borda__anel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--fx-feixe-borda);
}
/* a luz: uma mancha radial que anda pelo contorno */
.fx-feixe-na-borda__luz{
  position:absolute;
  top:0;
  left:0;
  width:var(--fx-feixe-tamanho);
  height:var(--fx-feixe-tamanho);
  background:radial-gradient(circle at center, var(--fx-feixe-cor) 0%, var(--fx-feixe-cor-2) 22%, transparent 50%);
  opacity:var(--fx-feixe-intensidade);
  offset-path:var(--fx-feixe-caminho, inset(0));
  offset-anchor:center;
  offset-rotate:0deg;
  offset-distance:0%;
  animation:fx-feixe-volta calc(var(--fx-feixe-volta) * var(--fx-speed)) linear infinite;
  animation-delay:var(--fx-feixe-atraso, 0s);
  will-change:offset-distance;
}
@keyframes fx-feixe-volta{
  from{offset-distance:0%}
  to{offset-distance:100%}
}

/* só no hover: a luz fica parada até o mouse chegar */
.fx-feixe-na-borda--so-hover .fx-feixe-na-borda__luz{animation-play-state:paused;opacity:0;transition:opacity .4s ease}
.fx-feixe-na-borda--so-hover:hover .fx-feixe-na-borda__luz,
.fx-feixe-na-borda--so-hover:focus-within .fx-feixe-na-borda__luz{animation-play-state:running;opacity:var(--fx-feixe-intensidade)}

/* reduced motion: a luz fica parada num canto, como um destaque fixo */
.fx-feixe-na-borda.fx-rm .fx-feixe-na-borda__luz{animation:none;offset-distance:12%;opacity:var(--fx-feixe-intensidade)}