/*
 * Coopyleft - cerchi decorativi di sezione
 *
 * USO
 *  1. Al Gruppo della sezione dai la classe CSS:  cl-section
 *  2. Dentro la sezione aggiungi un Gruppo vuoto con la classe CSS:
 *        cl-circle cl-w-NN cl-x-NN cl-y-NN      (es.  cl-circle cl-w-55 cl-x-50 cl-y-50)
 *
 * DIMENSIONE E POSIZIONE (numeri da 5 in 5; una "m" davanti = numero negativo)
 *   cl-w-NN   diametro del cerchio = NN% della larghezza della sezione
 *   cl-x-NN   centro del cerchio a NN% dal bordo sinistro della sezione  (cl-x-m10 = 10% fuori a sinistra)
 *   cl-y-NN   centro del cerchio a NN% dal bordo alto della sezione      (cl-y-m10 = 10% sopra il bordo)
 *   Usa sempre tutti e tre insieme.
 *
 * EXTRA (facoltativi)
 *   parallasse   cl-slow  cl-fast  (di base media)   cl-rev (direzione opposta)
 *   opacita'     cl-soft (6%)  cl-strong (20%)       (di base 12%)
 *   sezione      cl-bleed sul Gruppo della sezione: i cerchi possono uscire sopra e sotto
 *
 * Metodo precedente (ancora valido, meno preciso): dimensioni cl-sm/md/lg/xl e posizioni cl-tl/tr/bl/br/cl/cr/cc
 *
 * Il colore e' il primario del tema (--wp--preset--color--primary) con opacita' molto bassa.
 * Se nel theme.json lo slug e' diverso, cambia --cl-color qui sotto.
 */

/* La sezione tiene i cerchi dietro al contenuto e li ritaglia ai suoi bordi.
   Importante: overflow "clip", non "hidden". Con "hidden" la sezione diventa un contenitore
   di scroll e la parallasse legata allo scroll della pagina smette di funzionare. */
   .cl-section {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

/* Variante: i cerchi possono uscire sopra e sotto la sezione (ma non di lato, per evitare scroll orizzontale) */
.cl-section.cl-bleed {
	overflow-x: clip;
	overflow-y: visible;
}

.cl-circle {
	--cl-color: var(--wp--preset--color--primary, #467ef7);
	--cl-alpha: 12%;
	--cl-w: 40%;
	--cl-k: 0.2;
	--cl-dir: 1;

	position: absolute;
	z-index: -1;
	width: var(--cl-w);
	max-width: none;
	height: auto;
	min-height: 0;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cl-color) var(--cl-alpha), transparent);
	pointer-events: none;
	will-change: translate;
}

/* Dimensioni */
.cl-circle.cl-sm { --cl-w: 20%; }
.cl-circle.cl-md { --cl-w: 35%; }
.cl-circle.cl-lg { --cl-w: 50%; }
.cl-circle.cl-xl { --cl-w: 70%; }

/* Posizioni (i cerchi sporgono un po' fuori dal bordo, come nel prototipo) */
.cl-circle.cl-tl { top: -20%; left: -12%; }
.cl-circle.cl-tr { top: -20%; right: -12%; }
.cl-circle.cl-bl { bottom: -20%; left: -12%; }
.cl-circle.cl-br { bottom: -20%; right: -12%; }
.cl-circle.cl-cl { top: 50%; left: -12%; margin-top: calc(var(--cl-w) / -2); }
.cl-circle.cl-cr { top: 50%; right: -12%; margin-top: calc(var(--cl-w) / -2); }
.cl-circle.cl-cc {
	top: 50%;
	left: calc(50% - var(--cl-w) / 2);
	margin-top: calc(var(--cl-w) / -2);
}

/* Posizionamento preciso: il cerchio si centra sul punto (x, y) */
.cl-circle[class*="cl-x-"],
.cl-circle[class*="cl-y-"] {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.cl-circle.cl-w-10 { --cl-w: 10%; }
.cl-circle.cl-w-15 { --cl-w: 15%; }
.cl-circle.cl-w-20 { --cl-w: 20%; }
.cl-circle.cl-w-25 { --cl-w: 25%; }
.cl-circle.cl-w-30 { --cl-w: 30%; }
.cl-circle.cl-w-35 { --cl-w: 35%; }
.cl-circle.cl-w-40 { --cl-w: 40%; }
.cl-circle.cl-w-45 { --cl-w: 45%; }
.cl-circle.cl-w-50 { --cl-w: 50%; }
.cl-circle.cl-w-55 { --cl-w: 55%; }
.cl-circle.cl-w-60 { --cl-w: 60%; }
.cl-circle.cl-w-65 { --cl-w: 65%; }
.cl-circle.cl-w-70 { --cl-w: 70%; }
.cl-circle.cl-w-75 { --cl-w: 75%; }
.cl-circle.cl-w-80 { --cl-w: 80%; }
.cl-circle.cl-w-85 { --cl-w: 85%; }
.cl-circle.cl-w-90 { --cl-w: 90%; }
.cl-circle.cl-w-95 { --cl-w: 95%; }
.cl-circle.cl-w-100 { --cl-w: 100%; }
.cl-circle.cl-w-105 { --cl-w: 105%; }
.cl-circle.cl-w-110 { --cl-w: 110%; }
.cl-circle.cl-w-115 { --cl-w: 115%; }
.cl-circle.cl-w-120 { --cl-w: 120%; }

.cl-circle.cl-x-m30 { left: -30%; }
.cl-circle.cl-x-m25 { left: -25%; }
.cl-circle.cl-x-m20 { left: -20%; }
.cl-circle.cl-x-m15 { left: -15%; }
.cl-circle.cl-x-m10 { left: -10%; }
.cl-circle.cl-x-m5 { left: -5%; }
.cl-circle.cl-x-0 { left: 0%; }
.cl-circle.cl-x-5 { left: 5%; }
.cl-circle.cl-x-10 { left: 10%; }
.cl-circle.cl-x-15 { left: 15%; }
.cl-circle.cl-x-20 { left: 20%; }
.cl-circle.cl-x-25 { left: 25%; }
.cl-circle.cl-x-30 { left: 30%; }
.cl-circle.cl-x-35 { left: 35%; }
.cl-circle.cl-x-40 { left: 40%; }
.cl-circle.cl-x-45 { left: 45%; }
.cl-circle.cl-x-50 { left: 50%; }
.cl-circle.cl-x-55 { left: 55%; }
.cl-circle.cl-x-60 { left: 60%; }
.cl-circle.cl-x-65 { left: 65%; }
.cl-circle.cl-x-70 { left: 70%; }
.cl-circle.cl-x-75 { left: 75%; }
.cl-circle.cl-x-80 { left: 80%; }
.cl-circle.cl-x-85 { left: 85%; }
.cl-circle.cl-x-90 { left: 90%; }
.cl-circle.cl-x-95 { left: 95%; }
.cl-circle.cl-x-100 { left: 100%; }
.cl-circle.cl-x-105 { left: 105%; }
.cl-circle.cl-x-110 { left: 110%; }
.cl-circle.cl-x-115 { left: 115%; }
.cl-circle.cl-x-120 { left: 120%; }
.cl-circle.cl-x-125 { left: 125%; }
.cl-circle.cl-x-130 { left: 130%; }

.cl-circle.cl-y-m30 { top: -30%; }
.cl-circle.cl-y-m25 { top: -25%; }
.cl-circle.cl-y-m20 { top: -20%; }
.cl-circle.cl-y-m15 { top: -15%; }
.cl-circle.cl-y-m10 { top: -10%; }
.cl-circle.cl-y-m5 { top: -5%; }
.cl-circle.cl-y-0 { top: 0%; }
.cl-circle.cl-y-5 { top: 5%; }
.cl-circle.cl-y-10 { top: 10%; }
.cl-circle.cl-y-15 { top: 15%; }
.cl-circle.cl-y-20 { top: 20%; }
.cl-circle.cl-y-25 { top: 25%; }
.cl-circle.cl-y-30 { top: 30%; }
.cl-circle.cl-y-35 { top: 35%; }
.cl-circle.cl-y-40 { top: 40%; }
.cl-circle.cl-y-45 { top: 45%; }
.cl-circle.cl-y-50 { top: 50%; }
.cl-circle.cl-y-55 { top: 55%; }
.cl-circle.cl-y-60 { top: 60%; }
.cl-circle.cl-y-65 { top: 65%; }
.cl-circle.cl-y-70 { top: 70%; }
.cl-circle.cl-y-75 { top: 75%; }
.cl-circle.cl-y-80 { top: 80%; }
.cl-circle.cl-y-85 { top: 85%; }
.cl-circle.cl-y-90 { top: 90%; }
.cl-circle.cl-y-95 { top: 95%; }
.cl-circle.cl-y-100 { top: 100%; }
.cl-circle.cl-y-105 { top: 105%; }
.cl-circle.cl-y-110 { top: 110%; }
.cl-circle.cl-y-115 { top: 115%; }
.cl-circle.cl-y-120 { top: 120%; }
.cl-circle.cl-y-125 { top: 125%; }
.cl-circle.cl-y-130 { top: 130%; }

/* Parallasse */
.cl-circle.cl-slow { --cl-k: 0.1; }
.cl-circle.cl-walk { --cl-k: 0.2; }
.cl-circle.cl-fast { --cl-k: 0.35; }
.cl-circle.cl-rev { --cl-dir: -1; }

/* Opacità */
.cl-circle.cl-soft { --cl-alpha: 6%; }
.cl-circle.cl-strong { --cl-alpha: 20%; }

/* Parallasse con animazioni legate allo scroll: solo CSS, niente JavaScript.
   Nei browser che non le supportano ancora i cerchi restano semplicemente fermi. */
@supports (animation-timeline: view()) {
	.cl-circle {
		animation: cl-drift linear both;
		animation-timeline: view();
	}

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

/* Nel Site Editor i cerchi restano fermi e si possono selezionare con un click */
.editor-styles-wrapper .cl-circle {
	animation: none;
	pointer-events: auto;
}

/* Chi preferisce meno movimento: cerchi fermi */
@media (prefers-reduced-motion: reduce) {
	.cl-circle {
		animation: none;
		translate: none;
	}
}