/*
 * Coopyleft Clienti
 *
 * Variabili personalizzabili dal tema:
 *   --cc-ink   colore del testo sul cerchio (default #21242a)
 *   --cc-dot   colore dei pallini (default: primary soft #dceaff)
 *   --cm-bg    colore della pillola (default: primario #467ef7)
 *   --cm-border / --cm-border-w  colore e spessore del bordo della pillola (default: nessun bordo, 2px)
 */

/* ---------- Cerchio di testo che ruota con lo scroll ---------- */
.cc-ring {
	--cc-ink: var(--wp--preset--color--ink, #21242a);
	--cc-dot: var(--wp--preset--color--primary-soft, #dceaff);
	--cc-turn: 180deg;

	position: relative;
	width: var(--cc-size, min(90vw, 82vh, 900px));
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	pointer-events: none;
	/* come i cerchi di sfondo: la rotazione e' legata alla posizione dell'elemento nello schermo */
	view-timeline: --cc-view block;
}

.cc-ring__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	will-change: rotate;
}

.cc-ring__text {
	fill: var(--cc-ink);
	font-family: inherit;
	font-weight: 500;
}

.cc-ring__dot {
	fill: var(--cc-dot);
	font-family: "DejaVu Sans", Arial, "Segoe UI Symbol", sans-serif;
}

/* Browser con animazioni legate allo scroll: tutto in CSS. Antioraria = angolo negativo */
@supports (animation-timeline: view()) {
	.cc-ring:not(.cc-ring--liscio) .cc-ring__svg {
		animation: cc-spin linear both;
		animation-timeline: --cc-view;
	}

	@keyframes cc-spin {
		from { rotate: 0deg; }
		to   { rotate: calc(var(--cc-turn) * -1); }
	}
}

/* Altri browser: il JS aggiorna solo --cc-t (da 0 a 1) */
@supports not (animation-timeline: view()) {
	.cc-ring__svg {
		rotate: calc(var(--cc-t, 0) * var(--cc-turn) * -1);
	}
}

/* Rotazione "liscia": la posizione la calcola il JS con un'inerzia (--cc-t) */
.cc-ring--liscio .cc-ring__svg {
	rotate: calc(var(--cc-t, 0) * var(--cc-turn) * -1);
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.cl-clienti .cc-ring,
	.cl-clienti .cm {
		translate: none;
	}
	.cc-ring__svg {
		animation: none;
		rotate: none;
	}
}

/* ---------- Pillola dei clienti ---------- */
.cm {
	--cm-bg: #467ef7;
	--cm-fg: #ffffff; /* colore di nomi e loghi */
	--cm-gap: clamp(2.5rem, 5vw, 4.5rem);
	--cm-logo-h: clamp(2rem, 3.2vw, 2.75rem);

	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding-block: clamp(0.8rem, 1.4vw, 1.1rem);
	border: var(--cm-border-w, 1px) solid var(--cm-border, transparent);
	border-radius: 999px;
	background: var(--cm-bg);
	color: var(--cm-fg);
}

/* Lo sfondo sta sul binario che scorre (stesso colore della pillola): serve perche' i loghi JPG si fondano con lo sfondo */
.cm__track {
	display: flex;
	width: max-content;
	background: var(--cm-bg);
	animation: cm-scroll var(--cm-time, 40s) linear infinite;
	will-change: transform;
}

.cm--pausa:hover .cm__track {
	animation-play-state: paused;
}

.cm__group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--cm-gap);
	margin: 0;
	padding: 0 calc(var(--cm-gap) / 2);
	list-style: none;
}

.cm__item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

/* Tutti i loghi diventano bianchi: ogni pixel non trasparente vira al bianco */
.cm__logo {
	display: block;
	width: auto;
	height: var(--cm-logo-h);
	max-width: 9rem;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Il colore dei loghi lo decide il filtro SVG scritto dal plugin (stile "filter" sull'immagine):
   segue il colore scelto per la pillola e funziona anche con i loghi dallo sfondo pieno. */

.cm__name {
	/* contorno opzionale (attributo contorno): sta fuori dalle lettere, il riempimento resta intero */
	-webkit-text-stroke: var(--cm-stroke-w, 0) var(--cm-stroke, transparent);
	paint-order: stroke fill;
	margin: 0;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 400;
	line-height: 1.2;
}

/* Due gruppi identici: scorrere di meta' larghezza = loop senza stacchi, da destra verso sinistra */
@keyframes cm-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cm__track {
		animation: none;
	}
	.cm {
		overflow-x: auto;
	}
}

@media (max-width: 640px) {
	.cm {
		--cm-gap: 2rem;
	}
}

/* ---------- Cerchio + pillola sovrapposti: [coopyleft_clienti] ---------- */
.cl-clienti {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	overflow-x: clip;
	width: 100%;
}
.cl-clienti > * {
	grid-area: 1 / 1;
}
.cl-clienti {
	/* Scroll verticale diverso: quanto si muovono, in px, mentre la sezione attraversa lo schermo.
	   Il segno e' la direzione: positivo = piu' veloce dello scroll, negativo = piu' lento. 0 = fermo. */
	--cl-par-ring: 140px;
	--cl-par-pill: -60px;
}
.cl-clienti .cc-ring {
	translate: 0 calc((0.5 - var(--cc-t, 0.5)) * var(--cl-par-ring));
	margin: 0 0 0 0; /* per spostarlo a destra: es. margin: 0 0 0 8vw; */
	/* cerchio allineato a sinistra; per centrarlo: --cl-ring-align: center; (oppure end per la destra) */
	justify-self: var(--cl-ring-align, start);
}
.cl-clienti .cm {
	position: relative;
	z-index: 1; /* la pillola sta sopra il cerchio */
	translate: 0 calc((0.5 - var(--cc-t, 0.5)) * var(--cl-par-pill));
	width: 100%;
	max-width: 1280px;
}

/* Sicurezza: WordPress a volte inserisce un paragrafo vuoto dentro la pillola e sposta il contenuto */
.cm > p:empty,
.cm__track > p:empty {
	display: none;
}