/**
 * Infinite Text Carousel — styles
 * Lightweight, no framework dependency.
 */

.itc-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

.itc-track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	/* animation-duration & animation-name set inline by JS per-instance */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.itc-track.itc-dir-left {
	animation-name: itc-scroll-left;
}

.itc-track.itc-dir-right {
	animation-name: itc-scroll-right;
}

/* Each "group" is one full pass of the repeater items.
   The track is built from N groups placed side by side;
   the keyframes shift by exactly 1/N of total width so the
   loop point is invisible. Width fraction is set via a CSS
   custom property written inline by JS (--itc-shift). */
@keyframes itc-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--itc-shift, -50%)); }
}

@keyframes itc-scroll-right {
	from { transform: translateX(var(--itc-shift, -50%)); }
	to   { transform: translateX(0); }
}

.itc-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.itc-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	text-decoration: none;
	position: relative;
}

.itc-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.itc-item-icon i {
	line-height: 1;
}

.itc-item-icon svg {
	display: block;
}

.itc-item-text {
	display: inline-block;
}

/* Separators between items (not after the last item in each group) */
.itc-sep-dot .itc-item:not(:last-child)::after,
.itc-sep-pipe .itc-item:not(:last-child)::after {
	content: '';
	margin-left: inherit;
	display: inline-block;
}

.itc-sep-dot .itc-item:not(:last-child)::after {
	content: '\2022'; /* • */
	margin-left: 1em;
}

.itc-sep-pipe .itc-item:not(:last-child)::after {
	content: '|';
	margin-left: 1em;
}

/* Pause on hover */
.itc-wrapper[data-pause-hover="yes"]:hover .itc-track,
.itc-wrapper[data-pause-hover="yes"]:focus-within .itc-track {
	animation-play-state: paused;
}

/* Edge fade mask (optional) */
.itc-wrapper.itc-fade-edges {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 5%,
		#000 95%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 5%,
		#000 95%,
		transparent 100%
	);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.itc-track {
		animation: none !important;
	}
}

/* Responsive tweaks */
@media (max-width: 1024px) {
	.itc-item {
		gap: 6px;
	}
}

@media (max-width: 767px) {
	.itc-item {
		gap: 4px;
	}
}