/* Logo-slider sidecar style sheet */
/* 2026-02-19 */

.logo-slider 	{
	background:	white;
	overflow:	hidden;
	padding:	40px 0;
	white-space:	nowrap;
	width:	100%;

	/* Fade Effect */

	-webkit-mask-image: linear-gradient(
	to right, 
	transparent, 
	black 15%, 
	black 85%, 
	transparent
	);
	mask-image: linear-gradient(
	to right, 
	transparent, 
	black 15%, 
	black 85%, 
	transparent
	);
	}

.logo-track 	{
	background-color:	white;
	display:	flex;
	width:	max-content; /* Vital: allows the track to extend beyond the screen */
	align-items:	center;
	animation:	scroll 40s linear infinite;
	}
.logo-track img 	{
	height:	60px;
	margin:	0 40px;
	width:	auto;
	filter:	grayscale(100%); /* “Muted” look */
	opacity:	0.6;
	transition: filter 0.3s ease, opacity 0.3s ease; /* Smooth transition for the hover effect */
	}
/* Colour hover state wrapped in the media query to prevent sticky states on mobile */

@media (hover: hover) 	{
.logo-track img:hover 	{
	filter:	grayscale(0%);
	opacity:	1;
	}
	}

@keyframes scroll 	{
	from 	{transform:	translateX(0);}
	to 	{transform:	translateX(-50%);} /*  Moves halfway (the length of one set)  */
	}

/* Only apply the pause effect on devices that actually support hovering (like a mouse) */

@media (hover: hover)	{
.logo-slider:hover .logo-track	{
	animation-play-state: paused;
	}
	}