/**
 * 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;
}

/* ──────────────────────────────────────────────
   Partial / Highlighted Text Mode
   ────────────────────────────────────────────── */

.lmsc-gte-partial-mode {
	background: none !important;
	-webkit-background-clip: unset !important;
	-webkit-text-fill-color: unset !important;
	background-clip: unset !important;
}

/* ──────────────────────────────────────────────
   Highlight Span Base
   ────────────────────────────────────────────── */

.lmsc-gte-highlight {
	transition: all 0.3s ease;
}

/* ──────────────────────────────────────────────
   Highlight Effect: Underline (::after needs CSS)
   ────────────────────────────────────────────── */

.lmsc-gte-highlight.lmsc-gte-hl-underline::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--lmsc-gte-hl-underline-height, 4px);
	background: var(--lmsc-gte-hl-gradient);
	border-radius: 2px;
}

/* ──────────────────────────────────────────────
   Accessibility: Reduced Motion
   ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.lmsc-gte-animated-horizontal,
	.lmsc-gte-animated-vertical,
	.lmsc-gte-animated-diagonal {
		animation: none !important;
	}
}

/* ──────────────────────────────────────────────
   Preset Gradient CSS Classes
   Apply any of these classes to any Elementor
   widget via Advanced > CSS Classes field.
   ────────────────────────────────────────────── */

.lmsc-gte-gradient-sunset { background: linear-gradient(90deg, #FF512F, #DD2476); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-ocean { background: linear-gradient(90deg, #2E3192, #1BFFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-forest { background: linear-gradient(90deg, #11998e, #38ef7d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-fire { background: linear-gradient(90deg, #f12711, #f5af19); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-purple-rain { background: linear-gradient(90deg, #7F00FF, #E100FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-cherry-blossom { background: linear-gradient(90deg, #FF6B9D, #C94C7C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-northern-lights { background: linear-gradient(90deg, #43cea2, #185a9d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-citrus { background: linear-gradient(90deg, #f7971e, #ffd200); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-frost { background: linear-gradient(90deg, #0052D4, #65C7F7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-rose-gold { background: linear-gradient(90deg, #B76E79, #F4D4C8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-midnight { background: linear-gradient(90deg, #0F2027, #2C5364); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-candy { background: linear-gradient(90deg, #D585FF, #00FFEE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-neon { background: linear-gradient(90deg, #00ff87, #60efff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-peach { background: linear-gradient(90deg, #FF9966, #FF5E62); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-royal { background: linear-gradient(90deg, #1A0533, #6441A5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-bubblegum { background: linear-gradient(90deg, #ff6a88, #ff99ac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-aurora { background: linear-gradient(90deg, #00C9FF, #92FE9D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-cyber { background: linear-gradient(90deg, #f72585, #7209b7, #3a0ca3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-warm-flame { background: linear-gradient(90deg, #FF6B35, #F7931E); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lmsc-gte-gradient-mango { background: linear-gradient(90deg, #ffe259, #ffa751); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }