/* Featured On widget — press-logo rotator */
.ms-feat {
	--ms-feat-w: 150px;
	--ms-feat-h: 48px;
	--ms-feat-gap: 40px;
	--ms-feat-dur: 700ms;
	display: flex;
	align-items: center;
	gap: var(--ms-feat-gap);
}

.ms-feat--stack {
	flex-direction: column;
	align-items: flex-start;
}

.ms-feat__label {
	flex: 0 0 auto;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 13px;
}

.ms-feat__slots {
	display: flex;
	align-items: center;
	gap: var(--ms-feat-gap);
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
}

.ms-feat--stack .ms-feat__slots {
	width: 100%;
}

.ms-feat__slot {
	position: relative;
	width: var(--ms-feat-w);
	height: var(--ms-feat-h);
	flex: 0 0 auto;
}

.ms-feat__logo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	/* Keeps hidden logo links out of the tab order and accessibility tree;
	   not in any transition list, so it flips instantly on class change. */
	visibility: hidden;
}

.ms-feat__logo.is-active,
.ms-feat__logo.is-leaving {
	visibility: visible;
}

/* No link is clickable during the ambiguous mid-swap crossfade. */
.ms-feat__slot.is-switching {
	pointer-events: none;
}

.ms-feat__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ms-feat__logo.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* --- Fade ------------------------------------------------------------- */
.ms-feat--fade .ms-feat__logo {
	transition: opacity var(--ms-feat-dur) ease;
}

/* --- Mask & Scale: wipe in left-to-right while settling from 1.06 ------ */
.ms-feat--mask .ms-feat__logo {
	clip-path: inset(0 100% 0 0);
	transform: scale(1.06);
	transition: clip-path var(--ms-feat-dur) cubic-bezier(0.65, 0, 0.35, 1),
		transform var(--ms-feat-dur) cubic-bezier(0.65, 0, 0.35, 1),
		opacity calc(var(--ms-feat-dur) / 2) ease;
}

.ms-feat--mask .ms-feat__logo.is-active {
	clip-path: inset(0 0 0 0);
	transform: scale(1);
}

.ms-feat--mask .ms-feat__logo.is-leaving {
	clip-path: inset(0 0 0 0);
	transform: scale(1);
	opacity: 0;
}

/* --- Blur: sharpen out of a soft blur --------------------------------- */
.ms-feat--blur .ms-feat__logo {
	filter: blur(8px);
	transform: scale(1.04);
	transition: opacity var(--ms-feat-dur) ease,
		filter var(--ms-feat-dur) ease,
		transform var(--ms-feat-dur) ease;
}

.ms-feat--blur .ms-feat__logo.is-active {
	filter: blur(0);
	transform: scale(1);
}

.ms-feat--blur .ms-feat__logo.is-leaving {
	filter: blur(6px);
}

/* --- Rise: slide up through the slot ----------------------------------- */
.ms-feat--rise .ms-feat__logo {
	transform: translateY(14px);
	transition: opacity var(--ms-feat-dur) ease,
		transform var(--ms-feat-dur) cubic-bezier(0.22, 1, 0.36, 1);
}

.ms-feat--rise .ms-feat__logo.is-active {
	transform: translateY(0);
}

.ms-feat--rise .ms-feat__logo.is-leaving {
	transform: translateY(-14px);
}

@media (prefers-reduced-motion: reduce) {
	.ms-feat .ms-feat__logo {
		transition: none !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}
}