@charset "UTF-8";
/*
 * GEOMETRIE
 * =========
 * Il sistema di segni che attraversa tutto il sito, non solo l'eroe.
 * Sono in CSS e non in markup: valgono su tutte le pagine senza aggiungere
 * un byte di HTML, e si spengono in un punto solo.
 *
 * Ogni forma ha una ragione documentata in docs/persuasione.md:
 *
 * · ARCHI CONCENTRICI — propagazione. Ricorrono dove si parla di
 *   diffusione: eroe, sezioni di richiamo, hub. Il cerchio che si allarga
 *   è la figura che il cervello associa a un segnale che si propaga, ed è
 *   il motivo per cui la usano le icone del wi-fi e del broadcast.
 *
 * · DIAGONALE ASCENDENTE — direzione. Va sempre da sinistra in basso a
 *   destra in alto, come la lettura. Una diagonale discendente comunica
 *   perdita: è la stessa forma dei grafici che nessuno vuole vedere.
 *
 * · ANGOLO TAGLIATO — chiusura (Gestalt). Una forma interrotta obbliga la
 *   percezione a completarla, e ciò che si completa attivamente si
 *   ricorda meglio di un rettangolo.
 *
 * · GRIGLIA DI PUNTI — struttura. Densità bassissima: dice «qui c'è un
 *   metodo» senza competere con il testo.
 *
 * Tutte a opacità molto bassa. Una geometria che si nota è decorazione;
 * una che si sente e basta è atmosfera.
 */

/* ============================================================
   1. Archi concentrici — propagazione
   ============================================================ */

.pb-sezione--scura,
.pb-eroe--interno,
.riv-testata {
	position: relative;
	isolation: isolate;
}

.pb-sezione--scura::after,
.pb-eroe--interno::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Tre archi: raggio crescente, opacità calante. La progressione è
	   quella di un'onda che si allontana. */
	background-image:
		radial-gradient(circle at 88% 50%, transparent 0 118px, rgba(11, 68, 206, 0.09) 118px 119.5px, transparent 119.5px),
		radial-gradient(circle at 88% 50%, transparent 0 190px, rgba(90, 45, 220, 0.07) 190px 191.5px, transparent 191.5px),
		radial-gradient(circle at 88% 50%, transparent 0 268px, rgba(138, 36, 255, 0.055) 268px 269.5px, transparent 269.5px);
	background-repeat: no-repeat;
}

/* ============================================================
   2. Diagonale ascendente — direzione
   ============================================================ */

.pb-sezione--tenue {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.pb-sezione--tenue::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Da sinistra in basso a destra in alto: la direzione della lettura,
	   e quella che si legge come crescita. */
	background-image: repeating-linear-gradient(
		68deg,
		transparent 0 118px,
		rgba(11, 68, 206, 0.045) 118px 119px,
		transparent 119px 238px
	);
}

/* ============================================================
   3. Angolo tagliato — chiusura
   ============================================================ */

/* Il segno più riconoscibile del sistema: compare sui blocchi che
   concludono qualcosa — richiami all'azione, fondini, riquadri di sintesi. */
.pb-cta,
.pb-riquadro,
.pb-modulo-guscio {
	position: relative;
}

.pb-cta::after,
.pb-modulo-guscio::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 46px;
	height: 46px;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		transparent 0 calc(50% - 1px),
		rgba(138, 36, 255, 0.5) calc(50% - 1px) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

/* ============================================================
   4. Griglia di punti — struttura
   ============================================================ */

.pb-settori,
.pb-fasi,
.pb-percorso {
	position: relative;
	isolation: isolate;
}

.pb-settori::before,
.pb-fasi::before,
.pb-percorso::before {
	content: '';
	position: absolute;
	inset: -1.5rem -1rem;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(11, 68, 206, 0.12) 1px, transparent 1px);
	background-size: 26px 26px;
	/* Sfuma verso il basso: la struttura si dichiara e poi si toglie di
	   mezzo, invece di accompagnare il testo fino in fondo. */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}

/* ============================================================
   5. Filo in gradiente sui titoli di sezione
   ============================================================ */

/* Ripetizione del segno della testata alla scala del paragrafo: lo stesso
   vettore a scale diverse lega parti della pagina che non si toccano
   (continuità, Gestalt). */
.pb-intestazione {
	position: relative;
	padding-top: var(--pb-s-5);
}

.pb-intestazione::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 64px;
	height: 3px;
	background: var(--pb-gradiente);
}

/* ============================================================
   6. Numeri: cornice angolare
   ============================================================ */

.pb-numeri__lista > li {
	position: relative;
	padding-top: var(--pb-s-5);
}

.pb-numeri__lista > li::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 2px;
	background: var(--pb-gradiente);
}

/* ============================================================
   Rispetto delle preferenze
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	/* Le geometrie sono statiche: non c'è nulla da fermare. Restano. */
}

/* In stampa spariscono: su carta sono solo toner. */
@media print {
	.pb-sezione--scura::after,
	.pb-eroe--interno::after,
	.pb-sezione--tenue::before,
	.pb-cta::after,
	.pb-modulo-guscio::after,
	.pb-settori::before,
	.pb-fasi::before,
	.pb-percorso::before { display: none; }
}