/*!
 * pico-core.css — stili dei moduli condivisi Pico Mosaici (gallerie Kit + Il Maestro)
 *
 * Sezioni (Fase 2 del cantiere):
 *   1. Reveal (ex AOS)                       ✔ 2b
 *   2. Filtro + griglia gallerie (ex Isotope)  ✔ 2c
 *   3. Lightbox (ex Fancybox / GLightbox)      ✔ 2d
 *   4. Menu overlay (+ pulsante flottante)      ✔ 2e
 *   5. Preloader (parti comuni)                ✔ 2f
 *   6. Sfondo cerchi (Kit: home + gallerie)     ✔ 5b
 *
 * Viene caricato PRIMA del CSS della pagina, così i colori specifici
 * di Kit e Maestro possono sovrascrivere quelli di base.
 */

/* =====================================================================
   1. REVEAL — animazione all'ingresso nello schermo (ex AOS)
   Le regole valgono solo se pico-core.js ha attivato il modulo
   (classe "pico-reveal" su <html>): senza JavaScript, o sulle pagine
   che usano ancora AOS, non cambia nulla e tutto resta visibile.
   ===================================================================== */

/* Transizione attiva solo durante la comparsa: lo stato nascosto iniziale
   si applica di colpo (altrimenti gli elementi in basso "svanirebbero"
   lentamente al caricamento) e a fine animazione restano solo le
   transizioni del CSS della pagina. */
html.pico-reveal [data-aos].is-visible:not(.is-revealed) {
	transition-property: opacity, transform;
	transition-duration: var(--pico-reveal-duration, 1200ms);
	transition-timing-function: ease;
}

/* Stato iniziale: fade, fade-in, fade-up partono trasparenti */
html.pico-reveal [data-aos^="fade"]:not(.is-visible) {
	opacity: 0;
}

/* fade-up parte 100 px più in basso (stesso valore di AOS e di pico-core.js) */
html.pico-reveal [data-aos="fade-up"]:not(.is-visible) {
	transform: translate3d(0, 100px, 0);
}

/* Stato finale: visibile. Nessuna trasformazione: fino al passo 2e la
   lasciavamo apposta (translate3d nulla, come AOS) perché l'hamburger
   position: fixed restava agganciato all'intestazione solo grazie a lei.
   Ora l'hamburger è position: absolute (sezione 4) e non ne dipende più. */
html.pico-reveal [data-aos^="fade"].is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	html.pico-reveal [data-aos] {
		transition: none !important;
	}
}

/* =====================================================================
   2. FILTRO + GRIGLIA A MURATURA (ex Isotope)
   Le classi pico-grid / pico-item le mette pico-core.js: senza
   JavaScript la griglia resta quella a righe di Bootstrap.
   ===================================================================== */

/* La griglia diventa il riferimento per le foto posizionate dal JS.
   L'altezza la scrive il JS (somma della colonna più alta). */
.pico-grid {
	position: relative;
	transition: opacity var(--pico-filter-fade, 250ms) ease;
}

/* Dissolvenza al cambio categoria */
.pico-grid.is-switching {
	opacity: 0;
}

/* Ogni foto è posizionata dal JS (left/top) nella sua colonna;
   la larghezza resta quella delle classi row-cols-* */
.pico-grid > .pico-item {
	position: absolute;
	top: 0;
	left: 0;
}

/* Categorie non attive: fuori dalla pagina, nessun download */
.pico-grid > .pico-item.is-out {
	display: none;
}

/* Foto non ancora scaricata: riquadro neutro delle stesse proporzioni,
   poi la foto compare in dissolvenza (transizione già nel CSS pagina) */
.pico-item:not(.is-loaded) > a {
	background-color: rgba(127, 127, 127, 0.12);
}

.pico-item:not(.is-loaded) img {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pico-grid {
		transition: none;
	}
}

/* =====================================================================
   3. LIGHTBOX — visualizzatore foto e video (ex Fancybox / GLightbox)
   La finestra la crea pico-core.js al primo click su un'opera.
   Colori: le variabili qui sotto valgono per i Kit (oro gallerie);
   il CSS del Maestro le sovrascrive sul selettore .pico-lb.
   ===================================================================== */
.pico-lb {
	--pico-lb-bg: rgba(10, 10, 10, 0.96);      /* quasi nero: fa risaltare le opere */
	--pico-lb-fg: #f3efe8;                     /* testo chiaro, caldo */
	--pico-lb-accent: #b78c00;                 /* oro delle gallerie Kit */
	--pico-lb-accent-fg: #111111;              /* icone sopra il colore d'accento */
	--pico-lb-btn: rgba(255, 255, 255, 0.08);
	--pico-lb-line: rgba(255, 255, 255, 0.18);
	--pico-lb-fade: 220ms;                     /* uguale a FADE in pico-core.js */

	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--pico-lb-bg);
	color: var(--pico-lb-fg);
	font-family: "Poppins", system-ui, sans-serif;
	overflow: hidden;
	overscroll-behavior: contain;
	touch-action: none;             /* swipe e zoom li gestiamo noi; la pagina sotto non scorre */
	-webkit-tap-highlight-color: transparent;
	opacity: 0;
	transition: opacity var(--pico-lb-fade) ease;
	z-index: 100000;                /* serve solo ai browser senza <dialog> */
}

.pico-lb:not([open]) {
	display: none;
}

.pico-lb.is-visible {
	opacity: 1;
}

.pico-lb::backdrop {
	background: transparent;        /* lo sfondo è la finestra stessa */
}

/* Area dell'opera: tutta la finestra (un tocco sullo sfondo chiude) */
.pico-lb__stage {
	position: absolute;
	inset: 0;
}

.pico-lb__figure {
	position: absolute;
	inset: 64px 76px 84px;          /* spazio per contatore, frecce, didascalia */
	display: flex;
	align-items: center;
	justify-content: center;
}

.pico-lb__media {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity 260ms ease, transform 260ms ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;    /* niente "salva immagine" col dito premuto su iPhone */
	-webkit-user-drag: none;
}

.pico-lb__media.is-ready {
	opacity: 1;
}

.pico-lb__media.is-instant {
	transition: none;
}

.pico-lb__media.is-leaving {
	opacity: 0;
	transition: opacity 180ms ease;
	pointer-events: none;
}

img.pico-lb__media {
	cursor: zoom-in;
}

.pico-lb.is-zoomed img.pico-lb__media {
	cursor: grab;
}

.pico-lb.is-zoomed.is-dragging img.pico-lb__media {
	cursor: grabbing;
}

video.pico-lb__media {
	background: #000;
	touch-action: manipulation;
}

/* Con lo zoom spariscono i comandi: si guarda solo l'opera */
.pico-lb.is-zoomed .pico-lb__btn:not(.pico-lb__close),
.pico-lb.is-zoomed .pico-lb__caption,
.pico-lb.is-zoomed .pico-lb__counter {
	opacity: 0;
	pointer-events: none;
}

/* Contatore "3 / 28" in alto a sinistra */
.pico-lb__counter {
	position: absolute;
	top: calc(18px + env(safe-area-inset-top, 0px));
	left: calc(20px + env(safe-area-inset-left, 0px));
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: rgba(243, 239, 232, 0.75);
	transition: opacity 200ms ease;
	pointer-events: none;
}

.pico-lb__counter span {
	color: var(--pico-lb-accent);
	font-weight: 700;
}

/* Didascalia in basso, al centro */
.pico-lb__caption {
	position: absolute;
	left: 50%;
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	width: max-content;
	max-width: min(80ch, calc(100% - 32px));
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--pico-lb-fg);
	transition: opacity 200ms ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pico-lb__caption[hidden] {
	display: none;
}

/* Pulsanti tondi: frecce e chiudi */
.pico-lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--pico-lb-line);
	border-radius: 50%;
	background: var(--pico-lb-btn);
	color: var(--pico-lb-fg);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.pico-lb__btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pico-lb__btn:hover {
	background: var(--pico-lb-accent);
	border-color: var(--pico-lb-accent);
	color: var(--pico-lb-accent-fg);
}

.pico-lb__btn:focus {
	outline: none;
}

.pico-lb__btn:focus-visible {
	outline: 2px solid var(--pico-lb-accent);
	outline-offset: 3px;
}

.pico-lb__close {
	top: calc(10px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
}

.pico-lb__prev,
.pico-lb__next {
	top: 50%;
	margin-top: -24px;
}

.pico-lb__prev {
	left: calc(14px + env(safe-area-inset-left, 0px));
}

.pico-lb__next {
	right: calc(14px + env(safe-area-inset-right, 0px));
}

/* Una sola opera: niente frecce né contatore */
.pico-lb.is-single .pico-lb__prev,
.pico-lb.is-single .pico-lb__next,
.pico-lb.is-single .pico-lb__counter {
	display: none;
}

/* Rotellina di attesa (compare solo se la foto tarda più di 0,2 s) */
.pico-lb__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border: 3px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--pico-lb-accent);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.pico-lb.is-loading .pico-lb__spinner {
	opacity: 1;
	animation: pico-lb-spin 0.9s linear infinite;
}

@keyframes pico-lb-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Opera non trovata */
.pico-lb.is-error .pico-lb__figure::after {
	content: "Opera non disponibile";
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: rgba(243, 239, 232, 0.7);
}

/* Telefono: opera quasi a tutto schermo, comandi più piccoli */
@media (max-width: 767.98px) {
	.pico-lb__figure {
		inset: calc(60px + env(safe-area-inset-top, 0px)) 6px calc(76px + env(safe-area-inset-bottom, 0px));
	}

	.pico-lb__btn {
		width: 42px;
		height: 42px;
	}

	.pico-lb__prev,
	.pico-lb__next {
		top: auto;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		margin-top: 0;
	}

	.pico-lb__caption {
		bottom: calc(24px + env(safe-area-inset-bottom, 0px));
		max-width: calc(100% - 120px);  /* tra le due frecce */
		font-size: 0.85rem;
	}
}

/* Foto della galleria: protezione "soft" (niente trascinamento,
   niente "salva immagine" col dito premuto su iPhone) */
.pico-grid .pico-item img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
	.pico-lb,
	.pico-lb__media,
	.pico-lb__btn,
	.pico-lb__counter,
	.pico-lb__caption {
		transition: none !important;
	}

	.pico-lb.is-loading .pico-lb__spinner {
		animation-duration: 2.4s;
	}
}

/* =====================================================================
   4. MENU OVERLAY (gallerie Kit + Maestro) — Pico.menu in pico-core.js
   Prima queste regole erano copiate identiche in styles_gallery.css e
   styles_il_maestro.css; ora stanno solo qui. I colori sono variabili:
   i valori sotto sono quelli dei Kit, il Maestro li sovrascrive su body
   in styles_il_maestro.css.
   Lo stato aperto resta la classe "nav-active" su <body>.
   ===================================================================== */
:root {
	--pico-menu-bg1: #b78c00;              /* prima "tenda" (oro Kit) */
	--pico-menu-bg2: #f0ece5;              /* seconda tenda, sopra (crema) */
	--pico-menu-font: "Abril Fatface", serif;
	--pico-menu-link: rgb(67, 67, 67);     /* voci */
	--pico-menu-link-active: #b78c00;      /* voce attiva / passaggio del mouse */
	--pico-menu-btn-bg: #fd7131;           /* quadratino dell'hamburger */
	--pico-menu-btn-radius: 5px;
	--pico-menu-btn-line: #212529;         /* linee dell'hamburger */
	--pico-float-bg: #b78c00;              /* pulsante flottante */
	--pico-float-fg: #000000;
	--pico-float-hover: #f0ece5;
	--pico-menu-delay: 0.7s;               /* prima voce: dopo l'arrivo delle tende */
	--pico-menu-step: 0.06s;               /* tra una voce e la successiva */
}

/* --- Hamburger (in cima alla pagina) -------------------------------- */
#menu-toggle {
	opacity: 0; /* il checkbox è invisibile: si vede il .menu-btn */
}

/* Hamburger dentro l'intestazione: scorre via con la pagina.
   (Prima era "position: fixed" e restava agganciato all'intestazione
   solo grazie a una trasformazione lasciata da AOS / dal reveal.) */
.menu-btn {
	display: flex;
	align-items: center;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 26px;
	height: 26px;
	cursor: pointer;
	z-index: 1;
	margin: 12px;
	background-color: var(--pico-menu-btn-bg);
	border-radius: var(--pico-menu-btn-radius);
}

.menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after {
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: var(--pico-menu-btn-line);
	transition-duration: 0.25s;
}

.menu-btn > span::before {
	content: "";
	top: -8px;
}

.menu-btn > span::after {
	content: "";
	top: 8px;
}

/* aperto: le tre linee diventano una X */
#menu-toggle:checked ~ .menu-btn > span {
	transform: rotate(45deg);
}

#menu-toggle:checked ~ .menu-btn > span::before {
	top: 0;
	transform: rotate(0);
}

#menu-toggle:checked ~ .menu-btn > span::after {
	top: 0;
	transform: rotate(90deg);
}

/* raggiunto col Tab: si vede dove si è */
#menu-toggle:focus-visible ~ .menu-btn {
	outline: 2px solid var(--pico-menu-btn-line);
	outline-offset: 3px;
}

/* --- Pulsante flottante (compare quando l'hamburger esce dallo schermo) --- */
#float-menu-btn {
	position: fixed;
	bottom: 20px;
	right: calc(20px + var(--pico-scrollbar, 0px)); /* fermo anche a pagina bloccata */
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

#float-menu-btn.is-visible {
	opacity: 1;
	visibility: visible;
}

#float-menu-btn label {
	background-color: var(--pico-float-bg);
	color: var(--pico-float-fg);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease;
	font-size: 0;             /* il ☰ scritto nell'HTML lo sostituisce l'icona qui sotto */
}

#float-menu-btn label::before {
	content: "☰";
	font-size: 20px;
	line-height: 1;
}

body.nav-active #float-menu-btn label::before {
	content: "✕";             /* a menu aperto il flottante chiude */
}

#float-menu-btn label:hover {
	background-color: var(--pico-float-hover);
}

#float-menu-btn label:focus {
	outline: none;
}

#float-menu-btn label:focus-visible {
	outline: 2px solid var(--pico-float-bg);
	outline-offset: 3px;
}

#float-menu-btn input {
	display: none;
}

/* --- Overlay: due "tende" che scendono dall'angolo in alto a destra --- */
.nav-overlay {
	position: fixed;
	top: 0;
	z-index: 9;
}

.nav-overlay::before,
.nav-overlay::after {
	content: "";
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: var(--pico-menu-bg1);
	border-bottom-left-radius: 200%;
	z-index: -1;
	transition:
		transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s,
		border-radius linear 0.8s;
	transform: translateX(100%) translateY(-100%);
}

.nav-overlay::after {
	background: var(--pico-menu-bg2);
	transition-delay: 0s;
}

.nav-overlay::before {
	transition-delay: 0.2s;
}

body.nav-active .nav-overlay::before,
body.nav-active .nav-overlay::after {
	transform: translateX(0%) translateY(0%);
	border-radius: 0;
}

body.nav-active .nav-overlay::after {
	transition-delay: 0.1s;
}

body.nav-active .nav-overlay::before {
	transition-delay: 0s;
}

/* --- Contenuto del menu ---------------------------------------------- */
.nav__content {
	position: fixed;
	visibility: hidden;
	top: 0;
	bottom: 0;
	transform: translate(0%, 0%);
	width: 100%;
	text-align: center;
	overflow-y: auto;       /* elenco lungo su schermi bassi: scorre il menu, non la pagina */
	overscroll-behavior: contain;
	padding: 2rem 0;
}

body.nav-active .nav__content {
	visibility: visible;
}

.nav__list {
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 2;
}

.nav__list-item {
	position: relative;
	display: block;
	opacity: 0;
	transform: translateY(12px);
	text-align: center;
	color: #fff;
	font-family: var(--pico-menu-font);
	font-size: 4.5vh;
	line-height: 1.15;
	margin: 0;
	transition: color 0.3s ease;
}

.nav__list-item a {
	position: relative;
	text-decoration: none;
	color: var(--pico-menu-link);
	padding: 4px;
	z-index: 2;
	display: inline-block;
	transition: all 200ms linear;
}

.nav__list-item a:hover,
.nav__list-item.active-nav a {
	color: var(--pico-menu-link-active);
}

/* Voci in cascata: il ritardo dipende dall'indice --i scritto da pico-core.js
   (prima: una regola nth-child per voce, fino a 19, e il Maestro ne aveva 16
   su 17 voci → "Kit Di Mosaico" compariva per prima). */
body.nav-active .nav__list-item {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease,
		color 0.3s ease;
	transition-delay: calc(var(--pico-menu-delay) + var(--i, 0) * var(--pico-menu-step));
}

/* Animazioni ridotte: niente tende né cascata, il menu compare e basta */
@media (prefers-reduced-motion: reduce) {
	.nav-overlay::before,
	.nav-overlay::after,
	.menu-btn > span,
	.menu-btn > span::before,
	.menu-btn > span::after,
	#float-menu-btn,
	body.nav-active .nav__list-item {
		transition: none !important;
	}

	.nav__list-item {
		transform: none;
	}
}

/* =====================================================================
   5. PRELOADER — parti comuni (Pico.preloader in pico-core.js)
   Il disegno di ogni preloader sta nel CSS della sua pagina
   (Kit: styles_gallery.css "Mosaic Edition"; Maestro: styles_il_maestro.css
   "Bottega Edition"), compresa la durata della dissolvenza: il motore la
   legge da lì per togliere il preloader a dissolvenza finita.
   ===================================================================== */

/* Pagina ferma finché il preloader è attivo (classe messa da Pico.preloader) */
html.preloader-active {
	overflow: hidden;
}

/* Dissolvenza finale */
#preloader.fade-out {
	opacity: 0;
	pointer-events: none;
}

/* =====================================================================
   6. SFONDO CERCHI (Kit: home + gallerie) — Pico.cerchi in pico-core.js
   Gli anelli che la home aveva in "Chi siamo" e "Info kit" (stesse
   posizioni e animazioni cube / cube-scale-20, qui pico-cerchio /
   pico-cerchio-20), un po' piu' grandi e marcati (5c: 12 px e bordo 1,5 px,
   prima 10 px e 1 px), + 3 anelli di altri colori sfasati nel tempo,
   in un livello fisso dietro a tutto il contenuto. Si vedono dove la
   pagina non ha un fondo pieno sopra.
   ===================================================================== */
.pico-cerchi {
	--pico-cerchi-giallo: #ffc300;
	--pico-cerchi-verde: #41b681;
	--pico-cerchi-arancio: #fd7131;
	--pico-cerchi-azzurro: #2fa4d9;
	--pico-cerchi-oro: #b78c00;
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.pico-cerchi ul {
	position: absolute;
	left: 0;
	width: 100vw;
	padding: 0;
	margin: 0;
	list-style: none;
	z-index: 1;
}
.pico-cerchi__alto,
.pico-cerchi__centro {
	top: 0;
}
.pico-cerchi__basso {
	bottom: 0;
}
.pico-cerchi li {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 100%;
	background-clip: padding-box;
	border: solid 1.5px var(--pico-cerchi-giallo);
	color: transparent;
	transform-origin: top left;
	transform: scale(0) rotate(0deg) translate(-50%, -50%);
	animation: pico-cerchio 12s ease-in forwards infinite;
}
.pico-cerchi li:nth-child(1),
.pico-cerchi li:nth-child(4) {
	animation-name: pico-cerchio-20;
}
.pico-cerchi li:nth-child(2n) {
	border-color: var(--pico-cerchi-verde);
}
/* posizioni (come prima: in alto e in basso, ai lati e verso il centro) */
.pico-cerchi__alto li:nth-child(1) { left: 0; top: 0; }
.pico-cerchi__alto li:nth-child(2) { left: 54vw; top: 14vh; }
.pico-cerchi__alto li:nth-child(3) { left: 56vw; top: 12vh; }
.pico-cerchi__alto li:nth-child(4) { left: 100vw; top: 0; }
.pico-cerchi__basso li:nth-child(1) { left: 0; bottom: 0; }
.pico-cerchi__basso li:nth-child(2) { left: 0; bottom: 10vh; }
.pico-cerchi__basso li:nth-child(3) { left: 100vw; bottom: 10vh; }
.pico-cerchi__basso li:nth-child(4) { left: 100vw; bottom: 0; }
/* i 3 anelli nuovi: altri colori, partenze sfasate */
.pico-cerchi__centro li:nth-child(1) {
	left: 18vw; top: 46vh;
	border-color: var(--pico-cerchi-arancio);
	animation-name: pico-cerchio-20;
	animation-delay: -4s;
}
.pico-cerchi__centro li:nth-child(2) {
	left: 82vw; top: 34vh;
	border-color: var(--pico-cerchi-azzurro);
	animation-name: pico-cerchio;
	animation-delay: -7s;
}
.pico-cerchi__centro li:nth-child(3) {
	left: 46vw; top: 76vh;
	border-color: var(--pico-cerchi-oro);
	animation-name: pico-cerchio;
	animation-delay: -10s;
}

@keyframes pico-cerchio {
	from {
		transform: scale(0) rotate(0deg) translate(-50%, -50%);
		opacity: 1;
	}
	to {
		transform: scale(5) rotate(960deg) translate(-50%, -50%);
		opacity: 0;
	}
}
@keyframes pico-cerchio-20 {
	from {
		transform: scale(0) rotate(0deg) translate(-50%, -50%);
		opacity: 1;
	}
	to {
		transform: scale(20) rotate(960deg) translate(-50%, -50%);
		opacity: 0;
	}
}

/* --- variante dentro un pannello (menu del telefono della home):
       stessi anelli, posizioni in % del pannello --- */
.pico-cerchi.pico-cerchi--pannello {
	position: absolute;
	z-index: 0;
}
.pico-cerchi--pannello ul {
	top: 0;
	bottom: 0;
	width: 100%;
}
.pico-cerchi--pannello .pico-cerchi__alto li:nth-child(2) { left: 54%; top: 14%; }
.pico-cerchi--pannello .pico-cerchi__alto li:nth-child(3) { left: 56%; top: 12%; }
.pico-cerchi--pannello .pico-cerchi__alto li:nth-child(4) { left: 100%; }
.pico-cerchi--pannello .pico-cerchi__basso li:nth-child(2) { bottom: 10%; }
.pico-cerchi--pannello .pico-cerchi__basso li:nth-child(3) { left: 100%; bottom: 10%; }
.pico-cerchi--pannello .pico-cerchi__basso li:nth-child(4) { left: 100%; }
.pico-cerchi--pannello .pico-cerchi__centro li:nth-child(1) { left: 18%; top: 46%; }
.pico-cerchi--pannello .pico-cerchi__centro li:nth-child(2) { left: 82%; top: 34%; }
.pico-cerchi--pannello .pico-cerchi__centro li:nth-child(3) { left: 46%; top: 76%; }

/* scheda nascosta: animazione ferma */
html.pico-cerchi-fermi .pico-cerchi li {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.pico-cerchi {
		display: none;
	}
}