/* Graviteit Logo Carousel */

.gv-lc {
	width: 100%;
	overflow: hidden;
	--gv-lc-edge-size: 8%;
	--gv-lc-edge-op: 0;
}

/* Soft fade on the left/right edges — width and edge opacity are controllable.
   The mask reads the alpha channel, so rgba() alpha sets how visible the
   very edge stays (0 = fully faded, 1 = no fade). */
.gv-lc.gv-lc--edge {
	-webkit-mask-image: linear-gradient(90deg,
		rgba(0, 0, 0, var(--gv-lc-edge-op)) 0,
		#000 var(--gv-lc-edge-size),
		#000 calc(100% - var(--gv-lc-edge-size)),
		rgba(0, 0, 0, var(--gv-lc-edge-op)) 100%);
	mask-image: linear-gradient(90deg,
		rgba(0, 0, 0, var(--gv-lc-edge-op)) 0,
		#000 var(--gv-lc-edge-size),
		#000 calc(100% - var(--gv-lc-edge-size)),
		rgba(0, 0, 0, var(--gv-lc-edge-op)) 100%);
}

.gv-lc__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: gv-lc-scroll var(--gv-lc-duration, 30s) linear infinite;
	will-change: transform;
}

/* Two identical sets sit side by side; translateX(-50%) === exactly one set,
   so the loop is seamless. Each item carries its gap as margin-right, including
   the last one, so the half-way point lands on a clean boundary. */
@keyframes gv-lc-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause the whole marquee while the user is hovering anywhere over it. */
.gv-lc:hover .gv-lc__track {
	animation-play-state: paused;
}

.gv-lc__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.gv-lc__logo {
	position: relative;
	display: inline-flex;
	height: 60px; /* overridden by the Logo height control */
}

/* Base (full-colour) logo sets the box size. */
.gv-lc__logo .gv-lc__img {
	display: block;
	height: 100%;
	width: auto;
}

/* Duotone: the filtered image is the base layer; the full-colour copy sits on
   top, hidden, and cross-fades IN on hover while the duotone base fades OUT — so
   no rim of the duotone rest-state can show around the full-colour logo (the
   filter's render bounds don't line up pixel-perfectly with the plain image). */
.gv-lc__full {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: auto;
	opacity: 0;
	transition: opacity 400ms ease;
	pointer-events: none;
}

.gv-lc--hover-full .gv-lc__item:hover .gv-lc__full {
	opacity: 1;
}

/* The duotone base carries a transition so it can fade out on hover. */
.gv-lc__img--duo {
	transition: opacity 400ms ease;
}

.gv-lc--hover-full .gv-lc__item:hover .gv-lc__img--duo {
	opacity: 0;
}

/* Tint overlay: the logo's own alpha shape is used as a mask and filled with
   the chosen colour. Fades out on item-hover to reveal the full-colour logo. */
.gv-lc__tint {
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: opacity 400ms ease;
	pointer-events: none;
}

.gv-lc--hover-full .gv-lc__item:hover .gv-lc__tint {
	opacity: 0;
}

/* Solid/tint mode: the full-colour base image is only a sizing spacer — hidden
   at rest so its original colours can't leak around the tint's anti-aliased
   edges (notably with SVG logos). On item-hover it cross-fades back in as the
   tint fades out, revealing the full-colour logo. */
.gv-lc__img--tintbase {
	opacity: 0;
	transition: opacity 400ms ease;
}

.gv-lc--hover-full .gv-lc__item:hover .gv-lc__img--tintbase {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.gv-lc__track {
		animation: none;
	}
}