/*
 * Coopyleft Orbit
 * Personalizzabile dal tema con le variabili CSS:
 *   --co-primary        colore di pulsanti e cerchietti
 *   --co-primary-hover  colore dei pulsanti in hover
 *   --co-line           colore dell'orbita e del focus (blu secondario)
 *   --co-text           colore del testo nei pulsanti
 *   --co-size           ingombro totale del componente (orbita + pulsanti)
 *   --co-speed          durata di un giro completo
 */

 .co-orbit {
	--co-primary: #467ef7;
	--co-primary-hover: #3266e0;
	--co-line: #21242a;
	--co-text: #fff;
	/* Colore dei cerchietti che girano: se non impostato e' il primario. Variante piu' chiara: #8db6ff */
	--co-dot: var(--co-primary);
	/* Entra sempre nello schermo: limitato sia in larghezza che in altezza */
	--co-size: clamp(260px, min(38vw, 70vh), 480px);
	--co-speed: 40s;
	/* Diametro dell'orbita rispetto all'ingombro: lascia spazio ai pulsanti e al loro ingrandimento */
	--co-ring: 0.8;
	/* Respiro dei cerchi: scala minima e massima */
	--co-breath-min: 0.93;
	--co-breath-max: 1.05;

	position: relative;
	width: var(--co-size);
	height: var(--co-size);
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.co-orbit *,
.co-orbit *::before,
.co-orbit *::after {
	box-sizing: border-box;
}

/* Linea dell'orbita, centrata nel componente */
.co-orbit__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--co-size) * var(--co-ring));
	height: calc(var(--co-size) * var(--co-ring));
	transform: translate(-50%, -50%);
	border: 2px solid var(--co-line);
	border-radius: 50%;
	pointer-events: none;
}

/* Il contenitore che ruota: ha lo stesso centro dell'orbita */
.co-orbit__track {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--co-size) * var(--co-ring));
	height: calc(var(--co-size) * var(--co-ring));
	margin: calc(var(--co-size) * var(--co-ring) / -2) 0 0 calc(var(--co-size) * var(--co-ring) / -2);
	animation: co-orbit-spin var(--co-speed) linear infinite;
}

/* Posiziona ogni elemento sull'orbita: ruota di --a, si sposta sul bordo, ri-ruota per restare dritto */
.co-orbit__item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--co-size) * var(--s));
	height: calc(var(--co-size) * var(--s));
	margin: calc(var(--co-size) * var(--s) / -2) 0 0 calc(var(--co-size) * var(--s) / -2);
	transform: rotate(var(--a)) translateX(calc(var(--co-size) * var(--co-ring) / 2)) rotate(calc(-1 * var(--a)));
}

.co-orbit__item--dot {
	pointer-events: none;
}

/* Contro-rotazione: annulla il giro dell'orbita, così il testo resta sempre leggibile */
.co-orbit__counter {
	width: 100%;
	height: 100%;
	animation: co-orbit-spin var(--co-speed) linear infinite reverse;
}

/* Respiro: i cerchi si ingrandiscono e rimpiccioliscono piano mentre girano.
   Sta su un livello a parte, così non si mescola con il bounce dell'hover del pulsante. */
.co-orbit__breath {
	width: 100%;
	height: 100%;
	animation: co-orbit-breathe var(--b, 4s) ease-in-out var(--bd, 0s) infinite;
}

/* Cerchietti */
.co-orbit__dot {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--co-dot, var(--co-primary));
}

/* Pulsanti */
.co-orbit__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 12%;
	border-radius: 50%;
	background: var(--co-primary);
	color: var(--co-text);
	font-size: clamp(10px, calc(var(--co-size) * 0.026), 14px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, box-shadow 0.3s ease;
	will-change: transform;
}

.co-orbit__btn:hover,
.co-orbit__btn:focus-visible {
	transform: scale(1.25);
	background: var(--co-primary-hover);
	box-shadow: 0 10px 24px rgba(33, 36, 42, 0.28);
	color: var(--co-text);
	text-decoration: none;
}

.co-orbit__btn:focus-visible {
	outline: 3px solid var(--co-line);
	outline-offset: 3px;
}

/* Il pulsante sotto il mouse sta sopra agli altri */
.co-orbit__item:hover,
.co-orbit__item:focus-within {
	z-index: 2;
}

/* Quando si passa su un pulsante tutto si ferma (orbita e respiro): è più facile cliccare */
.co-orbit:has(.co-orbit__btn:hover) .co-orbit__track,
.co-orbit:has(.co-orbit__btn:hover) .co-orbit__counter,
.co-orbit:has(.co-orbit__btn:hover) .co-orbit__breath,
.co-orbit:has(.co-orbit__btn:focus-visible) .co-orbit__track,
.co-orbit:has(.co-orbit__btn:focus-visible) .co-orbit__counter,
.co-orbit:has(.co-orbit__btn:focus-visible) .co-orbit__breath {
	animation-play-state: paused;
}

@keyframes co-orbit-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes co-orbit-breathe {
	0%,
	100% {
		transform: scale(var(--co-breath-min));
	}
	50% {
		transform: scale(var(--co-breath-max));
	}
}

/* Chi preferisce meno movimento: niente rotazione e niente respiro */
@media (prefers-reduced-motion: reduce) {
	.co-orbit__track,
	.co-orbit__counter,
	.co-orbit__breath {
		animation: none;
	}

	.co-orbit__btn {
		transition: none;
	}
}

/* Parallasse sull'orbita intera: anello, cerchietti e pulsanti si muovono insieme */
@supports (animation-timeline: view()) {
	.co-orbit {
		--co-k: 0.2; /* velocità: stesso valore di cl-fast */
		animation: co-orbit-drift linear both;
		animation-timeline: view();
	}

	@keyframes co-orbit-drift {
		from {
			translate: 0 calc(var(--co-k) * -50vh);
		}
		to {
			translate: 0 calc(var(--co-k) * 50vh);
		}
	}
}

/* Chi preferisce meno movimento: orbita ferma */
@media (prefers-reduced-motion: reduce) {
	.co-orbit {
		animation: none;
		translate: none;
	}
}

/* ---------------------------------------------------------------------
 * Variante "tecnologie": [coopyleft_orbit_tecnologie]
 * Stessa orbita, stesse animazioni; cerchi cliccabili = tecnologie, cerchietti = variante chiara del primario.
 * ------------------------------------------------------------------- */
.co-orbit--tech {
	--co-dot: var(--wp--preset--color--tag-blue, #8db6ff);
	--co-size: clamp(300px, min(50vw, 88vh), 780px);
}

.co-orbit--tech .co-orbit__btn {
	padding: 6%;
	font-size: clamp(8px, calc(var(--co-size) * var(--s) * 0.068), 15px);
	letter-spacing: 0.03em;
	overflow-wrap: break-word; /* spezza una parola solo se proprio non ci sta */
	hyphens: none;
}