/**
 * Gradient Text for Elementor — Frontend Styles
 *
 * @package LMSC_GTE
 * @since   1.0.0
 * @version 1.3.0
 */

/* ──────────────────────────────────────────────
   Gradient Text (Heading Widget)
   ────────────────────────────────────────────── */

.lmsc-gte-gradient-text {
	display: inline-block;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent; /* Fallback for non-webkit */
	transition: background 0.3s ease;
}

.lmsc-gte-gradient-text-wrapper {
	width: 100%;
}

.lmsc-gte-gradient-text-wrapper a {
	display: inline-block;
	text-decoration: none;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: background 0.3s ease;
}

/* ──────────────────────────────────────────────
   Gradient Text Editor (WYSIWYG Widget)
   ────────────────────────────────────────────── */

.lmsc-gte-gradient-editor {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: background 0.3s ease;
}

/* Preserve list markers with gradient */
.lmsc-gte-gradient-editor ul,
.lmsc-gte-gradient-editor ol {
	list-style-position: inside;
}

/* ──────────────────────────────────────────────
   Hover States
   ────────────────────────────────────────────── */

.lmsc-gte-gradient-text.lmsc-gte-has-hover:hover,
.lmsc-gte-gradient-text-wrapper a.lmsc-gte-has-hover:hover,
.lmsc-gte-gradient-editor.lmsc-gte-has-hover:hover {
	transition: background 0.3s ease;
}

/* ──────────────────────────────────────────────
   Animated Gradient
   ────────────────────────────────────────────── */

@keyframes lmsc-gte-gradient-flow-horizontal {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes lmsc-gte-gradient-flow-vertical {
	0% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 50% 100%;
	}
	100% {
		background-position: 50% 0%;
	}
}

@keyframes lmsc-gte-gradient-flow-diagonal {
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0% 0%;
	}
}

.lmsc-gte-animated {
	background-size: 200% 200% !important;
}

.lmsc-gte-animated-horizontal {
	animation: lmsc-gte-gradient-flow-horizontal var(--lmsc-gte-animation-speed, 5s) ease infinite;
}

.lmsc-gte-animated-vertical {
	animation: lmsc-gte-gradient-flow-vertical var(--lmsc-gte-animation-speed, 5s) ease infinite;
}

.lmsc-gte-animated-diagonal {
	animation: lmsc-gte-gradient-flow-diagonal var(--lmsc-gte-animation-speed, 5s) ease infinite;
}

/* ──────────────────────────────────────────────
   Text Stroke / Outline Gradient
   ────────────────────────────────────────────── */

.lmsc-gte-stroke-only {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: var(--lmsc-gte-stroke-width, 2px);
	-webkit-text-stroke-color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	paint-order: stroke fill;
}

.lmsc-gte-stroke-both {
	-webkit-text-stroke-width: var(--lmsc-gte-stroke-width, 2px);
	-webkit-text-stroke-color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	paint-order: stroke fill;
}