/* ==========================================================================
   AFFANECOM - seamless marquee (hero trust strip)

   Markup built by affan-marquee.js:
     .affan-hero-trustrow          viewport, clips
       .affan-marquee              the moving element, width:max-content
         .affan-marquee__track     the real content
         .affan-marquee__clone     duplicate, aria-hidden

   Travelling exactly one track width means the clone lands precisely where
   the original began, so the loop has no seam and no gap. The distance comes
   from --affan-marquee-width, measured in JS, rather than a percentage:
   a percentage of a max-content element is not the value we need here.
   ========================================================================== */

.affan-hero-trustrow[data-affan-marquee="1"]{
	display:block !important;
	overflow:hidden !important;
	position:relative;

	/* Cancel the scroll-snap slider this row used to be. */
	scroll-snap-type:none !important;
	overflow-x:hidden !important;
	margin-left:0 !important;
	margin-right:0 !important;
	padding-left:0 !important;
	padding-right:0 !important;

	/* Soften both edges so items enter and leave rather than being chopped. */
	-webkit-mask-image:linear-gradient(90deg,
		transparent 0,
		#000 40px,
		#000 calc(100% - 40px),
		transparent 100%);
	mask-image:linear-gradient(90deg,
		transparent 0,
		#000 40px,
		#000 calc(100% - 40px),
		transparent 100%);
}

.affan-marquee{
	display:flex;
	width:max-content;
	will-change:transform;
	animation:affan-marquee var(--affan-marquee-duration, 24s) linear infinite;
}

.affan-marquee__track{
	display:flex;
	align-items:center;
	flex:none;
	gap:34px;
	/* Matches the gap so the join between copies is spaced like every other
	   join, which is the other half of making the seam invisible. */
	padding-right:34px;
}

.affan-marquee__track > .elementor-widget{
	flex:0 0 auto !important;
	width:auto !important;
	margin:0 !important;
}

@keyframes affan-marquee{
	from{ transform:translate3d(0,0,0); }
	to{ transform:translate3d(calc(-1 * var(--affan-marquee-width, 100%)),0,0); }
}

/* Let people stop it to read. */
.affan-hero-trustrow:hover .affan-marquee,
.affan-hero-trustrow:focus-within .affan-marquee{
	animation-play-state:paused;
}

/* --------------------------------------------------------------------------
   Desktop: the three items fit, so it sits still and centred.
   -------------------------------------------------------------------------- */
@media (min-width:1025px){
	.affan-hero-trustrow[data-affan-marquee="1"]{
		-webkit-mask-image:none;
		mask-image:none;
	}
	.affan-marquee{
		animation:none;
		width:100%;
		justify-content:center;
	}
	.affan-marquee__clone{ display:none !important; }
	.affan-marquee__track{
		gap:38px;
		padding-right:0;
		justify-content:center;
		flex-wrap:wrap;
	}
}

/* --------------------------------------------------------------------------
   Continuous motion is exactly what vestibular disorders react to. Stop it
   and show a single static, scrollable row instead.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	.affan-marquee{
		animation:none !important;
		width:100%;
	}
	.affan-marquee__clone{ display:none !important; }
	.affan-hero-trustrow[data-affan-marquee="1"]{
		overflow-x:auto !important;
		-webkit-mask-image:none;
		mask-image:none;
	}
	.affan-marquee__track{ padding-right:0; }
}

/* Before the script runs the row is a plain flex row, which avoids a flash of
   unstyled stacking on slower connections. */
.affan-hero-trustrow:not([data-affan-marquee="1"]){
	overflow:hidden;
}