/**
 * Partner logo ticker.
 *
 * brand.css .ticker / .partners / .plogo.
 *
 * The widget prints the logo list twice inside one track, so translating the
 * track by -50% lands the second copy exactly where the first began and the
 * loop is seamless. The 64px gap between logos is part of that arithmetic:
 * because it applies inside each set and between the two sets equally, the
 * two halves are the same width.
 */

.nysf-ticker {
	position: relative;
	overflow: hidden;
}

.nysf-ticker__track {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 44px;
}

.nysf-ticker__set {
	display: contents;
}

.nysf-ticker__logo {
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.nysf-ticker__logo img {
	max-height: 100%;
	max-width: 190px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/*
 * An SVG with only a viewBox and no width/height attributes has no intrinsic
 * size, and `width: auto; height: auto` inside this flex row resolves it to
 * 0x0 — the logo is in the DOM, loads fine, and paints nothing. Giving it a
 * definite height lets the browser derive the width from the viewBox ratio.
 * The Australian Academy of Science mark is the one that hits this; Monash
 * carries explicit dimensions and is unaffected either way.
 */
.nysf-ticker__logo img[src$='.svg'],
.nysf-ticker__logo img[src$='.svgz'] {
	height: 100%;
	width: auto;
}

/* ---- Scrolling variant ---- */

.nysf-ticker--scroll .nysf-ticker__track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	gap: 64px;
	animation: nysf-tickmove 32s linear infinite;
}

/*
 * display: contents would collapse each set into the track's flex line, which
 * is right for the static row but breaks the -50% arithmetic: the two halves
 * have to be measurable boxes for the translate to land cleanly.
 */
.nysf-ticker--scroll .nysf-ticker__set {
	display: flex;
	align-items: center;
	gap: 64px;
	padding-right: 64px;
}

/* Pause / play control (WCAG 2.2.2): the strip auto-scrolls on every device,
   including touch, and this visible button gives a way to stop it. Hover and
   focus still pause on desktop; reduced-motion users get the static row and no
   button. */
.nysf-ticker--scroll.is-paused .nysf-ticker__track {
	animation-play-state: paused;
}

.nysf-ticker__toggle {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #0b2233;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index: 2;
}

.nysf-ticker__toggle:focus-visible {
	outline: 2px solid #0b2233;
	outline-offset: 2px;
}

.nysf-ticker__ico {
	fill: currentColor;
}

.nysf-ticker__ico--play {
	display: none;
}

.nysf-ticker--scroll.is-paused .nysf-ticker__ico--pause {
	display: none;
}

.nysf-ticker--scroll.is-paused .nysf-ticker__ico--play {
	display: block;
}

.nysf-ticker:not(.nysf-ticker--scroll) .nysf-ticker__toggle {
	display: none;
}

@keyframes nysf-tickmove {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/*
 * Motion the user did not ask for, on a strip of logos, is exactly what this
 * media query is for. Falls back to the static centred row.
 */
@media (prefers-reduced-motion: reduce) {
	.nysf-ticker--scroll .nysf-ticker__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		gap: 44px;
	}

	/*
	 * Hide the duplicate rather than collapsing both with `display: contents`.
	 * The widget renders the set twice so the -50% translate loops without a
	 * jump; flattening both into one wrapped row showed every partner logo
	 * twice, which is wrong on the page and worse in a screen reader, where
	 * the second set is aria-hidden and so reads as a row of unlabelled
	 * images.
	 */
	.nysf-ticker--scroll .nysf-ticker__set {
		display: contents;
	}

	.nysf-ticker--scroll .nysf-ticker__set:nth-child(2) {
		display: none;
	}
}

/* No control needed when there is no motion. */
@media (prefers-reduced-motion: reduce) {
	.nysf-ticker__toggle {
		display: none;
	}
}