/* IPS Image Marquee.
   Pure CSS infinite scroll: the track is rendered twice by PHP
   (see includes/class-widget.php) and animated from translateX(0) to
   translateX(-50%), which is exactly one copy's width, so the loop
   has no visible seam. No JavaScript is involved in the scroll
   itself, so there's nothing to desync or throw a runtime error. */

.ips-marquee-wrap {
	--ips-marquee-fade: 10%;
	overflow: hidden;
	width: 100%;
	/* Lets "Items visible on screen" (Behavior tab) size each item as a
	   fraction of this wrapper's own width via cqi units, regardless of
	   the track itself being width: max-content. Falls back gracefully:
	   browsers without container query support just ignore the cqi
	   calc() and items keep their natural/content-based width. */
	container-type: inline-size;
}

.ips-marquee-fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black var(--ips-marquee-fade),
		black calc(100% - var(--ips-marquee-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black var(--ips-marquee-fade),
		black calc(100% - var(--ips-marquee-fade)),
		transparent 100%
	);
}

.ips-marquee-track {
	--ips-marquee-duration: 22s;
	display: flex;
	width: max-content;
	animation: ips-marquee-scroll-left var(--ips-marquee-duration) linear infinite;
}

/* Direction: right reuses the same keyframes, just played backwards
   in time, which reads as scrolling the opposite way. */
.ips-marquee-dir-right .ips-marquee-track {
	animation-direction: reverse;
}

/* Pause on hover: only added when the "Pause on hover" control is on
   (prefix_class adds ips-marquee-pause-yes / ips-marquee-pause- for
   off, so this selector only ever matches when it's actually on). */
.ips-marquee-pause-yes .ips-marquee-track:hover {
	animation-play-state: paused;
}

.ips-marquee-track__group {
	display: flex;
	flex: 0 0 auto;
}

.ips-marquee-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30px;
	flex: 0 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

.ips-marquee-item img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 100%;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.ips-marquee-item a {
	display: flex;
	align-items: center;
}

/* Optional hover effects, off by default (Style > Images > Hover effect) */
.ips-marquee-hover-grayscale .ips-marquee-item img {
	filter: grayscale(100%);
	opacity: 0.7;
}
.ips-marquee-hover-grayscale .ips-marquee-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

.ips-marquee-hover-fade .ips-marquee-item img {
	opacity: 0.55;
}
.ips-marquee-hover-fade .ips-marquee-item:hover img {
	opacity: 1;
}

/* Icon + Text item type (Content > Images > Add images > "Icon + Text") */
.ips-marquee-icon-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
}

.ips-marquee-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	line-height: 1;
}

/* Icon Animation: Off (Style > Icon + Text). Some uploaded icons/SVGs
   include their own built-in animation, defined right on the SVG
   itself via an inline style and/or an embedded <style> block, not
   something this plugin adds or otherwise controls. !important is
   necessary here specifically because it has to beat that inline
   style, which a plain rule never could regardless of selector
   specificity. Targets the icon and every descendant, since the
   animation could be declared on the outer <svg> or an inner
   <path>/<g>, and covers the whole animation shorthand rather than
   just a spin, so this works regardless of what specific animation
   a given icon happens to use. */
.ips-marquee-icon-anim-off .ips-marquee-icon,
.ips-marquee-icon-anim-off .ips-marquee-icon * {
	animation: none !important;
}

.ips-marquee-icon i {
	font-size: inherit;
}

.ips-marquee-icon svg {
	width: 1em;
	height: 1em;
}

.ips-marquee-text {
	white-space: nowrap;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	min-width: 0;
}

.ips-marquee-hover-grayscale .ips-marquee-item:hover .ips-marquee-icon-text,
.ips-marquee-hover-fade .ips-marquee-item:hover .ips-marquee-icon-text {
	opacity: 1;
}

.ips-marquee-hover-grayscale .ips-marquee-icon-text {
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter 0.25s ease, opacity 0.25s ease;
}
.ips-marquee-hover-grayscale .ips-marquee-item:hover .ips-marquee-icon-text {
	filter: grayscale(0%);
}

.ips-marquee-hover-fade .ips-marquee-icon-text {
	opacity: 0.55;
	transition: opacity 0.25s ease;
}

@keyframes ips-marquee-scroll-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Respect reduced-motion preferences: still shows the images, just
   without the constant scrolling motion. */
@media (prefers-reduced-motion: reduce) {
	.ips-marquee-track {
		animation: none;
	}
}