/*
 * ON Album Figurine 3D: la sezione #eroi della home (prototipo home.css 260-337, 340-352, 617-631,
 * 669-678, 690-695, 780-803, 806-810, 857-863, 990).
 *
 * Mobile first, tre stati:
 * - telefono (e tablet fino a 900 px): le pagine sono schede che scorrono di lato;
 * - desktop senza JS: le quattro facce affiancate in griglia, la copertina già aperta;
 * - desktop con JS (.is-libro, messo dal modulo): il libro 3D, il foglio che si gira con le frecce;
 *   con il movimento (.is-mosso) la copertina parte chiusa e si apre con lo scroll (GSAP).
 * Le figurine hanno il loro foglio di stile (on-figurina.css).
 */

.on-album3d {
	/* La carta delle pagine e lo spessore dei fogli, ricavati dai colori del tema */
	--on-album-carta: color-mix(in srgb, var(--on-card-back) 70%, var(--on-paper));
	--on-album-bordo: color-mix(in srgb, var(--on-card-back) 88%, var(--on-ink));
	--on-album-ombra: 0 24px 48px -24px color-mix(in srgb, var(--on-shade) 45%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--on-shade) 20%, transparent);
	--on-album-piega: color-mix(in srgb, var(--on-shade) 40%, transparent);
	position: relative;
	z-index: var(--on-z-raised);
	padding: var(--on-space-section) var(--on-gutter);
	overflow: hidden;
}

/* Il campo: le linee laterali (e, dal desktop, il cerchio di centrocampo) e le strisce dell'erba */
.on-album3d::before,
.on-album3d::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.on-album3d::before {
	background: linear-gradient(90deg, var(--on-white) 0 2px, transparent 2px calc(100% - 2px), var(--on-white) calc(100% - 2px));
	background-repeat: no-repeat;
	opacity: .5;
}

.on-album3d::after {
	background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--on-shade) 5%, transparent) 0 7.14%, transparent 7.14% 14.28%);
}

.on-album3d__in,
.on-album3d__scena {
	position: relative;
	z-index: 1;
}

/* ---------- Testata ---------- */

.on-album3d__in {
	max-width: var(--on-container);
	margin: 0 auto;
}

.on-album3d__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-bottom: var(--on-space-head);
}

/*
 * Occhiello, testo introduttivo, link e indicatore di pagina in bianco direttamente sul verde,
 * come nel prototipo (.eroi h2 > .k, .eroi .lede, .eroi .more, .album3d .ctrl: home.css 269-270,
 * 322, 809): niente riquadri.
 */
.on-album3d__occhiello {
	display: block;
	margin: 0 0 12px;
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-micro);
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	line-height: 1.5;
	text-transform: uppercase;
}

.on-album3d__titolo {
	margin: 0;
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-h2);
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--on-lh-title);
	text-transform: uppercase;
	text-wrap: balance;
}

.on-album3d__intro {
	justify-self: start;
	max-width: 100%;
}

.on-album3d__testo {
	max-width: 44ch;
	margin: 0;
	color: var(--on-white);
	font-size: var(--on-fs-lede);
	line-height: 1.5;
}

.on-album3d__piu {
	margin: 16px 0 0;
}

.on-album3d__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 3px;
	border-bottom: 1.5px solid currentColor;
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-button);
	text-decoration: none;
	text-transform: uppercase;
}

/* ---------- La scena e le facce (stato di base: schede che scorrono di lato) ---------- */

.on-album3d__scena {
	max-width: 1180px;
	margin: 20px auto 0;
}

/* position: relative anche qui: le schede misurano offsetLeft rispetto alla striscia (JS) */
.on-album3d__libro {
	display: flex;
	position: relative;
	align-items: flex-start;
	gap: 12px;
	margin: 0 -4px;
	padding: 4px 4px 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.on-album3d__libro::-webkit-scrollbar {
	display: none;
}

.on-album3d__libro:focus-visible {
	outline-color: var(--on-white);
}

.on-album3d__foglio {
	display: contents;
}

.on-album3d__pagina,
.on-album3d__copertina {
	flex: 0 0 92%;
	scroll-snap-align: center;
}

/* La carta: pagine e interno della copertina */
.on-album3d__faccia {
	--on-focus: var(--on-green-ink);
	position: relative;
	border-radius: 6px;
	background: var(--on-album-carta);
	box-shadow: var(--on-album-ombra);
	color: var(--on-ink);
}

.on-album3d__pagina {
	padding: 12px;
	overflow: hidden;
}

.on-album3d__copertina-dentro {
	padding: 16px;
	overflow: hidden;
}

.on-album3d__faccia::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--on-grain);
	mix-blend-mode: multiply;
	opacity: .7;
	pointer-events: none;
}

.on-album3d__copertina-fronte,
.on-album3d__dorso {
	display: none;
}

/* Intestazione di pagina */
.on-album3d__testa {
	display: flex;
	position: relative;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 3%;
	border-bottom: 2px solid var(--on-ink);
	color: var(--on-ink-2);
	font-family: var(--on-font-cond);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	text-transform: uppercase;
}

.on-album3d__testa span:first-child {
	color: var(--on-green-ink);
}

/* Dentro la copertina l'intestazione è scritta a pennarello */
.on-album3d__testa--lista span {
	color: var(--on-marker-blue);
	font-family: var(--on-font-marker);
	font-size: clamp(14px, 1.6vw, 22px);
	font-weight: 400;
}

/* ---------- Caselle ---------- */

.on-album3d__griglia {
	display: grid;
	position: relative;
	grid-template-columns: 1fr 1fr;
	gap: 5% 6%;
	margin: 6% 0 0;
	padding: 0;
	list-style: none;
}

.on-album3d__casella {
	position: relative;
	padding: 4% 4% 9%;
	container-type: inline-size;
}

.on-album3d__casella::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1.5px dashed color-mix(in srgb, var(--on-ink) 32%, transparent);
	border-radius: 6px;
}

.on-album3d__pn {
	position: absolute;
	bottom: 2.5%;
	left: 6%;
	color: var(--on-ink-2);
	font-family: var(--on-font-cond);
	font-size: clamp(9px, .9vw, 13px);
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
}

.on-album3d__casella .on-figurina {
	--on-fig-filtro: drop-shadow(0 6px 6px color-mix(in srgb, var(--on-shade) 28%, transparent)) drop-shadow(0 1px 1px color-mix(in srgb, var(--on-shade) 30%, transparent));
}

/* La figurina che manca: lo scudo sbiadito, il cognome, "manca" a pennarello rosso */
.on-album3d__manca {
	display: grid;
	position: relative;
	place-items: center;
	align-content: center;
	gap: 4px;
	aspect-ratio: .745;
}

.on-album3d__manca img {
	width: 34%;
	height: auto;
	margin-bottom: 8px;
	opacity: .16;
	filter: grayscale(1);
}

.on-album3d__manca b {
	color: var(--on-ink-2);
	font-family: var(--on-font-cond);
	font-size: clamp(13px, 1.3vw, 18px);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.on-album3d__manca span {
	color: var(--on-marker-red);
	font-family: var(--on-font-marker);
	font-size: clamp(16px, 1.8vw, 26px);
	transform: rotate(-8deg);
}

/* L'ultima casella: l'invito all'album intero (verde inchiostro: il testo piccolo bianco passa l'AA) */
.on-album3d__casella--invito::before {
	display: none;
}

.on-album3d__invito {
	display: grid;
	position: relative;
	align-content: center;
	gap: 8px;
	aspect-ratio: .745;
	padding: 12%;
	border-radius: 4px;
	background: var(--on-green-ink);
	box-shadow: var(--on-album-ombra);
	color: var(--on-white);
	text-decoration: none;
}

.on-album3d__invito:focus-visible {
	outline-color: var(--on-green-ink);
}

.on-album3d__invito b {
	font-family: var(--on-font-cond);
	font-size: clamp(18px, 2vw, 30px);
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
}

.on-album3d__invito span {
	font-size: clamp(11px, 1vw, 14px);
	line-height: 1.4;
}

/* ---------- La lista dentro la copertina: celo, celo, manca ---------- */

/* Due classi: ".elementor-kit-6 h3" (corpo e famiglia degli h3 del kit) vincerebbe su una sola */
.on-album3d .on-album3d__lista-titolo {
	position: relative;
	margin: 12px 0 0;
	color: var(--on-ink);
	font-family: var(--on-font-cond);
	font-size: 22px;
	font-weight: 700;
	line-height: var(--on-lh-title);
	text-transform: uppercase;
}

.on-album3d__lista {
	display: grid;
	position: relative;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.on-album3d__voce {
	display: grid;
	grid-template-columns: 2.7em 1fr auto;
	align-items: baseline;
	gap: 6px;
	padding: .45em 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--on-ink) 30%, transparent);
	font-family: var(--on-font-cond);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.on-album3d__voce-n {
	color: var(--on-ink-2);
	font-family: var(--on-font-marker);
	font-size: clamp(14px, 1.6vw, 22px);
	font-weight: 400;
}

.on-album3d__voce i {
	display: inline;
	color: var(--on-marker-red);
	font-family: var(--on-font-marker);
	font-size: 1.1em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.on-album3d__voce.is-celo i {
	color: var(--on-green-ink);
}

.on-album3d__nota {
	position: relative;
	margin: 12px 0 0;
	color: var(--on-ink-2);
	font-family: var(--on-font-text);
	font-size: 11px;
	line-height: 1.5;
}

/* ---------- Frecce e indicatore di pagina ---------- */

.on-album3d__ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 10px;
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-micro);
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	text-transform: uppercase;
}

.on-album3d__ctrl[hidden] {
	display: none;
}

.on-album3d__stato {
	color: var(--on-white);
}

/*
 * Classe + elemento + stato per battere lo stile bottoni del kit (".elementor-kit-6 button",
 * fondo verde scuro; ":hover/:focus", fondo nero): le frecce sono vuote, bianche in hover.
 */
.on-album3d button.on-album3d__freccia,
.on-album3d button.on-album3d__freccia:focus {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--on-white);
	border-radius: 3px;
	background: transparent;
	color: var(--on-white);
	cursor: pointer;
	transition: background-color var(--on-dur-1), color var(--on-dur-1), opacity var(--on-dur-1);
}

.on-album3d__freccia svg {
	width: 20px;
	height: 20px;
}

.on-album3d button.on-album3d__freccia:hover {
	background: var(--on-white);
	color: var(--on-green-ink);
}

.on-album3d__freccia[disabled] {
	opacity: .35;
	pointer-events: none;
}

/* ---------- Schermi molto stretti ---------- */

@media (max-width: 360px) {
	.on-album3d .on-album3d__lista-titolo {
		margin-top: 8px;
		font-size: 20px;
	}

	.on-album3d__voce {
		padding: .35em 0;
		font-size: 10px;
	}

	.on-album3d__nota {
		margin-top: 8px;
		font-size: 10px;
	}

	.on-album3d__manca,
	.on-album3d__invito {
		aspect-ratio: .9;
	}

	.on-album3d__manca img {
		width: 26%;
		margin-bottom: 4px;
	}

	.on-album3d__manca span {
		font-size: 15px;
	}

	.on-album3d__invito {
		gap: 4px;
		padding: 8%;
	}

	.on-album3d__invito b {
		font-size: 16px;
	}

	.on-album3d__invito span {
		font-size: 10px;
	}
}

/* ---------- Tablet ---------- */

@media (min-width: 600px) {
	.on-album3d__testo {
		font-size: 1.0625rem;
	}
}

/* ---------- Desktop ---------- */

@media (min-width: 901px) {
	.on-album3d::before {
		background:
			radial-gradient(circle at 50% 100%, transparent 0 calc(18vw - 2px), var(--on-white) calc(18vw - 2px) 18vw, transparent 18vw),
			linear-gradient(90deg, var(--on-white) 0 2px, transparent 2px calc(100% - 2px), var(--on-white) calc(100% - 2px));
		background-repeat: no-repeat;
	}

	.on-album3d__head {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
		align-items: end;
		gap: 48px;
	}

	.on-album3d__occhiello {
		font-size: var(--on-fs-label);
	}

	.on-album3d__testo {
		font-size: var(--on-fs-lede);
		line-height: var(--on-lh-lede);
	}

	.on-album3d__piu {
		margin-top: 18px;
	}

	.on-album3d__link {
		font-size: var(--on-fs-nav);
	}

	.on-album3d__scena {
		margin-top: clamp(16px, 3vw, 40px);
	}

	.on-album3d__testa {
		font-size: clamp(9px, .95vw, 14px);
	}

	.on-album3d__griglia {
		gap: 6% 7%;
	}

	.on-album3d__pagina,
	.on-album3d__copertina-dentro {
		padding: 4% 5% 5%;
	}

	.on-album3d .on-album3d__lista-titolo {
		margin-top: 5%;
		font-size: clamp(22px, 2.6vw, 40px);
	}

	.on-album3d__lista {
		display: block;
		margin-top: 4%;
	}

	.on-album3d__voce {
		grid-template-columns: 2.6em 1fr auto;
		gap: 10px;
		font-size: clamp(10px, 1.1vw, 15px);
	}

	/* Sul desktop "celo" e "manca" stanno su una riga da riempire a mano, come sull'album vero */
	.on-album3d__voce i {
		display: block;
		height: 30px;
		border-bottom: 1.5px solid color-mix(in srgb, var(--on-ink) 50%, transparent);
		font-size: 1.15em;
		transform: rotate(-4deg);
	}

	.on-album3d__nota {
		margin-top: 5%;
		font-size: clamp(10px, 1vw, 13px);
	}

	.on-album3d__ctrl {
		margin-top: 30px;
		font-size: var(--on-fs-small);
	}

	.on-album3d button.on-album3d__freccia,
	.on-album3d button.on-album3d__freccia:focus {
		width: 46px;
		height: 46px;
	}

	.on-album3d .on-album3d__casella .on-figurina {
		transition: filter .4s;
	}

	/* Senza JS: le quattro facce in griglia, nell'ordine di lettura */
	.on-album3d:not(.is-libro) .on-album3d__libro {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	/* ---------- Il libro 3D ---------- */

	.on-album3d.is-libro .on-album3d__scena {
		perspective: 5200px;
		perspective-origin: 50% 40%;
	}

	.on-album3d.is-libro .on-album3d__libro {
		display: block;
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
		overflow: visible;
		transform: rotateX(6deg);
		transform-style: preserve-3d;
		aspect-ratio: 1.42;
		scroll-snap-type: none;
	}

	/* L'ombra sul tavolo e lo spessore delle pagine sotto */
	.on-album3d.is-libro .on-album3d__libro::before {
		content: "";
		position: absolute;
		inset: 4% -3% -6%;
		background: color-mix(in srgb, var(--on-shade) 50%, transparent);
		filter: blur(34px);
		transform: translateZ(-30px);
	}

	.on-album3d.is-libro .on-album3d__libro::after {
		content: "";
		position: absolute;
		right: -1.2%;
		bottom: -1.6%;
		left: 50%;
		height: 1.6%;
		border-radius: 0 0 4px;
		background: repeating-linear-gradient(0deg, var(--on-album-bordo) 0 1px, var(--on-album-carta) 1px 3px);
		transform: translateZ(-1px);
	}

	.on-album3d.is-libro .on-album3d__pagina,
	.on-album3d.is-libro .on-album3d__foglio,
	.on-album3d.is-libro .on-album3d__copertina {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 50%;
		flex: none;
	}

	.on-album3d.is-libro .on-album3d__faccia {
		box-shadow: inset 28px 0 34px -26px var(--on-album-piega);
		border-radius: 0 6px 6px 0;
	}

	/* La pagina 3 resta sotto il foglio, sulla destra: il suo bordo fa da spessore */
	.on-album3d.is-libro .on-album3d__pagina--destra::after {
		content: "";
		position: absolute;
		top: 1%;
		right: -1.2%;
		bottom: -1.2%;
		width: 1.2%;
		border-radius: 0 4px 4px 0;
		background: repeating-linear-gradient(90deg, var(--on-album-bordo) 0 1px, var(--on-album-carta) 1px 3px);
	}

	/* Il foglio: fronte pagina 1, retro pagina 2; si gira sul dorso */
	.on-album3d.is-libro .on-album3d__foglio {
		display: block;
		transform: translateZ(2px);
		transform-origin: left center;
		transform-style: preserve-3d;
		transition: transform 1.25s var(--on-ease-flip);
	}

	.on-album3d.is-libro .on-album3d__foglio.is-flipped {
		transform: translateZ(9px) rotateY(-180deg);
	}

	.on-album3d.is-libro .on-album3d__foglio .on-album3d__pagina {
		inset: 0;
		width: auto;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.on-album3d.is-libro .on-album3d__pagina--retro,
	.on-album3d.is-libro .on-album3d__copertina-dentro {
		box-shadow: inset -28px 0 34px -26px var(--on-album-piega);
		border-radius: 6px 0 0 6px;
		transform: rotateY(180deg);
	}

	.on-album3d.is-libro .on-album3d__copertina-dentro {
		box-shadow: inset -28px 0 34px -26px var(--on-album-piega), inset 0 0 0 10px color-mix(in srgb, var(--on-white) 35%, transparent);
	}

	/* La luce che passa sul foglio mentre gira */
	.on-album3d.is-libro .on-album3d__foglio .on-album3d__pagina::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.on-album3d.is-libro .on-album3d__foglio.is-flipped .on-album3d__pagina--fronte::after {
		animation: on-album3d-luce-fronte 1.25s var(--on-ease-flip);
	}

	.on-album3d.is-libro .on-album3d__foglio.is-flipped .on-album3d__pagina--retro::after {
		animation: on-album3d-luce-retro 1.25s var(--on-ease-flip);
	}

	/* La copertina: senza movimento è già aperta (stato finale dello scroll) */
	.on-album3d.is-libro .on-album3d__copertina {
		transform: translateZ(4px) rotateY(-180deg);
		transform-origin: left center;
		transform-style: preserve-3d;
	}

	/* Con il movimento parte chiusa: la apre lo scroll (GSAP legge da qui lo stato iniziale) */
	.on-album3d.is-libro.is-mosso .on-album3d__copertina {
		transform: translateZ(4px);
	}

	.on-album3d.is-libro .on-album3d__copertina-fronte,
	.on-album3d.is-libro .on-album3d__copertina-dentro {
		position: absolute;
		inset: 0;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.on-album3d.is-libro .on-album3d__copertina-fronte {
		display: grid;
		place-items: center;
		align-content: center;
		gap: 18px;
		padding: 10%;
		border-radius: 0 6px 6px 0;
		background: radial-gradient(ellipse at 40% 30%, var(--on-green), var(--on-green-ink) 70%, color-mix(in srgb, var(--on-green-ink) 82%, var(--on-shade)));
		box-shadow:
			0 40px 70px -30px color-mix(in srgb, var(--on-shade) 70%, transparent),
			inset 0 0 0 10px color-mix(in srgb, var(--on-white) 8%, transparent),
			inset 0 0 0 11px color-mix(in srgb, var(--on-shade) 25%, transparent),
			inset 0 0 60px color-mix(in srgb, var(--on-shade) 25%, transparent);
		color: var(--on-white);
		text-align: center;
	}

	/* La tela della copertina: la luce di taglio e la trama diagonale */
	.on-album3d.is-libro .on-album3d__copertina-fronte::before,
	.on-album3d.is-libro .on-album3d__copertina-fronte::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.on-album3d.is-libro .on-album3d__copertina-fronte::before {
		background: linear-gradient(100deg, color-mix(in srgb, var(--on-white) 12%, transparent), transparent 40%, color-mix(in srgb, var(--on-shade) 18%, transparent) 100%);
	}

	.on-album3d.is-libro .on-album3d__copertina-fronte::after {
		background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--on-white) 3.5%, transparent) 0 2px, transparent 2px 5px);
	}

	.on-album3d__scudo {
		width: 30%;
		height: auto;
		filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--on-shade) 40%, transparent));
	}

	.on-album3d__copertina-titolo {
		margin: 0;
		font-family: var(--on-font-cond);
		font-size: clamp(26px, 3.6vw, 56px);
		font-weight: 700;
		line-height: 1.12;
		text-transform: uppercase;
	}

	.on-album3d__copertina-sotto {
		margin: 0;
		color: var(--on-white);
		font-family: var(--on-font-cond);
		font-size: clamp(10px, 1vw, 14px);
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	.on-album3d.is-libro .on-album3d__dorso {
		display: block;
		position: absolute;
		top: -.5%;
		bottom: -.5%;
		left: 50%;
		width: 16px;
		margin-left: -8px;
		background: linear-gradient(90deg, var(--on-album-piega), color-mix(in srgb, var(--on-shade) 5%, transparent) 50%, var(--on-album-piega));
		transform: translateZ(1px);
	}
}

@keyframes on-album3d-luce-fronte {
	0%,
	100% {
		background: transparent;
	}

	50% {
		background: linear-gradient(90deg, color-mix(in srgb, var(--on-shade) 35%, transparent), color-mix(in srgb, var(--on-shade) 5%, transparent));
	}
}

@keyframes on-album3d-luce-retro {
	0%,
	100% {
		background: transparent;
	}

	50% {
		background: linear-gradient(270deg, color-mix(in srgb, var(--on-shade) 35%, transparent), color-mix(in srgb, var(--on-shade) 5%, transparent));
	}
}