/*
 * ON Timeline Polaroid: il volo tra le polaroid dei raduni (home, #timeline).
 * Porta home.css del prototipo (.volo, .pol, .volo-*), mobile first.
 *
 * Due stati:
 * - statico (sempre, senza JS, movimento ridotto, editor): fila orizzontale da scorrere sul
 *   telefono, griglia centrata dai 600 px (come .volo.is-rest del prototipo);
 * - volo (.on-tlp.is-volo, lo mette il JS): sezione alta --on-tlp-h, palco sticky, polaroid in 3D.
 *   Solo qui il CSS prepara l'animazione. Non dipende da html.on-motion: is-volo lo aggiunge solo
 *   il modulo, e solo dentro gsap.matchMedia con prefers-reduced-motion: no-preference, quindi
 *   CSS e JS del volo partono e si smontano sempre insieme.
 */

.on-tlp {
	/* Effetti del mondo ON (prototipo): verde della polaroid senza foto, ricavato dall'unico verde */
	--on-tlp-vuoto: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--on-green) 94%, var(--on-white)) 0%, color-mix(in srgb, var(--on-green) 88%, var(--on-shade)) 45%, color-mix(in srgb, var(--on-green) 76%, var(--on-shade)) 100%);
	--on-tlp-righe: repeating-linear-gradient(0deg, color-mix(in srgb, var(--on-shade) 20%, transparent) 0 2px, transparent 2px 5px);
	--on-tlp-lucido: linear-gradient(118deg, color-mix(in srgb, var(--on-white) 20%, transparent) 0%, color-mix(in srgb, var(--on-white) 4%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--on-shade) 10%, transparent) 100%);
	--on-tlp-ombra-m: 0 10px 20px -8px color-mix(in srgb, var(--on-shade) 35%, transparent);
	--on-tlp-pol-w: clamp(200px, 58vw, 270px);
	--on-focus: var(--on-green-ink);

	position: relative;
	z-index: var(--on-z-raised);
	padding-block: clamp(72px, 8vw, 120px) var(--on-space-section-s);
	background: var(--on-paper-2);
	color: var(--on-ink);
}

.on-tlp__palco {
	position: relative;
}

/* La grana sopra la scena, come in tutte le sezioni di carta del prototipo */
.on-tlp__palco::before {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	background: var(--on-grain);
	opacity: .5;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Parti che hanno senso solo durante il volo */
.on-tlp__anno,
.on-tlp__suggerimento,
.on-tlp__ui,
.on-tlp__salta {
	display: none;
}

/* ---------------------------------------------------------------------
 * Statico: fila da scorrere sul telefono
 * ------------------------------------------------------------------ */

.on-tlp__spazio {
	display: flex;
	gap: var(--on-space-4);
	margin: 0;
	padding: var(--on-space-4) var(--on-gutter) var(--on-space-6);
	overflow-x: auto;
	list-style: none;
	scroll-padding-inline: var(--on-gutter);
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--on-green-ink) transparent;
	scrollbar-width: thin;
}

.on-polaroid {
	position: relative;
	flex: 0 0 var(--on-tlp-pol-w);
	aspect-ratio: var(--on-pol-fr, .8);
	box-shadow: var(--on-tlp-ombra-m);
	scroll-snap-align: center;
	transform: rotate(var(--on-pol-r, 0deg));
}

.on-polaroid__corpo {
	position: absolute;
	inset: 0;
	display: block;
	color: var(--on-ink);
	text-decoration: none;
}

.on-polaroid__corpo:focus-visible {
	outline: 3px solid var(--on-focus);
	outline-offset: 4px;
}

/* Doppia classe: ".elementor img { height: auto }" (0,1,1) altrimenti annulla l'altezza */
.on-polaroid .on-polaroid__cornice {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}

.on-polaroid__foto {
	position: absolute;
	z-index: 1;
	top: var(--on-pol-wy);
	left: var(--on-pol-wx);
	display: block;
	width: var(--on-pol-ww);
	height: var(--on-pol-wh);
	overflow: hidden;
	background: var(--on-black);
}

.on-polaroid .on-polaroid__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--on-foto-x, 50%) var(--on-foto-y, 40%);
	filter: var(--on-photo-filter);
}

/* Il lucido della stampa: un riflesso in alto a sinistra, un filo d'ombra in basso a destra */
.on-polaroid__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--on-tlp-lucido);
	pointer-events: none;
}

/* Senza foto: il logo su verde con le righe del Televideo; il "?" del prossimo raduno uguale */
.on-polaroid--vuota .on-polaroid__foto,
.on-polaroid--domanda .on-polaroid__foto {
	display: grid;
	place-items: center;
	background: var(--on-tlp-vuoto);
}

.on-polaroid--vuota .on-polaroid__foto::before,
.on-polaroid--domanda .on-polaroid__foto::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--on-tlp-righe);
	mix-blend-mode: multiply;
}

.on-polaroid__logo {
	position: relative;
	width: 34%;
	height: auto;
}

.on-polaroid__domanda {
	position: relative;
	color: var(--on-white);
	font-family: var(--on-font-display);
	font-size: clamp(7.5rem, 14vw, 13.75rem);
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 6px 30px color-mix(in srgb, var(--on-shade) 30%, transparent);
}

.on-polaroid__didascalia {
	position: absolute;
	z-index: 3;
	right: 9%;
	bottom: 6%;
	left: 9%;
	color: var(--on-ink);
	font-family: var(--on-font-marker);
	font-size: 1.1875rem;
	line-height: 1;
	white-space: nowrap;
	transform: rotate(-2deg);
}

.on-polaroid__didascalia small {
	margin-left: .35em;
	color: color-mix(in srgb, var(--on-ink) 82%, var(--on-white));
	font-size: .68em;
}

/* Domanda finale (takeover): nello statico sta sotto le polaroid */
.on-tlp__finale {
	position: relative;
	z-index: 4;
	width: min(92vw, 900px);
	margin: var(--on-space-7) auto 0;
	text-align: center;
}

.on-tlp__occhiello {
	margin: 0;
	color: var(--on-green-ink);
}

.on-tlp__domanda {
	margin: 12px auto 22px;
	color: var(--on-ink);
	font-size: 7.6vw;
	line-height: 1.12;
	text-shadow: 0 2px 24px color-mix(in srgb, var(--on-paper) 90%, transparent);
	text-wrap: balance;
}

/* ---------------------------------------------------------------------
 * Statico dai 600 px: griglia centrata (prototipo .volo.is-rest)
 * ------------------------------------------------------------------ */

@media (min-width: 600px) {
	.on-tlp__spazio {
		flex-wrap: wrap;
		justify-content: center;
		gap: 28px;
		max-width: calc(var(--on-container) + 2 * var(--on-gutter));
		margin-inline: auto;
		overflow: visible;
		scroll-snap-type: none;
	}

	.on-polaroid {
		flex-basis: 220px;
	}
}

@media (min-width: 901px) {
	.on-polaroid {
		box-shadow: none;
		filter: drop-shadow(0 26px 22px color-mix(in srgb, var(--on-shade) 32%, transparent));
	}

	.on-tlp__domanda {
		font-size: clamp(1.875rem, 3.4vw, 3.625rem);
		line-height: 1.1;
	}
}

/* ---------------------------------------------------------------------
 * Volo: solo con la classe is-volo messa dal JS (GSAP presente, movimento non ridotto)
 * ------------------------------------------------------------------ */

.on-tlp.is-volo {
	height: var(--on-tlp-h-t, 320vh);
	padding: 0;
}

.on-tlp.is-volo .on-tlp__palco {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.on-tlp.is-volo .on-tlp__anno {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.on-tlp__anno span {
	display: block;
	color: transparent;
	font-family: var(--on-font-display);
	font-size: clamp(10.625rem, 36vw, 35rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	-webkit-text-stroke: 2px color-mix(in srgb, var(--on-black) 16%, transparent);
	transform-origin: 50% 50%;
}

.on-tlp.is-volo .on-tlp__spazio {
	position: absolute;
	inset: 0;
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	perspective: 1100px;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
}

.on-tlp.is-volo .on-polaroid {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--on-tlp-pol-w);
	backface-visibility: hidden;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	will-change: transform, opacity;
}

.on-tlp.is-volo .on-polaroid__didascalia {
	font-size: var(--on-fs-marker);
}

.on-tlp.is-volo .on-tlp__suggerimento {
	position: absolute;
	z-index: 4;
	top: calc(var(--on-bar-h) + 18px);
	left: 50%;
	display: block;
	width: calc(100% - 40px);
	margin: 0;
	color: var(--on-ink);
	font-family: var(--on-font-cond);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	text-align: center;
	text-transform: uppercase;
	transform: translateX(-50%);
}

.on-tlp.is-volo .on-tlp__ui {
	position: absolute;
	z-index: 4;
	right: var(--on-gutter);
	bottom: max(34px, env(safe-area-inset-bottom));
	left: var(--on-gutter);
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--on-ink-2);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-small);
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	text-transform: uppercase;
}

.on-tlp__traccia {
	flex: 1;
	height: 2px;
	background: var(--on-line);
}

.on-tlp__traccia i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--on-green);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* "Salta la timeline": in basso, sopra la barra degli anni */
.on-tlp.is-volo .on-tlp__salta {
	position: absolute;
	z-index: 6;
	bottom: calc(max(34px, env(safe-area-inset-bottom)) + 44px);
	left: 50%;
	display: block;
	padding: 10px 2px 5px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--on-black) 35%, transparent);
	background: none;
	color: var(--on-ink-2);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-micro);
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	text-transform: uppercase;
	transform: translateX(-50%);
	cursor: pointer;
	transition: color var(--on-dur-1) ease;
}

.on-tlp__salta:hover,
.on-tlp__salta:focus-visible {
	color: var(--on-ink);
}

/* La domanda finale entra con lo scroll (opacità e posizione dal JS) */
.on-tlp.is-volo .on-tlp__finale {
	position: absolute;
	z-index: 7;
	bottom: 96px;
	left: 50%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 30px);
}

@media (min-width: 901px) {
	.on-tlp.is-volo {
		height: var(--on-tlp-h, 440vh);
	}

	.on-tlp.is-volo .on-polaroid {
		width: clamp(260px, 29vw, 440px);
		will-change: transform, opacity, filter;
	}

	.on-tlp.is-volo .on-tlp__suggerimento {
		top: calc(var(--on-bar-h) + 10px);
		width: auto;
		font-size: .9375rem;
		white-space: nowrap;
	}

	.on-tlp.is-volo .on-tlp__ui {
		bottom: 26px;
	}

	.on-tlp.is-volo .on-tlp__salta {
		bottom: 70px;
		padding: 10px 0 6px;
		font-size: .8125rem;
	}

	.on-tlp.is-volo .on-tlp__finale {
		bottom: clamp(64px, 9vh, 110px);
	}
}