/* ============================================================
   Botão Link — porte do lab (Downloads\Componentes Testes\botao-link),
   componente "Link Button" do 21st.dev (@hyperiux, MIT), recolorido
   na paleta NutriCard.

   Duas coisas no hover, as duas em 0,5s:
   1. o sublinhado entra pela ESQUERDA e, ao soltar, recolhe para a
      DIREITA — quem faz isso é a troca de `transform-origin` junto
      com a escala, não uma animação de ida e volta;
   2. a seta gira -45°, apontando para cima-direita.

   Diferença para o lab: a geometria aqui é em px e herda o tamanho do
   texto onde o link é usado (`font-size: inherit`), em vez dos `vw` do
   original — mesma correção feita no botão Arrow Fill, senão o link
   escala com a viewport e não com o bloco em que está.
   ============================================================ */

.lkb {
  --lkb-texto:      currentColor;
  --lkb-hover:      var(--blue-500, #005bff);
  --lkb-sublinhado: 1.5px;
  --lkb-dur:        0.5s;
  /* a curva do original: quase toda a distância no começo */
  --lkb-ease:       cubic-bezier(0.62, 0.05, 0.01, 0.99);

  display: inline-block;
  width: fit-content;
  color: var(--lkb-texto);
  font-family: 'Poppins', sans-serif;
  font-size: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s;
}

.lkb__interno {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* o rótulo carrega o sublinhado no ::after */
.lkb__linha {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.lkb__linha::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: var(--lkb-sublinhado);
  background: currentColor;
  /* repouso: encolhido contra a DIREITA */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--lkb-dur) var(--lkb-ease);
}

.lkb__icone {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  transition: transform var(--lkb-dur) var(--lkb-ease);
}

/* Estados. `.is-ativo` existe para quando o gatilho do hover é um
   elemento de fora (um card inteiro clicável, por exemplo): a página
   liga a classe no seu próprio `:hover` e não precisa repetir as
   regras de dentro do componente. */
.lkb:hover,
.lkb.is-ativo {
  color: var(--lkb-hover);
}

.lkb:hover .lkb__linha::after,
.lkb.is-ativo .lkb__linha::after {
  transform: scaleX(1);
  transform-origin: left;
}

.lkb:hover .lkb__icone,
.lkb.is-ativo .lkb__icone {
  transform: rotate(-45deg);
}

/* só o leitor de tela lê o destino completo */
.lkb__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lkb__linha::after,
  .lkb__icone { transition: none; }
  .lkb:hover .lkb__icone,
  .lkb.is-ativo .lkb__icone { transform: none; }
}

/* sobre fundo escuro: a cor de repouso já é clara, muda só o traço e a seta */
.lkb--navy { --lkb-hover: var(--blue-50, #eef4ff); }