/******************************************************************
Stylesheet: Logo marquee (Kunden and Partner blocks)

Markup: mediaschneider_logo_marquee() in library/blocks.php.
Registered as the style handle "mediaschneider-logo-marquee" and loaded by the
blocks that use it (block.json "style").

The block sets the sizes on its wrapper:
  --ms-logos-cell         width of a logo cell
  --ms-logos-line         height of a line (= cell height)
  --ms-logos-line-gap     space between two lines
  --ms-logos-logo-width   logo box: the largest a logo can be
  --ms-logos-logo-height
  --ms-logos-square       width of a square logo: every logo gets this area
  --ms-logos-time         time a logo needs to move by one cell (the speed)

Every logo has a cell of the same size. Logos get about the same area, so wide
and square logos look equally heavy: width = square × √ratio, limited to the
logo box. The ratio comes from PHP (--ms-logos-ratio); without it (SVG) the
logo is contained in the box. The second line is shifted by half a cell (see
the animation-delay at the end).

Endless loop: each line holds its list several times (PHP) and moves left by
exactly one copy (100% / number of copies), then starts again: at that moment
the next copy is exactly where the first one started, so the loop never seems
to restart. One animation per line, not per copy: with one animation per copy,
a single copy sometimes flickered (blank for a frame), apparently when the
copies restarted out of step. The duration is "logos in the line × time per
logo", so all lines move at the same speed whatever their length.

Every logo is its own small compositing layer (will-change on the img). The
moving line is far wider than the screen, so Safari (WebKit) splits it into
tiles and only keeps the tiles near the visible part. When the line jumps back
at the end of a cycle, the tiles at the start were gone: the whole line (or,
with one animation per copy, one copy) was blank for a few frames. Small
layers aren't tiled, and the logos are the only painted content of the line.

Without motion (prefers-reduced-motion: reduce) nothing moves: the copies are
hidden, lines and lists become display: contents, and the logos wrap centred in
the content width, back in their manual order (inline "order").

Logo files must have a transparent background (PNG or SVG): mix-blend-mode
can't remove a white background here, because every moving list is its own
layer and blends only with itself. The logos also decode synchronously (PHP):
with decoding="async" Chrome sometimes painted a frame without a logo, so logos
flickered.
******************************************************************/

/* Without motion: one wrapped, centred block of logos in the content width. */
.ms-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: var(--ms-logos-line-gap, 0);
	max-inline-size: var(--ms-max-width);
	margin-inline: auto;
	padding-inline: var(--ms-gutter);
}

.ms-logos__line {
	display: contents;
}

.ms-logos__list {
	display: contents;
	padding: 0;
	list-style: none;

	&[aria-hidden="true"] {
		display: none;
	}
}

.ms-logos__item {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--ms-logos-cell);
	block-size: var(--ms-logos-line);
}

.ms-logos__logo {
	inline-size: var(--ms-logos-logo-width);
	block-size: var(--ms-logos-logo-height);
	object-fit: contain;

	&[style*="--ms-logos-ratio"] {
		inline-size: min(
			var(--ms-logos-logo-width),
			var(--ms-logos-logo-height) * var(--ms-logos-ratio),
			var(--ms-logos-square) * sqrt(var(--ms-logos-ratio))
		);
		block-size: auto;
		aspect-ratio: var(--ms-logos-ratio);
	}
}

@media (prefers-reduced-motion: no-preference) {

	.ms-logos {
		display: grid;
		justify-content: start;
		max-inline-size: none;
		padding-inline: 0;
		overflow: clip;
	}

	.ms-logos__line {
		display: flex;
		inline-size: max-content; /* 100% = all copies, for the keyframes */
		animation: ms-logos-marquee calc(var(--ms-logos-count, 1) * var(--ms-logos-time, 5s)) linear infinite;
		will-change: translate;
	}

	/* Own layer per logo: no blank line in Safari when the loop starts over (see above). */
	.ms-logos__logo {
		will-change: transform;
	}

	.ms-logos__list {
		display: flex;
		flex: none;

		&[aria-hidden="true"] {
			display: flex;
		}
	}

	/*
	Second line: half a cell to the right of the first line, so the logos read
	1, 2, 3 … in a zigzag. Done by starting the animation (count − ½) logos in:
	the line is then shifted left by one copy minus half a cell, which is the
	same as half a cell to the right, without an empty gap at the left edge.
	*/
	.ms-logos__line:nth-child(2) {
		animation-delay: calc((0.5 - var(--ms-logos-count, 1)) * var(--ms-logos-time, 5s));
	}
}

@keyframes ms-logos-marquee {
	to {
		translate: calc(-100% / var(--ms-logos-copies, 2)) 0;
	}
}