/* ==========================================================================
   Marquee Showcase – structural CSS only.
   Every design value (colors, sizes, spacing, typography…) comes from Elementor
   controls through CSS custom properties / scoped selectors. Values below are
   just fallbacks. All selectors start with .mss- (scoped per widget instance).
   ========================================================================== */

.mss-root {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow-x: clip; /* never create page-level horizontal scroll */
}
.mss-root *,
.mss-root *::before,
.mss-root *::after { box-sizing: border-box; }

/* ---------- Section ---------- */
.mss-section {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	isolation: isolate;
	background-color: #050505;
}
.mss-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.mss-section > * { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.mss-header { display: flex; flex-direction: column; align-items: center; }
.mss-heading, .mss-desc { margin: 0; }
.mss-heading { color: #fff; }

/* ---------- Marquee ---------- */
.mss-stage { position: relative; width: 100%; }

.mss-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	container-type: inline-size; /* enables the "visible cards" width maths (cqw) */
	-webkit-user-select: none;
	user-select: none;
}
.mss-track {
	display: flex;
	width: max-content;
	min-width: 100%;
}
.mss-group {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-start;
	gap: var(--mss-gap, 24px);
	padding-right: var(--mss-gap, 24px); /* keeps the loop seamless: group width includes trailing gap */
}

.mss-is-marquee .mss-group {
	animation: mss-marquee var(--mss-duration, 40s) linear var(--mss-delay, 0s) infinite normal;
	will-change: transform;
}
@keyframes mss-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}
@keyframes mss-bounce {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--mss-bounce, 0px), 0, 0); }
}

/* Direction (placed after the shorthand so it wins) */
.mss-dir-rtl .mss-group { animation-direction: normal; }
.mss-dir-ltr .mss-group { animation-direction: reverse; }
.mss-is-marquee.mss-loop-bounce .mss-group { animation-name: mss-bounce; animation-timing-function: ease-in-out; }
.mss-loop-bounce.mss-dir-rtl .mss-group { animation-direction: alternate; }
.mss-loop-bounce.mss-dir-ltr .mss-group { animation-direction: alternate-reverse; }
.mss-loop-bounce .mss-group[data-clone] { display: none; }

/* Paused (hover / focus / button / off-screen) */
.mss-root.is-paused .mss-group { animation-play-state: paused; }

/* Marquee disabled → swipeable static strip */
.mss-static .mss-marquee { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mss-static .mss-marquee::-webkit-scrollbar { display: none; }
.mss-static .mss-group[data-clone] { display: none; }

/* ---------- Cards ---------- */
.mss-card {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--mss-card-w, 365px);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background-color: #111;
	border: 0 solid transparent;
	transition-property: transform, box-shadow, border-color, background-color;
	transition-duration: var(--mss-card-tr, 300ms);
	transition-timing-function: ease;
}
.mss-card:hover,
.mss-card:focus-visible {
	transform: translateY(var(--mss-lift, 0px)) scale(var(--mss-scale, 1));
}
.mss-card:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* Fixed-height clipped frame – only the image moves inside it, never the card */
.mss-frame {
	position: relative;
	display: block;
	width: 100%;
	height: 360px;
	overflow: hidden;
	border-radius: inherit;
	isolation: isolate;
	background-color: #0d0d0d;
}
.mss-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	transition: opacity var(--mss-card-tr, 300ms) ease;
	-webkit-user-drag: none;
	user-select: none;
}
.mss-fit-cover .mss-img   { height: 100%; object-fit: cover; object-position: center top; }
.mss-fit-contain .mss-img { height: 100%; object-fit: contain; object-position: center top; }

.mss-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: transparent;
	transition: background-color var(--mss-card-tr, 300ms) ease, opacity var(--mss-card-tr, 300ms) ease;
}

/* Broken image → neutral placeholder, widget keeps working */
.mss-card.is-broken .mss-img { visibility: hidden; }
.mss-card.is-broken .mss-frame {
	background-image: repeating-linear-gradient(45deg, #161616 0 10px, #1c1c1c 10px 20px);
}

/* Captions */
.mss-caption { display: block; margin: 0; padding: 10px 12px; color: #fff; }
.mss-cap-overlay .mss-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 4;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

/* ---------- Shine ---------- */
.mss-shine {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: calc(var(--mss-sh-op, 0.22) * var(--mss-sh-int, 1));
	background: linear-gradient(
		var(--mss-sh-angle, 105deg),
		transparent calc(50% - var(--mss-sh-w, 18%) / 2),
		var(--mss-sh-color, #fff) 50%,
		transparent calc(50% + var(--mss-sh-w, 18%) / 2)
	);
	transform: translate3d(-130%, 0, 0);
	will-change: transform;
}

/* ---------- Fade overlay ---------- */
.mss-fade {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(
		var(--mss-fade-d, to bottom),
		var(--mss-fade-from, rgba(5, 5, 5, 0)) var(--mss-fade-start, 0%),
		var(--mss-fade-to, #050505) 100%
	);
}
.mss-fade-bottom .mss-fade { left: 0; right: 0; bottom: 0; height: var(--mss-fade-size, 190px); --mss-fade-d: to bottom; }
.mss-fade-top .mss-fade    { left: 0; right: 0; top: 0;    height: var(--mss-fade-size, 190px); --mss-fade-d: to top; }
.mss-fade-left .mss-fade   { top: 0; bottom: 0; left: 0;   width: var(--mss-fade-size, 190px);  --mss-fade-d: to left; }
.mss-fade-right .mss-fade  { top: 0; bottom: 0; right: 0;  width: var(--mss-fade-size, 190px);  --mss-fade-d: to right; }

/* ---------- Pause / play button ---------- */
.mss-pause-btn {
	position: absolute;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.mss-pause-btn svg { width: 1em; height: 1em; display: block; }
.mss-pause-btn .mss-ic-play { display: none; }
.mss-pause-btn.is-on .mss-ic-pause { display: none; }
.mss-pause-btn.is-on .mss-ic-play { display: block; }
.mss-pause-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mss-btn-top-right .mss-pause-btn    { top: var(--mss-btn-off, 14px);    right: var(--mss-btn-off, 14px); }
.mss-btn-top-left .mss-pause-btn     { top: var(--mss-btn-off, 14px);    left: var(--mss-btn-off, 14px); }
.mss-btn-bottom-right .mss-pause-btn { bottom: var(--mss-btn-off, 14px); right: var(--mss-btn-off, 14px); }
.mss-btn-bottom-left .mss-pause-btn  { bottom: var(--mss-btn-off, 14px); left: var(--mss-btn-off, 14px); }

/* ---------- Features ---------- */
.mss-features {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 90px;
	row-gap: 18px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 22px 20px 0;
	list-style: none;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.mss-feature {
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0 solid transparent;
	transition-property: transform, background-color, border-color, box-shadow;
	transition-duration: 300ms;
	transition-timing-function: ease;
}
.mss-fi {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
a.mss-fi:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; }

.mss-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	transition-property: transform, color, background-color, border-color, box-shadow;
	transition-duration: 300ms;
	transition-timing-function: ease;
}
.mss-icon i { display: block; line-height: 1; }
.mss-icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.mss-feature:hover .mss-icon,
.mss-feature:focus-within .mss-icon {
	transform: rotate(var(--mss-ic-rot, 0deg)) scale(var(--mss-ic-scale, 1));
}
.mss-ftext { display: block; flex: 1 1 auto; min-width: 0; margin: 0; color: #ececec; font-size: 21px; line-height: 1.3; }

/* Icon hover animations */
.mss-ic-anim-pulse  .mss-feature:hover .mss-icon { animation: mss-pulse 0.9s ease-in-out infinite; }
.mss-ic-anim-bounce .mss-feature:hover .mss-icon { animation: mss-bounce-y 0.7s ease infinite; }
.mss-ic-anim-wobble .mss-feature:hover .mss-icon { animation: mss-wobble 0.8s ease-in-out infinite; }
@keyframes mss-pulse    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes mss-bounce-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mss-wobble   { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* ---------- Reduced motion ---------- */
.mss-root.is-reduced .mss-group { animation: none !important; transform: none !important; }
.mss-root.is-reduced .mss-group[data-clone] { display: none; }
.mss-root.is-reduced .mss-marquee { overflow-x: auto; scrollbar-width: none; }
.mss-root.is-reduced .mss-shine { display: none; }
.mss-root.is-reduced .mss-pause-btn { display: none; }

@media (prefers-reduced-motion: reduce) {
	.mss-respect-rm .mss-group { animation: none !important; transform: none !important; }
	.mss-respect-rm .mss-group[data-clone] { display: none; }
	.mss-respect-rm .mss-marquee { overflow-x: auto; scrollbar-width: none; }
	.mss-respect-rm .mss-shine { display: none; }
	.mss-respect-rm .mss-pause-btn { display: none; }
	.mss-respect-rm .mss-card,
	.mss-respect-rm .mss-feature,
	.mss-respect-rm .mss-icon { transition: none; animation: none !important; }
}