/*
 * @on-briciole
 * ON Scrub Fotogrammi: l'apertura del manifesto (prototipo scene.css 6-18 .scrub, 185-186 .osd-cap,
 * 474 interlinea). Le briciole hanno il loro foglio, on-briciole.css.
 *
 * Due stati:
 * - fermo (sempre, senza JS, con il movimento ridotto, nell'editor): i fotogrammi uno sotto
 *   l'altro, ognuno alto (quasi) uno schermo con la sua foto e il suo testo in fondo;
 * - scrub (solo sotto html.on-motion e .is-scrub, che mette il modulo JS): sezione alta
 *   --on-scrub-h, scena sticky, fotogrammi sovrapposti che il motore dissolve.
 * Mobile first: le regole senza media query sono quelle del telefono, da 901 px il computer.
 *
 * Scostamento voluto dal prototipo: l'occhiello sulle foto è chiaro, non verde ON (sulla
 * velatura nera il verde arriva a 4,4:1 e a 14 px non basta; come nastro e hero del raduno).
 */

.on-scrub {
	--on-scrub-pad-basso: clamp(40px, 9vh, 110px);
	--on-scrub-ombra-testo: 0 2px 4px color-mix(in srgb, var(--on-shade) 55%, transparent), 0 4px 28px color-mix(in srgb, var(--on-shade) 45%, transparent);
	--on-scrub-filtro: saturate(.82) contrast(1.06) sepia(.1);
	position: relative;
	background-color: var(--on-black);
	color: var(--on-white);
}

/* ---------- la scena, ferma: i fotogrammi in colonna ---------- */

.on-scrub__stage {
	position: relative;
	background-color: var(--on-night);
}

.on-scrub .on-scrub__fr {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 88svh;
	overflow: hidden;
	padding: calc(var(--on-bar-h) + 96px) var(--on-gutter) var(--on-scrub-pad-basso);
}

/* Il primo apre la pagina: alto uno schermo, con le briciole sopra */
.on-scrub .on-scrub__fr:first-child {
	min-height: 100svh;
}

/* Strato della foto: immagine, velatura e didascalia del videoregistratore */
.on-scrub__foto {
	position: absolute;
	inset: 0;
}

.on-scrub__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--on-shade) 45%, transparent) 0%, color-mix(in srgb, var(--on-shade) 5%, transparent) 35%, color-mix(in srgb, var(--on-shade) 10%, transparent) 55%, color-mix(in srgb, var(--on-shade) 82%, transparent) 100%);
}

.on-scrub .on-scrub__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--on-foto-x, 50%) var(--on-foto-y, 50%);
	filter: var(--on-scrub-filtro);
	transform: scale(1.04);
}

/* Senza foto: il nero della scena con la grana */
.on-scrub__fr--senza-foto .on-scrub__foto {
	background-image: var(--on-grain);
}

/* Didascalia OSD: telefono in alto a destra, computer in basso a destra (prototipo .osd-cap) */
.on-scrub .on-scrub__osd {
	position: absolute;
	top: calc(var(--on-bar-h) + 48px);
	right: 20px;
	z-index: 3;
	color: var(--on-white);
	font-family: var(--on-font-tv);
	font-size: 16px;
	letter-spacing: .02em;
	line-height: 1;
	text-shadow: 0 0 8px color-mix(in srgb, var(--on-shade) 90%, transparent);
	text-transform: uppercase;
}

/* Il primo fotogramma ha le briciole in alto: la didascalia scende sotto di loro */
.on-scrub .on-scrub__fr:first-child .on-scrub__osd {
	top: calc(var(--on-bar-h) + 64px);
}

/* ---------- il testo ---------- */

.on-scrub .on-scrub__say {
	position: relative;
	z-index: 2;
	container-type: inline-size;
	text-shadow: var(--on-scrub-ombra-testo);
}

.on-scrub .on-scrub__occhiello {
	margin: 0;
	color: var(--on-ink-inv);
}

/*
 * La frase: 10vw sul telefono come il prototipo, ma mai più grande di quanto serve perché la
 * parola più lunga stia intera nella riga. --on-scrub-lettere la scrive il PHP; .76 è la larghezza
 * media di una maiuscola del font display in em, con un po' di margine (stessa regola del nastro).
 */
.on-scrub .on-scrub__frase {
	max-width: 14ch;
	margin: 12px 0 0;
	color: var(--on-white);
	font-family: var(--on-font-display);
	font-size: 10vw;
	font-size: min(10vw, calc(100cqi / (var(--on-scrub-lettere, 8) * .76)));
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.04;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.on-scrub .on-scrub__sotto {
	max-width: 44ch;
	margin: 18px 0 0;
	color: var(--on-ink-inv);
	font-size: var(--on-fs-lede);
	line-height: var(--on-lh-lede);
}

/* ---------- briciole e invito ---------- */

.on-scrub .on-scrub__top {
	position: absolute;
	top: calc(var(--on-bar-h) + 18px);
	right: var(--on-gutter);
	left: var(--on-gutter);
	z-index: 5;
	color: var(--on-ink-inv);
	text-shadow: var(--on-scrub-ombra-testo);
}

/*
 * Focus da tastiera sulle briciole: anello bianco con alone nero, leggibile su qualunque foto.
 * Due classi per battere il reset di Hello e il box-shadow: none di Elementor (come il nastro).
 */
.on-scrub a:focus-visible {
	outline: 2px solid var(--on-focus, var(--on-white));
	outline-offset: 3px;
	box-shadow: 0 0 0 7px var(--on-black);
}

/* L'invito a scorrere ha senso solo nello scrub (sotto) */
.on-scrub .on-scrub__invito {
	display: none;
}

/* ---------- computer ---------- */

@media (min-width: 901px) {
	.on-scrub .on-scrub__osd,
	.on-scrub .on-scrub__fr:first-child .on-scrub__osd {
		top: auto;
		right: var(--on-gutter);
		bottom: var(--on-scrub-pad-basso);
		font-size: clamp(18px, 1.8vw, 26px);
	}

	.on-scrub .on-scrub__frase {
		letter-spacing: -.012em;
		font-size: clamp(2.75rem, 8vw, 9.375rem);
		font-size: min(clamp(2.75rem, 8vw, 9.375rem), calc(100cqi / (var(--on-scrub-lettere, 8) * .76)));
	}
}

/* =========================================================================
 * Scrub: solo con GSAP attivo (html.on-motion) e la scena armata dal modulo (.is-scrub)
 * ====================================================================== */

.on-motion .on-scrub.is-scrub {
	height: var(--on-scrub-h, 460vh);
}

.on-motion .on-scrub.is-scrub .on-scrub__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}

/* I fotogrammi si sovrappongono: il motore dissolve lo strato della foto, il modulo il testo */
.on-motion .on-scrub.is-scrub .on-scrub__fr {
	position: absolute;
	inset: 0;
	min-height: 0;
}

.on-motion .on-scrub.is-scrub .on-scrub__foto {
	opacity: 0;
	will-change: opacity;
}

.on-motion .on-scrub.is-scrub .on-scrub__bg {
	will-change: transform;
}

.on-motion .on-scrub.is-scrub .on-scrub__say {
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/* Il primo fotogramma è pieno da subito, anche prima che il modulo scriva gli stili */
.on-motion .on-scrub.is-scrub .on-scrub__fr:first-child .on-scrub__foto,
.on-motion .on-scrub.is-scrub .on-scrub__fr:first-child .on-scrub__say {
	opacity: 1;
}

/* Nello scrub le briciole stanno sopra ogni fotogramma: la didascalia del primo torna al suo posto */
@media (max-width: 900px) {
	.on-motion .on-scrub.is-scrub .on-scrub__osd {
		top: calc(var(--on-bar-h) + 64px);
	}
}

@media (min-width: 901px) {
	.on-motion .on-scrub.is-scrub .on-scrub__invito {
		position: absolute;
		bottom: 18px;
		left: 50%;
		z-index: 5;
		display: block;
		margin: 0;
		color: var(--on-ink-inv-2);
		font-family: var(--on-font-cond);
		font-size: 12px;
		letter-spacing: .14em;
		text-transform: uppercase;
		white-space: nowrap;
		transform: translateX(-50%);
	}
}