/*
 * קרוסלת הלקוחות של אווקסוויזן.
 *
 * התנועה כולה ב-CSS: הרשימה משוכפלת כמה פעמים, והמסילה מוזזת בדיוק ברוחב של עותק אחד.
 * לכן הלולאה חלקה ואין צורך ב-JavaScript.
 *
 * המשתנים מגיעים מהווידג'ט:
 *   --avox-cols / --avox-cols-tablet / --avox-cols-mobile   כמה לוגואים נראים במסך
 *   --avox-count                                            סך הפריטים במסילה (כולל העותקים)
 *   --avox-shift                                            רוחב עותק אחד, באחוזים מהמסילה
 *   --avox-duration                                         משך סיבוב מלא
 */

.avox-customers {
	--avox-cols: 6;
	--avox-cols-wide: 8;
	--avox-cols-tablet: 6;
	--avox-cols-mobile: 3;
	--avox-count: 40;
	--avox-shift: 50%;
	--avox-duration: 60000ms;

	position: relative;
	width: 100%;
	overflow: hidden;
	/* המסילה תמיד נפרשת שמאל-לימין, כדי שהחישוב לא ישתנה בין עמוד עברי לאנגלי.
	   כיוון התנועה נקבע רק על ידי ההנפשה. */
	direction: ltr;
}

.avox-customers__track {
	display: flex;
	align-items: center;
	width: calc(100% / var(--avox-cols) * var(--avox-count));
	animation: avox-customers-right var(--avox-duration) linear infinite;
	will-change: transform;
	backface-visibility: hidden;
}

.avox-customers--left .avox-customers__track {
	animation-name: avox-customers-left;
}

.avox-customers__item {
	flex: 0 0 calc(100% / var(--avox-count));
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
}

.avox-customers__media {
	display: block;
	width: 100%;
	max-width: 300px;
	margin-inline: auto;
	text-decoration: none;
}

.avox-customers__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* אפור כברירת מחדל, וצבע מלא כשעוברים עם העכבר — המראה שהיה באתר. */
.avox-customers--grayscale .avox-customers__media img {
	filter: saturate(0);
	transition: filter 0.3s ease;
}

.avox-customers--grayscale .avox-customers__item:hover .avox-customers__media img {
	filter: saturate(1);
}

.avox-customers--pause:hover .avox-customers__track,
.avox-customers--pause:focus-within .avox-customers__track {
	animation-play-state: paused;
}

@keyframes avox-customers-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-1 * var(--avox-shift)));
	}
}

@keyframes avox-customers-right {
	from {
		transform: translateX(calc(-1 * var(--avox-shift)));
	}

	to {
		transform: translateX(0);
	}
}

/* נקודת השבירה "מסך רחב" של Elementor, כדי שהמספר לא ישתנה מול האתר הקודם. */
@media (min-width: 2400px) {
	.avox-customers__track {
		width: calc(100% / var(--avox-cols-wide) * var(--avox-count));
	}
}

@media (max-width: 1024px) {
	.avox-customers__track {
		width: calc(100% / var(--avox-cols-tablet) * var(--avox-count));
	}
}

@media (max-width: 767px) {
	.avox-customers__track {
		width: calc(100% / var(--avox-cols-mobile) * var(--avox-count));
	}
}

/* רק כשהאפשרות דולקת בווידג'ט. שים לב שגם סשן RDP מדווח "תנועה מופחתת". */
@media (prefers-reduced-motion: reduce) {
	.avox-customers--respect-motion .avox-customers__track {
		animation: none;
		transform: none;
	}
}