/**
 * Scroll underline — mark phrases with <span class="xu">…</span>
 * Variables from Elementor; JS adds .xyod-mark-js for scroll draw-in.
 */

.xyod-has-scroll-mark {
	--xyod-mark-color: #1a1a1a;
	--xyod-mark-height: 4px;
	--xyod-mark-offset: 0px;
	--xyod-mark-duration: 0.7s;
}

.xyod-has-scroll-mark .xu,
.xyod-has-scroll-mark .xyod-scroll-mark {
	background-image: linear-gradient(var(--xyod-mark-color), var(--xyod-mark-color));
	background-repeat: no-repeat;
	background-position: 0 calc(100% - var(--xyod-mark-offset));
	background-size: 100% var(--xyod-mark-height);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	transition: background-size var(--xyod-mark-duration) cubic-bezier(0.22, 1, 0.36, 1);
	font-weight: inherit !important;
}

.xyod-has-scroll-mark.xyod-mark-js .xu,
.xyod-has-scroll-mark.xyod-mark-js .xyod-scroll-mark {
	background-size: 0% var(--xyod-mark-height);
}

.xyod-has-scroll-mark.xyod-mark-js .xu.is-active,
.xyod-has-scroll-mark.xyod-mark-js .xyod-scroll-mark.is-active {
	background-size: 100% var(--xyod-mark-height);
}

@media (prefers-reduced-motion: reduce) {
	.xyod-has-scroll-mark .xu,
	.xyod-has-scroll-mark .xyod-scroll-mark,
	.xyod-has-scroll-mark.xyod-mark-js .xu,
	.xyod-has-scroll-mark.xyod-mark-js .xyod-scroll-mark {
		transition: none;
		background-size: 100% var(--xyod-mark-height);
	}
}