/* ============================================================================
   LEGO — underline-link (lego.underline-link)
   Converted from Clone 08 (CG-12), the verified directional underline draw.
   Choreography values are frozen [ref]; presentation is configurable via
   three tokens only (color, thickness, offset).

   Scope: [data-lego="underline-link"] only. Zero html/body/:root/* rules.
   Pseudo-elements only — no internal classes required.
   ============================================================================ */

[data-lego="underline-link"] {
  /* ---- presentation tokens ---- */
  --lego-ul-color: currentColor;
  --lego-ul-thickness: 0.0625em; /* [ref] */
  --lego-ul-offset: 0em;         /* [ref] bottom offset */
  --lego-ul-focus: currentColor;

  position: relative;
  display: inline-block;
  color: inherit; /* the harness skin owns color; the Lego never picks one */
  text-decoration: none;
  cursor: pointer;
}

[data-lego="underline-link"]:focus-visible {
  outline: 2px solid var(--lego-ul-focus);
  outline-offset: 4px;
}

/* ---- the line: scaleX(0), originates right, draws left on hover ---- */
[data-lego="underline-link"]::before,
[data-lego="underline-link"][data-lego-variant="alt"]::before,
[data-lego="underline-link"][data-lego-variant="alt"]::after {
  /* [ref] verbatim choreography */
  content: "";
  position: absolute;
  bottom: var(--lego-ul-offset);
  left: 0;
  width: 100%;
  height: var(--lego-ul-thickness);
  background-color: var(--lego-ul-color);
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  [data-lego="underline-link"]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

/* ---- alt variant: a visible base line cascades into a drawn line (0.3s offset) ---- */
[data-lego="underline-link"][data-lego-variant="alt"]::before {
  /* [ref] */
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-lego="underline-link"][data-lego-variant="alt"]::after {
  /* [ref] */
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-lego="underline-link"][data-lego-variant="alt"]:hover::before {
    /* [ref] */
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-lego="underline-link"][data-lego-variant="alt"]:hover::after {
    /* [ref] */
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

/* ---- reduced motion: shortened draw; direction and visible states retained ---- */
@media (prefers-reduced-motion: reduce) {
  [data-lego="underline-link"]::before,
  [data-lego="underline-link"][data-lego-variant="alt"]::before,
  [data-lego="underline-link"][data-lego-variant="alt"]::after {
    transition-duration: 0.15s;
  }
}