/*
 * Sezione social in fondo alle pagine: la sciarpa del club (verde, nero, verde, il taglio bianco)
 * che scorre come alzata in curva, e sotto i canali.
 * Mobile first; da 901px titolo a sinistra e canali su due colonne.
 */

.on-social {
	--on-focus: var(--on-green);
	position: relative;
	overflow: hidden;
	padding: 56px 0;
	background-color: var(--on-night);
	/* Lo stadio di sera: due riflettori che scendono dall'alto e un filo di verde */
	background-image:
		radial-gradient(ellipse 38% 55% at 12% -12%, color-mix(in srgb, var(--on-cream) 9%, transparent), transparent 70%),
		radial-gradient(ellipse 38% 55% at 88% -12%, color-mix(in srgb, var(--on-cream) 9%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--on-green) 6%, transparent) 0%, transparent 40%);
	color: var(--on-white);
}

.on-social::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--on-grain);
	opacity: .28;
	pointer-events: none;
}

@media (min-width: 901px) {
	.on-social {
		padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(4rem, 7vw, 6.5rem);
	}
}

/* Il filtro SVG "ondula" del prototipo: non occupa spazio (home.css:942) */
.on-social__fx {
	position: absolute;
}

/* ---------------------------------------------------------------------
 * La sciarpa: l'immagine ripetuta che scorre, le pieghe che scorrono con lei,
 * l'ombra sui bordi come su un tessuto che si arrotola
 * ------------------------------------------------------------------ */

.on-social__sciarpa {
	/* Proporzione di sciarpa-lunga.webp (817 × 360): un modulo della trama è largo 2,2694 altezze */
	--on-sciarpa-h: 56px;
	--on-sciarpa-w: calc(var(--on-sciarpa-h) * 2.2694);
	position: relative;
	z-index: 1;
	height: var(--on-sciarpa-h);
	margin: 0 -2vw;
	background: url("../img/scena/sciarpa-lunga.webp") repeat-x 0 0 / auto 100%;
	filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--on-shade) 75%, transparent)) drop-shadow(0 3px 4px color-mix(in srgb, var(--on-shade) 50%, transparent));
	transform: rotate(-1.4deg);
}

.on-social__sciarpa::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--on-shade) 42%, transparent) 0%,
		transparent 22%,
		color-mix(in srgb, var(--on-white) 7%, transparent) 46%,
		transparent 70%,
		color-mix(in srgb, var(--on-shade) 50%, transparent) 100%
	);
	pointer-events: none;
}

.on-social__pieghe,
.on-social__pieghe::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.on-social__pieghe {
	display: block;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--on-shade) 28%, transparent) 9%,
		transparent 15%,
		transparent 27%,
		color-mix(in srgb, var(--on-shade) 22%, transparent) 38%,
		transparent 47%,
		transparent 63%,
		color-mix(in srgb, var(--on-shade) 30%, transparent) 74%,
		color-mix(in srgb, var(--on-shade) 5%, transparent) 82%,
		transparent 91%
	) repeat-x 0 0 / calc(var(--on-sciarpa-w) * 1.37) 100%;
	mix-blend-mode: multiply;
	opacity: .55;
}

.on-social__pieghe::after {
	content: "";
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--on-white) 10%, transparent) 12%,
		transparent 20%,
		transparent 50%,
		color-mix(in srgb, var(--on-white) 8%, transparent) 58%,
		transparent 66%
	) repeat-x 0 0 / calc(var(--on-sciarpa-w) * 1.37) 100%;
	mix-blend-mode: screen;
	opacity: .6;
}

/* Scorre solo con il JS, che porta anche il bottone per fermarla */
.js .on-social__sciarpa,
.js .on-social__pieghe,
.js .on-social__pieghe::after {
	animation: on-sciarpa 16s linear infinite;
}

.on-social__sciarpa.is-paused,
.on-social__sciarpa.is-paused .on-social__pieghe,
.on-social__sciarpa.is-paused .on-social__pieghe::after {
	animation-play-state: paused;
}

@keyframes on-sciarpa {
	to {
		background-position-x: calc(var(--on-sciarpa-w) * -2);
	}
}

@media (min-width: 901px) {
	.on-social__sciarpa {
		--on-sciarpa-h: clamp(64px, 6.4vw, 100px);
	}
}

.on-social__pausa {
	position: absolute;
	top: 12px;
	right: var(--on-gutter);
	z-index: 3;
	width: 32px;
	height: 32px;
	border: 1px solid var(--on-line-inv);
	border-radius: var(--on-radius-pill);
	color: var(--on-white);
}

/* Lo stile bottoni del kit vale per ogni <button>: qui si torna al bottone trasparente (vedi header.css) */
.on-social button.on-social__pausa,
.on-social button.on-social__pausa:hover,
.on-social button.on-social__pausa:focus {
	border-radius: var(--on-radius-pill);
	background-color: transparent;
	color: var(--on-white);
	font: inherit;
	letter-spacing: normal;
}

/* ---------------------------------------------------------------------
 * Titolo e canali
 * ------------------------------------------------------------------ */

.on-social__in {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 32px;
	max-width: calc(var(--on-container) + 2 * var(--on-gutter));
	margin: 44px auto 0;
	padding: 0 var(--on-gutter);
}

/* h2 nel selettore: la Theme Style del kit (.elementor-kit-N h2) darebbe la misura dei titoli di sezione */
.on-social h2.on-social__titolo {
	margin: 0;
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-h2-s);
	font-weight: 700;
	line-height: 1.08;
	text-transform: uppercase;
	text-wrap: balance;
}

.on-social__canali {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.on-social__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 16px;
	color: inherit;
	text-decoration: none;
}

.on-social__link > span {
	grid-column: 2;
}

/* "Altro" non ha icona: il testo prende tutta la riga */
.on-social__link:not(:has(.on-social__ico)) {
	grid-template-columns: minmax(0, 1fr);
}

.on-social__link:not(:has(.on-social__ico)) > span {
	grid-column: 1;
}

.on-social__link:focus-visible {
	outline: 2px solid var(--on-green);
	outline-offset: 6px;
}

.on-social__ico {
	grid-row: 1 / span 4;
	align-self: start;
	width: 32px;
	height: 32px;
	margin-top: 2px;
	color: var(--on-white);
	fill: currentColor;
	transition: color .25s, transform .4s var(--on-ease-soft);
}

.on-social__nome {
	font-family: var(--on-font-cond);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.04;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 3px;
	text-transform: uppercase;
	text-underline-offset: 6px;
	transition: color .25s, text-decoration-color .25s;
}

.on-social__link:hover .on-social__ico,
.on-social__link:focus-visible .on-social__ico {
	color: var(--on-green);
	transform: translateY(-2px);
}

.on-social__link:hover .on-social__nome,
.on-social__link:focus-visible .on-social__nome {
	text-decoration-color: var(--on-green);
}

.on-social__handle,
.on-social__descr {
	color: var(--on-paper);
	font-size: .9375rem;
	line-height: 1.5;
}

.on-social__meta {
	color: var(--on-muted);
	font-size: .8125rem;
	line-height: 1.5;
}

@media (min-width: 901px) {
	.on-social__in {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
		gap: 32px clamp(2rem, 5vw, 6rem);
		margin-top: clamp(3.5rem, 6vw, 6rem);
	}

	.on-social__canali {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
	}

	.on-social__ico {
		width: 40px;
		height: 40px;
	}

	.on-social__nome {
		font-size: clamp(1.875rem, 2.8vw, 2.875rem);
	}

	.on-social__handle,
	.on-social__descr {
		font-size: 1.0625rem;
	}

	.on-social__meta {
		font-size: .9375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .on-social__sciarpa,
	.js .on-social__pieghe,
	.js .on-social__pieghe::after {
		animation: none;
	}

	.on-social__ico {
		transition: none;
	}
}