/* =====================================================================
   קרוסלת לוגואים — פס אינסופי, לבן בברירת מחדל, צבע בריחוף
   ===================================================================== */

.mz-logos {
	--mz-h: 64px;          /* גובה לוגו בסיסי */
	--mz-card-h: 118px;
	--mz-gap: 22px;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.mz-logos__caption {
	margin: 0;
	font-family: var(--mz-font, inherit);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--mz-cyan, #00B4D8);
	display: flex;
	align-items: center;
	gap: 14px;
}

.mz-logos__caption::before,
.mz-logos__caption::after {
	content: "";
	width: 44px;
	height: 1px;
	background: linear-gradient(90deg, transparent, currentColor);
}

.mz-logos__caption::after { transform: scaleX(-1); }

/* דהייה בקצוות */
.mz-logos__viewport {
	width: 100%;
	direction: ltr; /* the track overflows to the right, so the loop never shows an empty edge */
	overflow: hidden;
	padding: 14px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.mz-logos__track {
	display: flex;
	width: max-content;
	direction: ltr;
	animation: mz-logos-scroll var(--mz-dur, 55s) linear infinite;
}

.mz-logos__viewport:hover .mz-logos__track,
.mz-logos__viewport:focus-within .mz-logos__track {
	animation-play-state: paused;
}

@keyframes mz-logos-scroll {
	to { transform: translateX(-50%); }
}

.mz-logos .mz-logos__set {
	display: flex;
	align-items: center;
	gap: var(--mz-gap);
	margin: 0;
	padding: 0 calc(var(--mz-gap) / 2);
	list-style: none;
}

.mz-logos__item {
	position: relative;
	display: grid;
	place-items: center;
	height: var(--mz-card-h);
	padding: 0 34px;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	background: rgba(255, 255, 255, .025);
	transition: background-color .45s ease, border-color .45s ease, transform .45s cubic-bezier(.22, .9, .24, 1), box-shadow .45s ease;
}

.mz-logos__item img {
	grid-area: 1 / 1;
	display: block;
	height: calc(var(--mz-h) * var(--mz-s, 1));
	width: auto;
	max-width: none;
	transition: opacity .45s ease, transform .45s cubic-bezier(.22, .9, .24, 1);
	user-select: none;
	-webkit-user-drag: none;
}

.mz-logos__mono { opacity: .62; }
.mz-logos__item--auto .mz-logos__mono { filter: grayscale(1) brightness(0) invert(1); }
.mz-logos__color { opacity: 0; }

.mz-logos__item:hover {
	background: #fff;
	border-color: #fff;
	transform: translateY(-6px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 4px rgba(0, 180, 216, .28);
}

.mz-logos__item:hover .mz-logos__mono { opacity: 0; }
.mz-logos__item:hover .mz-logos__color { opacity: 1; transform: scale(1.06); }

@media (max-width: 1024px) {
	.mz-logos { --mz-h: 52px; --mz-card-h: 96px; --mz-gap: 16px; }
	.mz-logos__item { padding: 0 24px; }
}

@media (max-width: 767px) {
	.mz-logos { --mz-h: 40px; --mz-card-h: 78px; --mz-gap: 12px; gap: 14px; }
	.mz-logos__item { padding: 0 18px; border-radius: 12px; }
	.mz-logos__caption { font-size: 13px; }
}

/* במגע אין ריחוף — הלוגו שבמרכז הפס מקבל צבע (mz-logos.js) */
.mz-logos__item.is-lit { background: #fff; border-color: #fff; }
.mz-logos__item.is-lit .mz-logos__mono { opacity: 0; }
.mz-logos__item.is-lit .mz-logos__color { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.mz-logos__track { animation: none; width: 100%; }
	.mz-logos .mz-logos__set { flex-wrap: wrap; justify-content: center; }
	.mz-logos .mz-logos__set[aria-hidden="true"] { display: none; }
	.mz-logos__viewport { -webkit-mask-image: none; mask-image: none; }
}

