/* ==========================================================================
 * Link animation (single source of truth)
 * Aplica a <a> e <button> com classe `link-anim`.
 * Tokens customizáveis (defina em :root ou no container):
 *  - --grad-link-start / --grad-link-end
 *  - --link-underline-thickness (px)
 *  - --link-underline-offset (px)
 *  - --link-translate-hover (px)
 *  - --link-anim-duration / --link-anim-ease
 *  - --link-stroke-color (contorno sutil no hover)
 * ========================================================================== */

.link-anim {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  text-decoration: none !important;
  /* Gradiente base para texto e sublinhado */
  background-image: linear-gradient(90deg, var(--grad-link-start, #395dff), var(--grad-link-end, #6b97ff));
  background-size: 0% 100%;
  background-position: 0 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: currentColor;
  /* Estabiliza a área interativa e evita flicker em hover */
  will-change: background-size, color;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    color var(--link-anim-duration, .25s) var(--link-anim-ease, ease),
    transform var(--link-anim-duration, .2s) var(--link-anim-ease, ease),
    background-size var(--link-anim-duration, .35s) var(--link-anim-ease, ease);
}

.link-anim::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: var(--link-underline-offset, 0px);
  height: var(--link-underline-thickness, 3px);
  width: 0;
  background: linear-gradient(90deg, var(--grad-link-start), var(--grad-link-end));
  border-radius: 2px;
  pointer-events: none; /* não altera o hit target ao animar */
  transition: width var(--link-anim-duration, .35s) var(--link-anim-ease, ease);
}

.link-anim:hover,
.link-anim:focus-visible {
  background-size: 100% 100%;
  /* Deslocamento vertical desativado por padrão para evitar jitter.
     Pode ser reativado definindo --link-translate-hover em um container. */
  transform: translateY(var(--link-translate-hover, 0px));
  -webkit-text-fill-color: transparent;
  /* Stroke/legibilidade opcional em fundos escuros */
  text-shadow:
    0 0 1px var(--link-stroke-color, transparent),
    0 0 2px var(--link-stroke-color, transparent);
}

.link-anim:hover::after,
.link-anim:focus-visible::after { width: 100%; }

@supports (background-clip: text) {
  .link-anim:hover,
  .link-anim:focus-visible { color: transparent; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .link-anim:hover,
  .link-anim:focus-visible { color: var(--grad-link-end, currentColor); }
}

/* Botões estilizados como links quando necessário */
button.link-anim,
[role="button"].link-anim {
  background: none;
  border: 0;
  padding: .35rem 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* Presets mínimos para fundos escuros (header/footer) */
.on-primary .link-anim,
.navbar .link-anim,
.footer-winvest .link-anim { color: #fff !important; }

/* Redução de movimento */
@media (prefers-reduced-motion: reduce){
  .link-anim,
  .link-anim::after { transition: none; }
}