.hvl-accent-underline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	--hvl-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M5 14.2C52 7.9 106 4.6 161 5.1c43 .4 86 3.2 133 8.4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.hvl-accent-underline::after {
	content: "";
	position: absolute;
	left: -0.04em;
	bottom: var(--hvl-underline-bottom, 0.04em);
	width: calc(100% + 0.08em);
	height: 0.22em;
	pointer-events: none;
	background-color: var(--hvl-underline-color, var(--e-global-color-primary, #08739f));
	-webkit-mask: var(--hvl-underline) center / 100% 100% no-repeat;
	mask: var(--hvl-underline) center / 100% 100% no-repeat;
}

@media (min-width: 768px) {
	.hvl-accent-underline {
		--hvl-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M5 14.2C52 7.9 106 4.6 161 5.1c43 .4 86 3.2 133 8.4' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	}
}

.hvl-accent-underline--draw::after {
	clip-path: inset(-80% 100% -80% -8%);
}

.is-visible .hvl-accent-underline--draw::after {
	animation: hvl-underline-draw 0.7s cubic-bezier(0.22, 0.7, 0.25, 1) 0.35s forwards;
}

@keyframes hvl-underline-draw {
	to {
		clip-path: inset(-80% -8% -80% -8%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hvl-accent-underline--draw::after,
	.is-visible .hvl-accent-underline--draw::after {
		clip-path: none;
		animation: none;
	}
}