/* ==========================================================================
   zweef-logos.css — klantlogo's die links en rechts naast een smal blok zweven.
   Alleen het logo zelf (geen vak). De laag valt precies binnen de contentbreedte van .container (zelfde uitlijning
   als de rest van de pagina). Onder 1180px verborgen.
   ========================================================================== */

.zweef { padding-block: clamp(40px, 5vw, 64px); }
.zweef__container { position: relative; }
.zweef__laag { display: none; }

@media (min-width: 1180px) {
	.zweef__laag {
		--maat: 84px;
		--zij: calc((100% - 800px) / 2 - var(--maat) - 24px); /* vrije ruimte naast het blok */
		display: block; position: absolute; top: -24px; bottom: -24px;
		left: var(--gutter); right: var(--gutter); pointer-events: none;
	}
	.zweef__logo {
		position: absolute; top: calc((100% - var(--maat)) * var(--y));
		width: var(--maat); height: var(--maat); pointer-events: auto;
		transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
		transition: transform .7s cubic-bezier(.2, .8, .2, 1);
	}
	.zweef__logo--l { left: calc(var(--zij) * var(--x)); }
	.zweef__logo--r { right: calc(var(--zij) * var(--x)); }
	.zweef__binnen {
		display: grid; place-items: center; width: 100%; height: 100%;
		animation: zweef var(--d, 6s) ease-in-out var(--v, 0s) infinite alternate;
	}
	.zweef__binnen img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
	.zweef__logo:hover img { filter: none; opacity: 1; }
}
@media (min-width: 1180px) and (max-width: 1339px) {
	.zweef__laag { --maat: 72px; }
}

@keyframes zweef {
	from { transform: translateY(-7px) rotate(-3deg); }
	to { transform: translateY(7px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
	.zweef__binnen { animation: none; }
	.zweef__logo { transition: none; }
}