/**
 * Bouton texte — soulignement animé façon Blood Records :
 * le trait entre par la gauche au survol et ressort par la droite
 * (bascule du transform-origin 100% → 0%), en currentColor.
 */

.bejoy-text-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--bejoy-tb-gap, 10px);
  cursor: pointer;
  text-decoration: none;
  transition-property: color, transform;
  transition-duration: var(--bejoy-tb-duration, 0.3s), 0.15s;
  transition-timing-function: var(--bj-ease-out, ease), var(--bj-ease-out, ease);
}

/* Zone de clic étendue (≥40px de haut) sans toucher au rendu. */
.bejoy-text-button::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

/* Feedback tactile au clic. */
.bejoy-text-button:active {
  transform: scale(0.96);
}

.bejoy-text-button__label {
  position: relative;
}

.bejoy-text-button__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + var(--bejoy-tb-underline-offset, 2px));
  width: 100%;
  height: var(--bejoy-tb-underline, 1px);
  background: var(--bejoy-tb-underline-color, currentColor);
  pointer-events: none;
  transform: scale3d(0, 1, 1);
  transform-origin: 100% 50%;
  transition-property: transform;
  transition-duration: var(--bejoy-tb-duration, 0.3s);
  transition-timing-function: ease;
}

.bejoy-text-button:hover .bejoy-text-button__label::before,
.bejoy-text-button:focus-visible .bejoy-text-button__label::before,
.bejoy-text-button.is-active .bejoy-text-button__label::before {
  transform: scale3d(1, 1, 1);
  transform-origin: 0% 50%;
}

/* Mode inversé : soulignement affiché par défaut, il PART au survol. */
.bejoy-text-button--reverse .bejoy-text-button__label::before {
  transform: scale3d(1, 1, 1);
  transform-origin: 0% 50%;
}
.bejoy-text-button--reverse:hover .bejoy-text-button__label::before,
.bejoy-text-button--reverse:focus-visible .bejoy-text-button__label::before {
  transform: scale3d(0, 1, 1);
  transform-origin: 100% 50%;
}

.bejoy-text-button__icon {
  display: inline-flex;
  align-items: center;
  font-size: var(--bejoy-tb-icon-size, 1em);
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: var(--bj-ease-out, ease);
}

.bejoy-text-button__icon svg {
  width: var(--bejoy-tb-icon-size, 1em);
  height: auto;
  fill: currentColor;
}

/* Glissement de l'icône au survol, dans le sens de lecture. */
.bejoy-text-button--slide.bejoy-text-button--icon-after:hover .bejoy-text-button__icon,
.bejoy-text-button--slide.bejoy-text-button--icon-after:focus-visible .bejoy-text-button__icon {
  transform: translateX(3px);
}

.bejoy-text-button--slide.bejoy-text-button--icon-before:hover .bejoy-text-button__icon,
.bejoy-text-button--slide.bejoy-text-button--icon-before:focus-visible .bejoy-text-button__icon {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .bejoy-text-button,
  .bejoy-text-button__label::before,
  .bejoy-text-button__icon {
    transition-duration: 0.01ms;
  }

  .bejoy-text-button:active {
    transform: none;
  }
}