/**
 * CDSWerx Shared Underline Engine
 *
 * Single source of truth for the animated-underline keyframes used by both the
 * CTA Button (single-line bar) and the TOC widget (multi-line, wrap-following
 * gradient). Widgets supply their own application rules but share these
 * keyframes so the motion stays in lockstep.
 *
 * - cds-animate-underline-from-left / -from-right : single-line "draw" redraw
 *   (used by the button ::after bar — scaleX based).
 * - cds-animate-underline-multiline / -multiline-thick : wrap-following draw for
 *   inline text spanning multiple lines (background-size based, used by TOC).
 *
 * @package CDSWerx_Widget_Library
 * @since   2.14.0
 */

@keyframes cds-animate-underline-from-left {
	0%   { transform: scaleX(1); transform-origin: right; }
	37%  { transform: scaleX(0); transform-origin: right; }
	38%  { transform: scaleX(0); transform-origin: left; }
	100% { transform: scaleX(1); transform-origin: left; }
}

@keyframes cds-animate-underline-from-right {
	0%   { transform: scaleX(1); transform-origin: left; }
	37%  { transform: scaleX(0); transform-origin: left; }
	38%  { transform: scaleX(0); transform-origin: right; }
	100% { transform: scaleX(1); transform-origin: right; }
}

@keyframes cds-animate-underline-multiline {
	0%   { background-size: 100% 87%; background-position-x: right; }
	38%  { background-size: 0% 87%;   background-position-x: right; }
	39%  { background-size: 0% 87%;   background-position-x: left; }
	100% { background-size: 100% 87%; background-position-x: left; }
}

@keyframes cds-animate-underline-multiline-thick {
	0%   { background-size: 100% 93%; background-position-x: right; }
	38%  { background-size: 0% 93%;   background-position-x: right; }
	39%  { background-size: 0% 93%;   background-position-x: left; }
	100% { background-size: 100% 93%; background-position-x: left; }
}

/* Thin variant: keeps a hairline thickness (via --cds-ul-thickness) instead of
   filling the line height — used for the TOC link draw-underline. The height is
   read from the animated element's custom property so it respects the widget's
   Thickness control. */
@keyframes cds-animate-underline-multiline-thin {
	0%   { background-size: 100% var(--cds-ul-thickness, 2px); background-position-x: right; }
	38%  { background-size: 0% var(--cds-ul-thickness, 2px);   background-position-x: right; }
	39%  { background-size: 0% var(--cds-ul-thickness, 2px);   background-position-x: left; }
	100% { background-size: 100% var(--cds-ul-thickness, 2px); background-position-x: left; }
}