/*
 * ON Scaffale VHS: le cassette in piedi, dorso in fuori, sull'asse di legno.
 * Piccola = home.css .raduni .scaffale / .vhs; big = scene.css .shelf.big.
 * Mobile first: 600 px tablet, 901 px desktop. Sul telefono niente filtri (costano: home.css:609-610).
 * Nessuna regola nasconde le cassette: l'ingresso lo prepara il JS solo se può animarlo,
 * quindi senza JS o con il movimento ridotto lo scaffale è sempre pieno.
 */

.on-scaffale-vhs {
	/* Effetti del mondo ON presi dal prototipo: pennarello sull'etichetta e ombre */
	--on-vhs-penna: #1d2a63;
	--on-vhs-penna-2: #333;
	--on-vhs-ombra: drop-shadow(3px 0 3px color-mix(in srgb, var(--on-shade) 40%, transparent));
	--on-vhs-ombra-su: drop-shadow(0 10px 12px color-mix(in srgb, var(--on-shade) 50%, transparent));
	--on-vhs-ombra-asse: drop-shadow(0 14px 16px color-mix(in srgb, var(--on-shade) 35%, transparent));
	--on-vhs-lab-fs: 2.9vw;

	position: relative;
	margin: 8px 0 0;
	padding: 0;
}

.on-scaffale-vhs__fila {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 1.2%;
	margin: 0;
	padding: 0 4%;
	list-style: none;
}

.on-scaffale-vhs__posto {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* ---------- La cassetta (template-parts/components/vhs.php) ---------- */

.on-vhs {
	position: relative;
	display: block;
	aspect-ratio: 1 / 6.3043;
	color: var(--on-ink);
	text-decoration: none;
	transform: translateY(var(--on-vhs-oy, 0)) rotate(var(--on-vhs-tilt, 0deg));
	transform-origin: 50% 100%;
	transition: transform .45s var(--on-ease-out), filter var(--on-dur-2);
	will-change: transform;
}

.on-vhs__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: fill;
}

/* L'etichetta scritta a pennarello si legge dal basso in alto */
.on-vhs__lab {
	position: absolute;
	top: var(--on-vhs-lt, 81%);
	left: 50%;
	color: var(--on-vhs-penna);
	font-family: var(--on-font-marker);
	font-size: var(--on-vhs-lab-fs);
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;
	mix-blend-mode: multiply;
	transform: rotate(-90deg) translate(0, -50%);
	transform-origin: 0 0;
}

.on-vhs__lab small {
	margin-left: .45em;
	color: var(--on-vhs-penna-2);
	font-size: .78em;
}

/* La cassetta scelta si solleva dallo scaffale e si raddrizza */
.on-vhs:focus-visible {
	z-index: 3;
	transform: translateY(calc(var(--on-vhs-oy, 0%) - 7%)) rotate(0deg);
}

@media (hover: hover) and (pointer: fine) {
	a.on-vhs:hover {
		z-index: 3;
		transform: translateY(calc(var(--on-vhs-oy, 0%) - 7%)) rotate(0deg);
	}
}

.on-scaffale-vhs__asse {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	margin-top: -2.4%;
}

/* ---------- Big: poche cassette larghe, centrate ---------- */

.on-scaffale-vhs--big {
	--on-vhs-lab-fs: clamp(11px, 1.3vw, 17px);

	max-width: 760px;
	margin: 0;
	padding: 0 3%;
}

.on-scaffale-vhs--big .on-scaffale-vhs__fila {
	justify-content: center;
	gap: 2.5%;
	padding: 0 6%;
}

.on-scaffale-vhs--big .on-scaffale-vhs__posto {
	max-width: 38px;
}

@media (min-width: 901px) {
	.on-scaffale-vhs {
		--on-vhs-lab-fs: clamp(9px, 1.15vw, 16px);

		margin: 0;
		padding: 0 3%;
	}

	.on-scaffale-vhs--big {
		--on-vhs-lab-fs: clamp(11px, 1.3vw, 17px);
	}

	.on-scaffale-vhs--big .on-scaffale-vhs__posto {
		max-width: 54px;
	}

	/* Sul desktop ogni cassetta ha la sua tinta, la sua luce e l'ombra sul legno */
	.on-vhs {
		filter: hue-rotate(var(--on-vhs-hue, 0deg)) brightness(var(--on-vhs-br, 1)) var(--on-vhs-ombra);
	}

	.on-vhs:focus-visible {
		filter: hue-rotate(var(--on-vhs-hue, 0deg)) brightness(calc(var(--on-vhs-br, 1) * 1.08)) var(--on-vhs-ombra-su);
	}

	.on-scaffale-vhs__asse {
		filter: var(--on-vhs-ombra-asse);
	}
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
	a.on-vhs:hover {
		filter: hue-rotate(var(--on-vhs-hue, 0deg)) brightness(calc(var(--on-vhs-br, 1) * 1.08)) var(--on-vhs-ombra-su);
	}
}