/*
 * @on-briciole
 * ON Nastro VHS: l'apertura del raduno passato (prototipo scene.css 6-18, 42-61, 384-386,
 * 474-477, 488). Le briciole hanno il loro foglio, on-briciole.css.
 *
 * Due stati:
 * - fermo (sempre, senza JS, con il movimento ridotto, nell'editor, senza foto): hero alto uno
 *   schermo, primo fotogramma come sfondo, titolo, pulsanti e citazione tutti visibili, in flusso
 *   (regge zoom e spaziatura del testo);
 * - scrub (solo sotto html.on-motion e .is-scrub, che mette il modulo JS): sezione alta
 *   --on-nastro-h, scena sticky, testi in posizione assoluta come nel prototipo.
 * Mobile first: le regole senza media query sono quelle del telefono, da 901 px il computer.
 */

.on-nastro {
	--on-nastro-pad-basso: clamp(40px, 9vh, 110px);
	--on-nastro-osd-top: calc(var(--on-bar-h) + 40px);
	--on-nastro-ombra: 0 0 8px color-mix(in srgb, var(--on-shade) 90%, transparent), 0 0 2px var(--on-shade);
	--on-nastro-ombra-testo: 0 2px 4px color-mix(in srgb, var(--on-shade) 60%, transparent), 0 4px 28px color-mix(in srgb, var(--on-shade) 55%, transparent);
	--on-nastro-filtro: saturate(.78) contrast(1.1) sepia(.14) brightness(.92);
	position: relative;
	background-color: var(--on-black);
	color: var(--on-white);
}

/* ---------- la scena (ferma: hero alto uno schermo con i testi in fondo) ---------- */

.on-nastro__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100svh;
	overflow: hidden;
	padding: calc(var(--on-bar-h) + 104px) var(--on-gutter) var(--on-nastro-pad-basso);
	background-color: var(--on-night);
}

/* ---------- i fotogrammi ---------- */

.on-nastro__nastro {
	position: absolute;
	inset: 0;
}

.on-nastro__fr {
	position: absolute;
	inset: 0;
	display: none;
}

/* Fermo: si vede solo il primo fotogramma; gli altri restano display:none e non si scaricano */
.on-nastro__fr:first-child {
	display: block;
}

.on-nastro .on-nastro__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, 25%);
	filter: var(--on-nastro-filtro);
	transform: scale(1.04);
}

/* Velatura del fotogramma: scura in alto (barra, OSD) e soprattutto in basso (titolo) */
.on-nastro__fr::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--on-shade) 50%, transparent) 0%, transparent 30%, transparent 60%, color-mix(in srgb, var(--on-shade) 85%, transparent) 100%);
}

/* Righe del tubo catodico e vignetta */
.on-nastro__crt {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--on-shade) 26%, transparent) 0 2px, transparent 2px 5px);
}

.on-nastro__crt::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, transparent 58%, color-mix(in srgb, var(--on-shade) 60%, transparent) 100%);
}

/* Rumore, banda di testina, velo della citazione e STOP: esistono solo nello scrub */
.on-nastro__rumore,
.on-nastro__banda,
.on-nastro__velo,
.on-nastro__stop,
.on-nastro__invito {
	display: none;
}

/*
 * Briciole: lo stile di base del partial è in on-briciole.css (handle on-w-briciole, che questo
 * foglio richiama con "@on-briciole" nel commento iniziale). Qui solo il focus della scena.
 *
 * Focus da tastiera sui pulsanti: anello bianco con alone nero, leggibile su qualunque
 * fotogramma. Serve la regola propria: il reset di Hello (a:focus-visible, 0,1,1) batte il
 * :focus-visible di base.css (0,1,0) e lo rifà nero, e ".elementor a { box-shadow: none }" di
 * Elementor toglie l'anello di Hello. Due classi bastano a vincere su entrambi.
 */
.on-nastro a:focus-visible,
.on-nastro button:focus-visible {
	outline: 2px solid var(--on-focus, var(--on-white));
	outline-offset: 3px;
	box-shadow: 0 0 0 7px var(--on-black);
}

.on-nastro__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-nastro-ombra-testo);
}

/* ---------- OSD del videoregistratore ---------- */

.on-nastro__osd {
	position: absolute;
	top: var(--on-nastro-osd-top);
	z-index: 6;
	font-family: var(--on-font-tv);
	font-size: 18px;
	letter-spacing: .02em;
	line-height: 1;
	text-shadow: var(--on-nastro-ombra);
	text-transform: uppercase;
}

.on-nastro__osd--sx {
	left: var(--on-gutter);
}

.on-nastro__osd--dx {
	right: var(--on-gutter);
	text-align: right;
}

.on-nastro__osd em {
	display: block;
	margin-top: .35em;
	color: var(--on-ink-inv);
	font-size: .72em;
	font-style: normal;
}

.on-nastro__stato {
	color: var(--on-tv-green);
}

/* ---------- titolo, pulsanti, citazione ---------- */

.on-nastro__corpo {
	position: relative;
	z-index: 6;
	display: grid;
	gap: 18px;
}

.on-nastro .on-nastro__occhiello {
	display: block;
	margin: 0 0 12px;
	color: var(--on-ink-inv);
	text-shadow: var(--on-nastro-ombra-testo);
}

/*
 * Il blocco del titolo fa da contenitore: la misura dell'h1 si calcola sulla sua larghezza vera
 * (nel fermo da computer è la colonna a sinistra della citazione, non lo schermo).
 */
.on-nastro .on-nastro__titolo {
	container-type: inline-size;
}

/*
 * Telefono: 20vw come il prototipo, ma mai più grande di quanto serve perché la parola più lunga
 * stia intera nella riga. --on-nastro-lettere la scrive il PHP (lettere della parola più lunga);
 * .76 è la larghezza media di una maiuscola del font display in em (FERRARA: 5,1 em su 7 lettere)
 * con un po' di margine. Senza unità cqi resta 17vw, che fa stare "Ferrara" a 320 e a 390 px.
 * La rottura dentro la parola resta solo come ultima risorsa (break-word, non anywhere: non
 * cambia la misura minima del blocco).
 */
.on-nastro .on-nastro__h1 {
	margin: 0;
	color: var(--on-white);
	font-family: var(--on-font-display);
	font-size: 17vw;
	font-size: min(20vw, calc(100cqi / (var(--on-nastro-lettere, 7) * .76)));
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1;
	text-shadow: var(--on-nastro-ombra-testo);
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.on-nastro .on-nastro__sotto {
	display: block;
	margin-top: .2em;
	color: var(--on-ink-inv);
	font-family: var(--on-font-cond);
	font-size: max(.26em, 1rem);
	letter-spacing: .03em;
	line-height: 1.2;
	overflow-wrap: normal;
}

.on-nastro__sep {
	opacity: .8;
}

.on-nastro .on-nastro__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.on-nastro .on-nastro__btn[hidden],
.on-nastro .on-nastro__cta[hidden] {
	display: none;
}

.on-nastro .on-nastro__citazione {
	margin: 0;
	padding-left: 20px;
	border-left: 3px solid var(--on-green);
	color: var(--on-paper);
	text-shadow: var(--on-nastro-ombra-testo);
}

.on-nastro .on-nastro__cit-testo {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--on-font-cond);
	font-size: 18px;
	line-height: 1.16;
	text-transform: uppercase;
}

.on-nastro .on-nastro__cit-testo p {
	margin: 0;
}

.on-nastro .on-nastro__cit-autore {
	margin-top: .6em;
	color: var(--on-ink-inv);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-small);
	letter-spacing: var(--on-ls-label);
	text-transform: uppercase;
}

.on-nastro__stop {
	position: absolute;
	inset: 0;
	z-index: 7;
	place-items: center;
	pointer-events: none;
	font-family: var(--on-font-tv);
	font-size: clamp(40px, 6vw, 96px);
	text-shadow: 0 0 20px color-mix(in srgb, var(--on-shade) 90%, transparent);
	opacity: 0;
}

.on-nastro__invito {
	position: absolute;
	bottom: 18px;
	left: 50%;
	z-index: 5;
	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%);
}

/* Senza foto: niente fotogramma, resta il nero del nastro con le righe del tubo */
.on-nastro--senza-foto .on-nastro__stage {
	background-image: var(--on-grain);
}

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

@media (min-width: 901px) {
	.on-nastro {
		--on-nastro-osd-top: calc(var(--on-bar-h) + 56px);
	}

	.on-nastro__osd {
		font-size: clamp(20px, 2.4vw, 34px);
	}

	.on-nastro__corpo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
		gap: var(--on-space-gap);
		align-items: end;
	}

	.on-nastro .on-nastro__h1 {
		font-size: clamp(3.75rem, 11vw, 11.875rem);
		font-size: min(clamp(3.75rem, 11vw, 11.875rem), calc(100cqi / (var(--on-nastro-lettere, 7) * .76)));
	}

	.on-nastro .on-nastro__cit-testo {
		font-size: clamp(22px, 2.6vw, 40px);
		line-height: 1.14;
	}
}

/* =========================================================================
 * Scrub: solo con GSAP attivo (html.on-motion) e il nastro armato dal modulo (.is-scrub)
 * ====================================================================== */

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

.on-motion .on-nastro.is-scrub .on-nastro__stage {
	position: sticky;
	top: 0;
	display: block;
	height: 100svh;
	min-height: 0;
	padding: 0;
	background-color: var(--on-night);
}

.on-motion .on-nastro.is-scrub .on-nastro__fr {
	display: block;
	opacity: 0;
	will-change: opacity;
}

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

.on-motion .on-nastro.is-scrub .on-nastro__rumore {
	position: absolute;
	inset: -10%;
	z-index: 4;
	display: block;
	pointer-events: none;
	background: var(--on-grain), var(--on-grain);
	background-size: 90px 90px, 140px 140px;
	filter: contrast(3) brightness(1.8);
	mix-blend-mode: screen;
	opacity: 0;
}

.on-motion .on-nastro.is-scrub .on-nastro__banda {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 4;
	display: block;
	height: 6%;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--on-white) 35%, transparent) 40%, color-mix(in srgb, var(--on-shade) 60%, transparent) 60%, transparent);
	mix-blend-mode: screen;
	opacity: 0;
}

.on-motion .on-nastro.is-scrub .on-nastro__velo {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: block;
	pointer-events: none;
	background: color-mix(in srgb, var(--on-night) 86%, transparent);
	opacity: 0;
}

.on-motion .on-nastro.is-scrub .on-nastro__corpo {
	position: static;
	display: block;
}

.on-motion .on-nastro.is-scrub .on-nastro__titolo {
	position: absolute;
	right: var(--on-gutter);
	bottom: var(--on-nastro-pad-basso);
	left: var(--on-gutter);
	z-index: 6;
	will-change: transform, opacity;
}

.on-motion .on-nastro.is-scrub .on-nastro__citazione {
	position: absolute;
	top: 52%;
	right: 20px;
	left: 20px;
	z-index: 6;
	padding-left: clamp(16px, 2vw, 28px);
	border-left-width: 4px;
	color: var(--on-white);
	opacity: 0;
	translate: 0 -50%;
	will-change: transform, opacity;
}

.on-motion .on-nastro.is-scrub .on-nastro__cit-testo {
	font-family: var(--on-font-display);
	font-size: 6.6vw;
	line-height: 1.16;
	overflow-wrap: anywhere;
}

.on-motion .on-nastro.is-scrub .on-nastro__stop {
	display: grid;
}

@media (min-width: 901px) {
	.on-motion .on-nastro.is-scrub {
		height: var(--on-nastro-h, 560vh);
	}

	.on-motion .on-nastro.is-scrub .on-nastro__velo {
		background: linear-gradient(90deg, color-mix(in srgb, var(--on-night) 92%, transparent) 0%, color-mix(in srgb, var(--on-night) 75%, transparent) 45%, color-mix(in srgb, var(--on-night) 35%, transparent) 100%);
	}

	.on-motion .on-nastro.is-scrub .on-nastro__citazione {
		top: 54%;
		right: auto;
		left: var(--on-gutter);
		width: min(70vw, 860px);
	}

	.on-motion .on-nastro.is-scrub .on-nastro__cit-testo {
		font-size: clamp(30px, 3.3vw, 58px);
		line-height: 1.14;
		overflow-wrap: normal;
	}

	/* L'invito a scorrere solo sul computer, come nel prototipo */
	.on-motion .on-nastro.is-scrub .on-nastro__invito {
		display: block;
	}
}