/*
 * ON Rullino: il provino a contatto delle fotografie. @on-lente
 * Misure dal prototipo: scene.css 355-372 (provino), 482 e 626 (titolo, occhiello),
 * 636-643 (fondo, luci e grana), 844-848 (perforazioni). La lente ha il suo foglio, on-lente.css.
 * Mobile first: le regole senza media query sono quelle del telefono, da 901 px il desktop.
 * Due classi di specificità dove serve battere la Theme Style del kit (.elementor-kit-N h2, a, button).
 */

.on-rullino {
	/* Variabili locali */
	--on-ru-pad: 64px;
	--on-ru-gutter: 20px;
	--on-ru-colonne: 2;
	--on-ru-gap-riga: 12px;
	--on-ru-gap-colonna: 6px;
	--on-ru-fn-fs: .8125rem;
	--on-ru-barra: 92px;
	--on-ru-fondo: color-mix(in srgb, var(--on-night) 55%, var(--on-black));
	/* Le perforazioni della pellicola: rettangoli color pellicola, appena accennati */
	--on-ru-fori: repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb, var(--on-film) 16%, transparent) 14px 26px, transparent 26px 34px);
	position: relative;
	padding: var(--on-ru-pad) var(--on-ru-gutter);
	background-color: var(--on-ru-fondo);
	/* Due coni di luce dall'alto e un velo verde appena sopra, come i riflettori dello stadio */
	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);
}

/* Perforazioni in alto, sopra il fondo */
.on-rullino::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: 22px;
	pointer-events: none;
	background: var(--on-ru-fori) 0 6px / 100% 10px no-repeat;
}

/* Grana della pellicola, sopra il fondo e sotto i contenuti */
.on-rullino::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--on-grain);
	opacity: .28;
}

.on-rullino__in {
	position: relative;
	z-index: 2;
	max-width: var(--on-container);
	margin: 0 auto;
}

/* Perforazioni in basso: escono dal contenitore fino ai bordi della sezione */
.on-rullino__in::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--on-ru-gutter));
	bottom: calc(-1 * var(--on-ru-pad) + 6px);
	left: calc(-1 * var(--on-ru-gutter));
	height: 10px;
	pointer-events: none;
	background: var(--on-ru-fori);
}

/* ---------- testata ---------- */

/*
 * Lo spazio sopra il titolo è quello del prototipo: lì la testata del provino eredita la regola
 * generica .ph-head di sito.css 28 (--bar-h più 40-96 px), a ogni larghezza. --bar-h del
 * prototipo (sito.css 6-7) vale 102 px e 92 px fino a 900 px: la barra vera del sito è più bassa
 * sul telefono (86 px), quindi qui c'è il numero del prototipo (--on-ru-barra), non --on-bar-h.
 * A 1440 px: 102 + 86 = 188 px; a 390: 92 + 40 = 132 px.
 */
.on-rullino .on-rullino__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
	padding-top: calc(var(--on-ru-barra) + clamp(40px, 6vw, 96px));
}

.on-rullino__titoli {
	margin: 0;
}

/*
 * Nel prototipo l'occhiello è verde (scene.css 626): sul nero sotto i coni di luce #008D33 scende
 * intorno a 4,3:1 e a 14 px non basta. Regola del piano (§3.2): su nero, etichette in carta.
 */
.on-rullino .on-rullino__occhiello {
	display: block;
	margin: 0;
	color: var(--on-paper);
	line-height: 1.5;
}

.on-rullino .on-rullino__titolo {
	margin: 0;
	color: inherit;
	font-family: var(--on-font-cond);
	font-size: clamp(2.125rem, 4vw, 4rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.08;
	text-transform: uppercase;
	text-wrap: balance;
}

.on-rullino .on-rullino__occhiello + .on-rullino__titolo {
	margin-top: 10px;
}

.on-rullino .on-rullino__nota {
	margin: 0;
	color: var(--on-muted);
	line-height: 1.5;
}

/* ---------- il foglio ---------- */

.on-rullino .on-rullino__foglio {
	display: grid;
	grid-template-columns: repeat(var(--on-ru-colonne), minmax(0, 1fr));
	gap: var(--on-ru-gap-riga) var(--on-ru-gap-colonna);
	margin: 0;
	padding: 0;
	list-style: none;
}

.on-rullino__cella {
	margin: 0;
	padding: 0;
}

.on-rullino .on-rullino__foto {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
	transition: opacity .35s ease, transform var(--on-dur-3) var(--on-ease-out);
}

.on-rullino .on-rullino__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: var(--on-foto-x, 50%) var(--on-foto-y, 25%);
	filter: var(--on-photo-filter);
}

.on-rullino__fn {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	color: var(--on-film);
	font-family: var(--on-font-tv);
	font-size: var(--on-ru-fn-fs);
	letter-spacing: .06em;
	line-height: 1.6;
}

.on-rullino__fn i {
	font-style: normal;
}

/* Il focus sulla foto: anello bianco sul nero, staccato dall'immagine */
.on-rullino .on-rullino__foto:focus-visible {
	outline: 2px solid var(--on-white);
	outline-offset: 4px;
}

/* Al passaggio la foto si alza e le altre si spengono (solo con un puntatore vero) */
@media (hover: hover) {
	.on-rullino__foglio:hover .on-rullino__foto:not(:hover) {
		opacity: .32;
	}

	.on-rullino a.on-rullino__foto:hover {
		transform: translateY(-4px);
	}
}

/*
 * Lo sviluppo dei fotogrammi (scene.js 220-223, scene.css 368-371): la classe is-sviluppo la mette
 * il JS solo se può animare (niente editor, movimento non ridotto, IntersectionObserver), quindi
 * senza JS il foglio è completo. È il "on-motion" di questo widget, che non ha bisogno di GSAP.
 * Il JS segna un fotogramma come sviluppato solo quando la sua immagine è arrivata: finché non
 * c'è resta nel buio del fondo, e la sovraesposizione iniziale (quella del prototipo) dura solo
 * l'inizio dell'animazione invece di sembrare una foto che non si carica.
 */
@media (prefers-reduced-motion: no-preference) {
	/* Solo le non sviluppate: dopo, l'opacità torna libera per lo spegnimento al passaggio */
	.on-rullino.is-sviluppo .on-rullino__foto:not(.is-sviluppata) {
		opacity: 0;
	}

	/*
	 * Chi arriva col Tab prima dello sviluppo non deve trovare il focus su una foto invisibile
	 * (2.4.7): la foto con il focus si vede subito (il JS intanto sviluppa tutto il foglio).
	 */
	.on-rullino.is-sviluppo .on-rullino__foto:focus {
		opacity: 1;
	}

	.on-rullino.is-sviluppo .on-rullino__foto.is-sviluppata .on-rullino__img {
		animation: on-rullino-sviluppo 1.4s var(--on-ease-soft) both;
		animation-delay: calc(var(--on-ru-i, 0) * .07s);
	}
}

@keyframes on-rullino-sviluppo {
	0% {
		filter: brightness(2.6) sepia(1) blur(4px);
	}

	100% {
		filter: var(--on-photo-filter);
	}
}

@media (min-width: 901px) {
	.on-rullino {
		--on-ru-pad: clamp(72px, 8vw, 128px);
		--on-ru-gutter: var(--on-gutter);
		--on-ru-colonne: 4;
		--on-ru-gap-riga: 18px;
		--on-ru-fn-fs: .9375rem;
		--on-ru-barra: 102px;
	}

	.on-rullino .on-rullino__testa {
		margin-bottom: clamp(24px, 3vw, 44px);
	}
}

/*
 * Dopo la bustina della scheda eroe (scene.css 729-731, .pack + .provino): il rullino sale di
 * 24vh (16vh fino a 900 px) sull'ultima parte della scena con un nero che sfuma, senza i coni di
 * luce; la grana parte dove il nero è pieno.
 */
.on-rullino.on-rullino--dopo-scena {
	--on-ru-sale: 16vh;
	z-index: 3;
	margin-top: calc(-1 * var(--on-ru-sale));
	padding-top: calc(var(--on-ru-sale) + 16px);
	background-color: transparent;
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--on-ru-fondo) 0%, transparent) 0, color-mix(in srgb, var(--on-ru-fondo) 85%, transparent) 14vh, var(--on-ru-fondo) 24vh);
}

.on-rullino.on-rullino--dopo-scena::after {
	top: var(--on-ru-sale);
}

@media (min-width: 901px) {
	.on-rullino.on-rullino--dopo-scena {
		--on-ru-sale: 24vh;
		padding-top: calc(var(--on-ru-sale) + 24px);
	}
}