/**
 * JT Marquee — Elementor widget (10 style presets A–J)
 */

/* Elementor / flex containers — stretch widget to column width */
.elementor-widget-jt_marquee {
	width: 100%;
	max-width: 100%;
}

.elementor-widget-jt_marquee .elementor-widget-container {
	width: 100%;
	max-width: 100%;
}

.elementor-widget-jt_marquee .elementor-widget-container > .jt-marquee-widget {
	width: 100%;
}

.jt-marquee-widget {
	--jt-marquee-duration: 28s;
	--jt-marquee-duration-row-2: 26s;
	--jt-marquee-vertical-height: 88px;
	--jt-marquee-text: rgba(255, 255, 255, 0.92);
	--jt-marquee-muted: rgba(255, 255, 255, 0.55);
	--jt-marquee-border: rgba(255, 255, 255, 0.12);
	--jt-marquee-accent: #c6ff33;
	--jt-marquee-accent-2: #8b5cf6;
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.jt-marquee-widget__dual,
.jt-marquee-widget__viewport {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
.jt-marquee-widget__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	will-change: transform;
}

.jt-marquee-widget__chunk {
	display: inline-flex;
	align-items: center;
}

.jt-marquee-widget__item {
	display: inline-flex;
	align-items: center;
	padding: 0 1.25rem;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jt-marquee-text);
}

.jt-marquee-widget__item::after {
	content: "·";
	margin-left: 1.25rem;
	opacity: 0.35;
	font-weight: 400;
}

.jt-marquee-widget__item:last-child::after {
	content: none;
	margin: 0;
}

.jt-marquee-widget--no-sep .jt-marquee-widget__item::after {
	content: none;
	margin: 0;
}

.jt-marquee-widget--pause-hover .jt-marquee-widget__viewport:hover .jt-marquee-widget__track {
	animation-play-state: paused;
}

/* A — Classic loop */
.jt-marquee-widget--a .jt-marquee-widget__viewport {
	padding: 18px 0;
	background: linear-gradient(90deg, rgba(198, 255, 51, 0.06), transparent 30%, transparent 70%, rgba(198, 255, 51, 0.06));
}

.jt-marquee-widget--a .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-left var(--jt-marquee-duration) linear infinite;
}

/* B — Reverse */
.jt-marquee-widget--b .jt-marquee-widget__viewport {
	padding: 18px 0;
	background: #0c0c0f;
}

.jt-marquee-widget--b .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-right var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--b .jt-marquee-widget__item {
	color: var(--jt-marquee-accent-2);
}

/* C — Fade edges */
.jt-marquee-widget--c .jt-marquee-widget__viewport {
	padding: 20px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	background: rgba(139, 92, 246, 0.08);
}

.jt-marquee-widget--c .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-left var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--c .jt-marquee-widget__item {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* D — Fast skew (pause via control or built-in) */
.jt-marquee-widget--d .jt-marquee-widget__viewport {
	padding: 16px 0;
	border-top: 1px solid var(--jt-marquee-border);
	border-bottom: 1px solid var(--jt-marquee-border);
}

.jt-marquee-widget--d .jt-marquee-widget__viewport:hover .jt-marquee-widget__track {
	animation-play-state: paused;
}

.jt-marquee-widget--d .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-left var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--d .jt-marquee-widget__item {
	font-style: italic;
	transform: skewX(-8deg);
	color: var(--jt-marquee-accent);
}

/* E — Dual row */
.jt-marquee-widget--e .jt-marquee-widget__dual {
	display: flex;
	flex-direction: column;
}

.jt-marquee-widget--e .jt-marquee-widget__viewport {
	padding: 14px 0;
}

.jt-marquee-widget--e .jt-marquee-widget__viewport--top {
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid var(--jt-marquee-border);
}

.jt-marquee-widget--e .jt-marquee-widget__viewport--top .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-left var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--e .jt-marquee-widget__viewport--top .jt-marquee-widget__item {
	font-size: 13px;
	font-weight: 500;
	color: var(--jt-marquee-muted);
}

.jt-marquee-widget--e .jt-marquee-widget__viewport--bottom {
	background: rgba(198, 255, 51, 0.05);
}

.jt-marquee-widget--e .jt-marquee-widget__viewport--bottom .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-right var(--jt-marquee-duration-row-2) linear infinite;
}

.jt-marquee-widget--e .jt-marquee-widget__viewport--bottom .jt-marquee-widget__item {
	font-size: 16px;
	font-weight: 800;
}

/* F — Ping-pong */
.jt-marquee-widget--f .jt-marquee-widget__viewport {
	padding: 18px 0;
	background: linear-gradient(90deg, #111, #1a1a22, #111);
}

.jt-marquee-widget--f .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-left var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--f .jt-marquee-widget__item {
	color: #facc15;
	font-weight: 700;
}

/* G — Vertical */
.jt-marquee-widget--g .jt-marquee-widget__viewport--vertical {
	height: var(--jt-marquee-vertical-height);
	padding: 0 18px;
	background: rgba(255, 255, 255, 0.03);
	border-top: 1px solid var(--jt-marquee-border);
	border-bottom: 1px solid var(--jt-marquee-border);
}

.jt-marquee-widget--g .jt-marquee-widget__track--vertical {
	flex-direction: column;
	animation: jt-marquee-scroll-up var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--g .jt-marquee-widget__chunk--vertical {
	flex-direction: column;
	align-items: flex-start;
}

.jt-marquee-widget--g .jt-marquee-widget__item--line {
	display: block;
	padding: 10px 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
}

.jt-marquee-widget--g .jt-marquee-widget__item--line::after {
	content: none;
}

/* H — Outline */
.jt-marquee-widget--h .jt-marquee-widget__viewport {
	padding: 22px 0;
	background: #000;
}

.jt-marquee-widget--h .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-left var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--h .jt-marquee-widget__item {
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.85);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.12em;
}

/* I — Gradient shimmer */
.jt-marquee-widget--i .jt-marquee-widget__viewport {
	padding: 20px 0;
	background: #0c0c0f;
}

.jt-marquee-widget--i .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-left var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--i .jt-marquee-widget__item {
	font-size: 16px;
	font-weight: 800;
	background: linear-gradient(90deg, #c6ff33, #8b5cf6, #facc15, #c6ff33);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: jt-marquee-shimmer 4s linear infinite;
}

/* J — Wide tracking */
.jt-marquee-widget--j .jt-marquee-widget__viewport {
	padding: 24px 0;
	background: rgba(255, 255, 255, 0.02);
}

.jt-marquee-widget--j .jt-marquee-widget__track--loop-4 {
	animation: jt-marquee-scroll-left var(--jt-marquee-duration) linear infinite;
}

.jt-marquee-widget--j .jt-marquee-widget__item {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.35em;
	color: rgba(255, 255, 255, 0.72);
}

.jt-marquee-widget--j .jt-marquee-widget__item:nth-child(odd) {
	color: rgba(255, 255, 255, 0.45);
}

@keyframes jt-marquee-scroll-left {
	from { transform: translateX(0); }
	to { transform: translateX(-25%); }
}

@keyframes jt-marquee-scroll-right {
	from { transform: translateX(-25%); }
	to { transform: translateX(0); }
}

@keyframes jt-marquee-scroll-up {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}

@keyframes jt-marquee-shimmer {
	from { background-position: 0% 50%; }
	to { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.jt-marquee-widget__track {
		animation: none !important;
		transform: none !important;
	}

	.jt-marquee-widget__viewport {
		overflow-x: auto;
	}

	.jt-marquee-widget--g .jt-marquee-widget__viewport--vertical {
		overflow-y: auto;
		height: auto;
		max-height: 160px;
	}
}
