/**
 * Highlight Effect Styles
 *
 * Provides animated highlight effect for text using clip-path animation.
 * Highlights can be customized via CSS variables.
 */

.highlight {
	position: relative;
	display: inline;

	/* CSS variables controlled by GSAP animation */
	--clip-width: 0%;
	--rotate-amount: 0deg;
	--inset-left: 0px;
	--inset-right: 0px;
	--highlight-color: #2A3D50;

	&:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--inset-left, 0px);
		right: var(--inset-right, 0px);

		/* Use CSS variable for dynamic color control with fallback */
		background-color: var(--highlight-color, #2A3D50);
		opacity: 0.5;
		mix-blend-mode: multiply;

		/* Clip-path creates the fill effect from left to right */
		clip-path: polygon(
			0% 0%,
			var(--clip-width, 0%) 0%,
			var(--clip-width, 0%) 100%,
			0% 100%
		);

		/* Apply rotation for visual variation */
		transform: rotate(var(--rotate-amount, 0deg));
		transform-origin: center center;

		/* Keep highlight behind text */
		pointer-events: none;
		z-index: -1;
	}
}