/* Skills Marquee — Moyo Homepage Widget
   Two-row auto-scrolling marquee of skill cards with icons.
   Depends on moyo-brand.css for CSS variables. */

/* ── Keyframes ── */

@keyframes moyo-marquee-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes moyo-marquee-right {
	0%   { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

/* ── Section ── */

.moyo-skills {
	padding: 96px 0;
	background: var(--moyo-info-bg, #eff6ff) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	box-sizing: border-box;
	overflow: hidden;
}

.moyo-skills__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 0 40px;
}

/* ── Header ── */

.moyo-skills__header {
	margin-bottom: 56px;
	text-align: center;
}

.moyo-skills__eyebrow {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--moyo-primary, #2563eb) !important;
	margin-bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.moyo-skills__eyebrow::before {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--moyo-primary, #2563eb);
	border-radius: 2px;
}

.moyo-skills__title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif);
	font-size: 44px;
	font-weight: 400;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0 0 16px;
	line-height: 1.15;
}

.moyo-skills__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 17px;
	color: var(--moyo-muted, #64748b) !important;
	margin: 0 auto;
	line-height: 1.6;
	max-width: 560px;
}

/* ── Marquee Container ── */

.moyo-skills__marquee {
	overflow: hidden !important;
	width: 100%;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* IE/Edge */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
}

.moyo-skills__marquee + .moyo-skills__marquee {
	margin-top: 16px;
}

/* ── Track (scrolling strip) ── */

.moyo-skills__track {
	display: flex;
	gap: 16px;
	width: max-content;
	will-change: transform;
}

.moyo-skills__track--left {
	animation: moyo-marquee-left 30s linear infinite;
}

.moyo-skills__track--right {
	animation: moyo-marquee-right 30s linear infinite;
}

/* Pause on hover */
.moyo-skills__marquee:hover .moyo-skills__track {
	animation-play-state: paused;
}

/* ── Card ── */

.moyo-skills__card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--moyo-card, #ffffff);
	border: 1px solid var(--moyo-border, #e5e7eb);
	border-radius: 12px;
	padding: 12px 20px;
	white-space: nowrap;
	cursor: default;
	flex-shrink: 0;
	transition: box-shadow var(--moyo-transition, 0.2s ease),
	            transform var(--moyo-transition, 0.2s ease),
	            border-color var(--moyo-transition, 0.2s ease);
}

.moyo-skills__card:hover {
	box-shadow: var(--moyo-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
	transform: translateY(-2px);
	border-color: var(--moyo-border-hover, #d1d5db);
}

/* ── Icon Circle ── */

.moyo-skills__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

/* ── Skill Name ── */

.moyo-skills__name {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 15px;
	font-weight: 500;
	color: var(--moyo-heading, #1e293b) !important;
	line-height: 1.3;
}

/* ── Responsive: 960px ── */

@media (max-width: 960px) {
	.moyo-skills {
		padding: 72px 0;
	}
	.moyo-skills__title {
		font-size: 34px;
	}
	.moyo-skills__header {
		margin-bottom: 40px;
	}
}

/* ── Responsive: 640px ── */

@media (max-width: 640px) {
	.moyo-skills {
		padding: 56px 0;
	}
	.moyo-skills__inner {
		padding: 0 20px;
	}
	.moyo-skills__title {
		font-size: 28px;
	}
	.moyo-skills__subtitle {
		font-size: 15px;
	}
	.moyo-skills__header {
		margin-bottom: 28px;
	}
	.moyo-skills__track {
		gap: 12px;
	}
	.moyo-skills__card {
		padding: 10px 16px;
		gap: 10px;
		border-radius: 10px;
	}
	.moyo-skills__icon {
		width: 34px;
		height: 34px;
		min-width: 34px;
		font-size: 17px;
	}
	.moyo-skills__name {
		font-size: 13px;
	}
}

/* ── Hide scrollbar (WebKit) ── */

.moyo-skills__marquee::-webkit-scrollbar {
	display: none;
}

/* ── Reduced motion: respect user preference ── */

@media (prefers-reduced-motion: reduce) {
	.moyo-skills__track--left,
	.moyo-skills__track--right {
		animation-duration: 120s;
	}
}