/*
 * ON Apertura TV: la cameretta del 1996, la TV, il video hero (apertura.css e home.css del prototipo).
 *
 * Tre livelli, decisi dal modulo JS che mette una classe sulla radice:
 * - nessuna classe (senza JS, movimento ridotto, Save-Data, editor): livello statico, alto uno schermo,
 *   poster e titolo visibili, stanza in display:none (con movimento ridotto il <picture> della foto
 *   spenta serve una gif di 1 px, la foto accesa è lazy: nessuna delle due si scarica);
 * - .is-motion.is-leggero (telefono): zoom nella TV, poi il video mobile;
 * - .is-motion.is-completo (desktop): dolly sui fotogrammi nel canvas.
 * Mobile first: le regole senza media query valgono per il telefono, 901px per il desktop.
 */

.on-apertura {
	/* Lunghezza dello scroll: la scrive il widget (controlli Scena) */
	--on-apertura-h: 520vh;
	--on-apertura-h-m: 380vh;
	/* Centro dello schermo della TV nella foto: lo ricalcola il JS dalla geometria */
	--on-apertura-ox: 48.13%;
	--on-apertura-oy: 35.48%;
	/* Effetti del tubo catodico del prototipo (luce verde, bagliore, polvere): decorativi, solo qui */
	--on-apertura-luce-1: rgba(40, 200, 90, .36);
	--on-apertura-luce-2: color-mix(in srgb, var(--on-green) 16%, transparent);
	--on-apertura-bagliore: rgba(170, 255, 190, .6);
	--on-apertura-scudo-luce: rgba(200, 255, 210, .55);
	--on-apertura-polvere: #ffe9c4;
	--on-apertura-velo: linear-gradient(180deg, color-mix(in srgb, var(--on-shade) 38%, transparent) 0%, transparent 32%, transparent 48%, color-mix(in srgb, var(--on-shade) 80%, transparent) 100%);
	--on-apertura-righe: repeating-linear-gradient(0deg, color-mix(in srgb, var(--on-shade) 26%, transparent) 0 2px, transparent 2px 5px);
	--on-apertura-bordo: color-mix(in srgb, var(--on-white) 40%, transparent);
	--on-apertura-fondo-tasto: color-mix(in srgb, var(--on-shade) 25%, transparent);
	/* Corpo dell'h1 da desktop come nel prototipo (clamp 60-120px a 8vw): il token --on-fs-hero ha una
	 * rampa diversa (+11% a 1280px) e resta al kit per gli h1 generici, quindi qui serve un valore locale. */
	--on-apertura-fs-hero: clamp(3.75rem, 8vw, 7.5rem);
	position: relative;
	background: var(--on-night);
	color: var(--on-white);
}

/* ---------------------------------------------------------------------
 * Palcoscenico: nel livello statico è una sezione alta uno schermo
 * ------------------------------------------------------------------ */

.on-apertura__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: var(--on-bar-h);
	overflow: hidden;
	background: var(--on-night);
}

.on-apertura__mondo {
	display: none;
}

/* Hero: poster (o video) a tutto schermo, con la velatura per leggere il testo */
.on-apertura__hero {
	position: absolute;
	inset: 0;
	background: var(--on-tv-black);
}

.on-apertura__hero img.on-apertura__poster,
.on-apertura__video {
	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%);
}

/* Un <video> senza src può dipingersi nero sopra il poster: sul telefono resta così finché non si preme "Guarda il video" */
.on-apertura__video:not([src]) {
	visibility: hidden;
}

.on-apertura__tinta,
.on-apertura__righe,
.on-apertura__velo {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Il verde del tubo e le scanline servono solo al passaggio dalla TV al video */
.on-apertura__tinta {
	opacity: 0;
	background: var(--on-green);
	mix-blend-mode: color;
}

.on-apertura__righe {
	opacity: 0;
	background: var(--on-apertura-righe);
	mix-blend-mode: multiply;
}

.on-apertura__velo {
	background: var(--on-apertura-velo);
}

/* ---------------------------------------------------------------------
 * Testo dell'hero
 * ------------------------------------------------------------------ */

.on-apertura__copy {
	position: relative;
	z-index: 6;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: 18px;
	margin-inline: var(--on-gutter);
	padding-bottom: max(26px, env(safe-area-inset-bottom));
}

.on-apertura__copy:focus {
	outline: none;
}

.on-apertura__copy:focus-visible {
	outline: 2px solid var(--on-white);
	outline-offset: 6px;
}

.on-apertura__testo > :first-child {
	margin-top: 0;
}

/*
 * Il kit di Elementor stila tutti gli h1 (.elementor-kit-6 h1: corpo display e interlinea 1.02em,
 * specificità 0,1,1): il titolo dell'hero ha un livello di classe in più per vincere in ogni media query.
 */
.on-apertura .on-apertura__titolo {
	margin: 0;
	color: var(--on-white);
	font-family: var(--on-font-display);
	font-size: 10.5vw;
	line-height: var(--on-lh-title);
	text-wrap: balance;
}

.on-apertura__titolo span {
	display: block;
}

.on-apertura__sub {
	margin: 14px 0 0;
	color: var(--on-paper);
	font-size: .9375rem;
	letter-spacing: -.015em;
	line-height: 1.5;
}

/* Box del prossimo raduno (e "La giornata" in takeover) */
.on-apertura__box {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	min-width: 0;
	padding-top: 10px;
	border-top: 1px solid var(--on-line-inv);
	color: var(--on-white);
}

.on-apertura__k {
	display: block;
	flex-basis: 100%;
	color: var(--on-ink-inv);
	font-size: var(--on-fs-micro);
}

.on-apertura__box-titolo {
	font-family: var(--on-font-cond);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
}

.on-apertura__box-riga {
	display: none;
	color: var(--on-ink-inv);
	font-size: var(--on-fs-small);
}

/* Bersaglio di almeno 24 px (WCAG 2.5.8) senza spostare il testo: padding compensato dai margini */
.on-apertura__box-link {
	justify-self: start;
	margin: -10px 0 -7px auto;
	padding: 10px 0;
	border-bottom: 1.5px solid currentColor;
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-button);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

/* Takeover: conto alla rovescia e bottoni al posto del sottotitolo */
.on-apertura__testo > .on-apertura__k {
	margin-bottom: 8px;
}

.on-apertura__cd-cifre {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	gap: 14px;
	margin-top: 14px;
}

.on-apertura__cd-cifre div {
	display: grid;
	gap: 4px;
}

.on-apertura__cd-cifre b {
	color: var(--on-white);
	font-family: var(--on-font-display);
	font-size: 11vw;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: var(--on-lh-number);
}

.on-apertura__cd-cifre span {
	color: var(--on-ink-inv);
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.on-apertura__cd-fine {
	margin: 14px 0 0;
	font-size: var(--on-fs-h4);
}

.on-apertura__cd.is-finito .on-apertura__cd-cifre {
	display: none;
}

.on-apertura__cd.is-finito .on-apertura__cd-fine {
	display: block;
}

.on-apertura__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.on-apertura__cta .on-btn {
	padding: 12px 16px 10px;
	border-radius: var(--on-radius-xs);
	font-size: .8125rem;
}

.on-apertura__cta .on-btn--light {
	color: var(--on-green-ink);
}

.on-apertura__cta .on-btn--light:hover {
	background: var(--on-black);
	color: var(--on-white);
}

.on-apertura.on-apertura--takeover .on-apertura__titolo {
	font-size: 10.5vw;
}

/* ---------------------------------------------------------------------
 * Link "Salta l'apertura": compare solo con il focus da tastiera
 * ------------------------------------------------------------------ */

.on-apertura__salta {
	position: fixed;
	z-index: var(--on-z-skip);
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
	left: 16px;
	padding: 12px 16px;
	background: var(--on-green);
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-nav);
	font-weight: 700;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
	transform: translateY(-200%);
	transition: transform var(--on-dur-1);
}

.on-apertura__salta:focus-visible {
	outline: 3px solid var(--on-white);
	transform: none;
}

/* ---------------------------------------------------------------------
 * Preloader: solo con JS e senza movimento ridotto. Se il modulo non parte
 * (script bloccato, errore) l'animazione lo toglie da sola dopo 4 secondi:
 * il preloader del prototipo, senza guardia, copriva la pagina per sempre.
 * Appena la tastiera porta il focus nella pagina se ne va (WCAG 2.4.11:
 * niente focus sotto un overlay); il JS fa lo stesso al primo tasto.
 * ------------------------------------------------------------------ */

.on-apertura__boot {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	html.js .on-apertura__boot {
		position: fixed;
		z-index: var(--on-z-modal);
		inset: 0;
		display: grid;
		place-items: center;
		align-content: center;
		gap: 28px;
		background: var(--on-night);
		transition: opacity .9s var(--on-ease-out), visibility 0s .9s;
		animation: on-apertura-boot-via 0s 4s forwards;
	}

	html.js .on-apertura__boot.is-done,
	html.js body:has(:focus-visible) .on-apertura__boot {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	/* Con la tastiera via subito, senza dissolvenza: il focus non deve restare coperto nemmeno per un attimo */
	html.js body:has(:focus-visible) .on-apertura__boot,
	html.js .on-apertura__boot.is-subito {
		transition: none;
	}
}

@keyframes on-apertura-boot-via {
	to {
		visibility: hidden;
		opacity: 0;
	}
}

.on-apertura__boot-logo {
	width: 64px;
	height: auto;
	opacity: .9;
	filter: drop-shadow(0 0 18px color-mix(in srgb, var(--on-green) 35%, transparent));
}

.on-apertura__boot-linea {
	width: 160px;
	height: 2px;
	overflow: hidden;
	background: color-mix(in srgb, var(--on-white) 12%, transparent);
}

.on-apertura__boot-linea i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--on-white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s linear;
}

/* ---------------------------------------------------------------------
 * Livelli con movimento: la scena è lunga, il palcoscenico resta fermo
 * ------------------------------------------------------------------ */

.on-apertura.is-motion {
	height: var(--on-apertura-h-m);
	overflow: clip;
}

.on-apertura.is-motion .on-apertura__stage {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	height: 100svh;
	min-height: 0;
	padding: 0;
}

/* Il puntatore anni '90, solo durante l'apertura (dal prototipo) */
html.on-apertura-chiusa .on-apertura.is-motion,
html.on-apertura-chiusa .on-apertura.is-motion * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1v13l3.5-3.2L7 15.5l2.4-1.1-2.5-4.7H11z' fill='%23fff' stroke='%23000' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E") 2 2, auto;
}

.is-motion .on-apertura__mondo {
	position: absolute;
	inset: 0;
	display: block;
	will-change: transform;
}

.on-apertura__stanza {
	position: absolute;
	inset: 0;
	transform-origin: var(--on-apertura-ox) var(--on-apertura-oy);
	will-change: transform;
}

.on-apertura__stanza img,
.on-apertura__stanza canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--on-apertura-ox) var(--on-apertura-oy);
}

.on-apertura__stanza .on-apertura__foto--on,
.on-apertura__dolly {
	opacity: 0;
}

/* Lo schermo della TV, nelle coordinate della foto (il JS lo posiziona in px) */
.on-apertura__schermo {
	position: absolute;
	top: var(--on-apertura-sy, 0);
	left: var(--on-apertura-sx, 0);
	width: var(--on-apertura-sw, 0);
	height: var(--on-apertura-sh, 0);
	overflow: hidden;
	border-radius: 7% / 9%;
	pointer-events: none;
}

.on-apertura__neve {
	position: absolute;
	inset: -12%;
	opacity: 0;
	background: var(--on-grain), var(--on-grain);
	background-size: 90px 90px, 140px 140px;
	filter: contrast(3) brightness(2.2) sepia(1) hue-rotate(85deg) saturate(2.5);
}

/* La neve scorre solo mentre si vede (il JS accende la classe tra 24% e 38% dello scroll) */
.on-apertura__neve.is-viva {
	animation: on-apertura-neve .08s steps(2) infinite;
}

@keyframes on-apertura-neve {
	0% {
		background-position: 0 0, 30px 50px;
	}

	100% {
		background-position: 70px 90px, -40px 20px;
	}
}

/*
 * Accensione a tubo catodico: una riga bianca che si apre in verticale. Copre lo schermo e si
 * scala dal centro (transform-origin di default); il margin-top: -50% del prototipo si
 * calcolava sulla larghezza e spingeva la riga sotto il vetro.
 */
.on-apertura__tubo {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 100%;
	opacity: 0;
	background: var(--on-white);
	box-shadow: 0 0 40px 12px color-mix(in srgb, var(--on-white) 90%, transparent), 0 0 120px 40px var(--on-apertura-bagliore);
	transform: scale(0, .012);
}

/* La TV accesa bagna la cameretta di verde */
.on-apertura__luce {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(ellipse at var(--on-apertura-ox) var(--on-apertura-oy), var(--on-apertura-luce-1) 0%, var(--on-apertura-luce-2) 22%, transparent 48%);
	mix-blend-mode: screen;
	pointer-events: none;
}

.on-apertura__vignetta {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 42%, transparent 46%, color-mix(in srgb, var(--on-shade) 62%, transparent) 100%);
	pointer-events: none;
}

.on-apertura__polvere {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .9;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Hero nascosto finché la camera non entra nel tubo */
.is-motion .on-apertura__hero {
	opacity: 0;
}

.is-motion .on-apertura__tinta,
.is-motion .on-apertura__righe {
	opacity: 1;
}

.is-motion .on-apertura__copy {
	position: absolute;
	right: var(--on-gutter);
	bottom: max(26px, env(safe-area-inset-bottom));
	left: var(--on-gutter);
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(40px);
}

.is-motion .on-apertura__copy a,
.is-motion .on-apertura__copy .on-btn {
	pointer-events: auto;
}

/* "Scorri per entrare": il solo testo sulla stanza */
.on-apertura__invito {
	display: none;
}

.is-motion .on-apertura__invito {
	position: absolute;
	z-index: 5;
	right: 0;
	bottom: max(24vh, 170px);
	left: 0;
	display: grid;
	justify-items: center;
	gap: 12px;
	margin: 0;
	color: var(--on-white);
	pointer-events: none;
}

.on-apertura__invito > * {
	opacity: 0;
	transition: opacity 1.4s var(--on-ease-out) .5s;
}

.on-apertura__invito.is-ready > * {
	opacity: 1;
}

.on-apertura__invito-testo {
	min-height: 1.3em;
	font-family: var(--on-font-cond);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-shadow: 0 1px 2px color-mix(in srgb, var(--on-shade) 90%, transparent), 0 0 18px color-mix(in srgb, var(--on-shade) 70%, transparent);
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Tasti: suono (fisso), pausa del video e "Guarda il video" (nella scena)
 * ------------------------------------------------------------------ */

.on-apertura__suono,
.on-apertura__pausa,
.on-apertura__guarda {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--on-apertura-bordo);
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: opacity .8s var(--on-ease-out), visibility 0s .8s, border-color var(--on-dur-2);
}

.on-apertura__suono[hidden],
.on-apertura__pausa[hidden],
.on-apertura__guarda[hidden] {
	display: none;
}

/*
 * Il kit stila tutti i button (.elementor-kit-6 button e :hover/:focus, specificità fino a 0,2,1: verde
 * pieno, poi nero, angoli vivi, Tusker maiuscolo): fondo traslucido, colore e angoli qui con due classi
 * e il tipo (0,2,1 e 0,3,1 negli stati), così vincono senza !important. Transizioni e visibilità restano
 * nelle regole a una classe, che gli stati .is-ready, .is-fuori e .is-hero ritoccano.
 */
.on-apertura button.on-apertura__suono,
.on-apertura button.on-apertura__pausa,
.on-apertura button.on-apertura__guarda {
	border-radius: var(--on-radius-s);
	background: var(--on-apertura-fondo-tasto);
	color: var(--on-white);
}

.on-apertura button.on-apertura__suono:hover,
.on-apertura button.on-apertura__suono:focus,
.on-apertura button.on-apertura__pausa:hover,
.on-apertura button.on-apertura__pausa:focus,
.on-apertura button.on-apertura__guarda:hover,
.on-apertura button.on-apertura__guarda:focus {
	border-color: var(--on-white);
	background: var(--on-apertura-fondo-tasto);
	color: var(--on-white);
}

/* "Guarda il video" ha un testo visibile: è il solo invito al video sul telefono, un'icona non basta */
.on-apertura button.on-apertura__guarda {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	width: auto;
	padding: 0 16px 0 12px;
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-nav);
	font-weight: 700;
	letter-spacing: var(--on-ls-button);
	line-height: 1;
	text-transform: uppercase;
}

.on-apertura button.on-apertura__guarda[hidden] {
	display: none;
}

.on-apertura__suono {
	position: fixed;
	z-index: calc(var(--on-z-header) + 6);
	top: calc(var(--on-bar-h) + 12px);
	right: max(14px, env(safe-area-inset-right));
	visibility: hidden;
	opacity: 0;
}

/* Fuori dalla scena il tasto non si vede e non si raggiunge col Tab (visibility, non solo opacity) */
.on-apertura__suono.is-ready {
	visibility: visible;
	opacity: 1;
	transition-delay: .9s, 0s, 0s;
}

.on-apertura__suono.is-ready.is-fuori,
.on-menu-aperto .on-apertura__suono {
	visibility: hidden;
	opacity: 0;
	transition-delay: 0s, .3s, 0s;
}

.on-apertura__onda {
	opacity: 0;
}

/* L'icona segue aria-pressed, che è anche lo stato letto dallo screen reader: una sola fonte di verità */
.on-apertura__suono[aria-pressed="true"] .on-apertura__onda {
	opacity: 1;
}

.on-apertura__suono[aria-pressed="true"] .on-apertura__muto {
	opacity: 0;
}

.on-apertura__pausa,
.on-apertura__guarda {
	position: absolute;
	z-index: 7;
	top: calc(var(--on-bar-h) + 12px);
	left: var(--on-gutter);
	visibility: hidden;
	opacity: 0;
}

.on-apertura.is-hero .on-apertura__pausa,
.on-apertura.is-hero .on-apertura__guarda {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/* Video in pausa: l'icona diventa "play" */
.on-apertura__ico-play,
.on-apertura__pausa[aria-pressed="true"] .on-apertura__ico-pausa {
	display: none;
}

.on-apertura__pausa[aria-pressed="true"] .on-apertura__ico-play {
	display: inline;
}

/* Lo scudo che esce dallo schermo e atterra nella barra */
.on-apertura__scudo {
	position: fixed;
	z-index: calc(var(--on-z-header) + 5);
	top: 0;
	left: 0;
	display: none;
	max-width: none;
	height: auto;
	opacity: 0;
	filter: drop-shadow(0 0 28px var(--on-apertura-scudo-luce));
	pointer-events: none;
	transform-origin: 0 0;
	will-change: transform;
}

.is-motion .on-apertura__scudo {
	display: block;
}

.on-apertura.is-atterrato .on-apertura__scudo {
	opacity: 0 !important; /* vince sull'opacità scritta da GSAP: a volo finito c'è lo scudo vero della barra */
}

/* ---------------------------------------------------------------------
 * La barra durante l'apertura: arriva solo quando si è dentro la TV.
 * Con il focus dentro (Tab) o il menu aperto torna visibile: niente
 * elementi raggiungibili e invisibili.
 *
 * Stati, come le classi del body nel prototipo (apertura.js:399-410):
 * - html.on-apertura-montata: la scena animata c'è (body.opening del prototipo, finché è chiusa);
 * - html.on-apertura-atterrata: lo scudo è atterrato nella barra (body.landed);
 * - html.on-apertura-oltre: la prima sezione dopo la scena è arrivata sotto la barra (body.past),
 *   fino all'ultimo pixel della pagina, dove il prototipo la toglie di nuovo.
 * Senza "oltre" la riga è trasparente e bianca (home.css:32-58), con Biglietti verde.
 * ------------------------------------------------------------------ */

html.on-apertura-montata .on-bar {
	transition: opacity .8s var(--on-ease-out), transform .8s var(--on-ease-out), color .4s;
}

/*
 * Durante l'apertura la barra è nascosta come nel prototipo (body.opening .bar, home.css:60).
 * Torna visibile solo con il focus da tastiera (:focus-visible), per chi naviga col Tab: un clic
 * sul logo lascia il focus nella barra e con :focus-within la barra restava accesa.
 */
html.on-apertura-chiusa:not(.on-menu-aperto) .on-bar:not(:has(:focus-visible)) {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-16px);
}

html.on-apertura-volo .on-bar__logo {
	opacity: 0;
	transition: opacity .25s, transform var(--on-dur-3) var(--on-ease-out);
}

html.on-apertura-volo .on-bar:has(:focus-visible) .on-bar__logo,
html.on-apertura-volo.on-menu-aperto .on-bar__logo {
	opacity: 1;
}

html.on-apertura-montata:not(.on-apertura-oltre):not(.on-menu-aperto) .on-bar .on-bar__row {
	background: transparent;
	color: var(--on-white);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

html.on-apertura-montata:not(.on-apertura-oltre):not(.on-menu-aperto) .on-bar .on-bar__logo {
	filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--on-shade) 40%, transparent));
}

html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__menu {
	border-color: color-mix(in srgb, var(--on-white) 25%, transparent);
	background: transparent;
}

html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__menu a {
	color: var(--on-white);
}

html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__menu a:hover,
html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__menu a:focus-visible {
	background: color-mix(in srgb, var(--on-white) 12%, transparent);
}

html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__menu .current-menu-item > a,
html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__menu a.is-active {
	background: color-mix(in srgb, var(--on-shade) 35%, transparent);
	box-shadow: none;
	color: var(--on-white);
}

html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__soon {
	border-color: color-mix(in srgb, var(--on-white) 25%, transparent);
}

html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__act {
	border-color: var(--on-green);
	background: var(--on-green);
	color: var(--on-white);
}

html.on-apertura-montata:not(.on-apertura-oltre) .on-bar .on-bar__act:hover {
	border-color: #00a63c;
	background: #00a63c;
	color: var(--on-white);
}

/* La grana su tutto lo schermo è più leggera in home (prototipo apertura.css:11) */
body:has(.on-apertura)::after {
	opacity: .4;
}

/* In home il prototipo ha un solo skip link, "Salta l'apertura" (home.html:26): quello del tema si toglie */
body:has(.on-apertura__salta) .skip-link {
	display: none;
}

/* ---------------------------------------------------------------------
 * Editor di Elementor: stato finale fermo, niente elementi fissi
 * ------------------------------------------------------------------ */

.on-apertura--editor .on-apertura__stage {
	min-height: 640px;
}

/* ---------------------------------------------------------------------
 * Tablet (600-900)
 * ------------------------------------------------------------------ */

/* Telefono in orizzontale: titolo più piccolo, niente sottotitolo, scena più corta */
@media (max-width: 900px) and (max-height: 520px) {
	.on-apertura.is-motion {
		height: 320vh;
	}

	.on-apertura__copy,
	.is-motion .on-apertura__copy {
		bottom: 14px;
		gap: 8px;
		padding-bottom: 14px;
	}

	.is-motion .on-apertura__copy {
		padding-bottom: 0;
	}

	.on-apertura .on-apertura__titolo,
	.on-apertura.on-apertura--takeover .on-apertura__titolo {
		font-size: clamp(30px, 7.5vw, 58px);
	}

	.on-apertura__sub {
		display: none;
	}

	.on-apertura__box {
		padding-top: 8px;
	}

	.on-apertura__suono {
		top: auto;
		bottom: 12px;
	}
}

/* ---------------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------------ */

@media (min-width: 901px) {
	.on-apertura.is-motion {
		height: var(--on-apertura-h);
	}

	.on-apertura__copy {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 48px;
		padding-bottom: clamp(32px, 6vh, 64px);
	}

	.is-motion .on-apertura__copy {
		bottom: clamp(32px, 6vh, 64px);
	}

	.on-apertura .on-apertura__titolo {
		font-size: var(--on-apertura-fs-hero);
	}

	.on-apertura.on-apertura--takeover .on-apertura__titolo {
		font-size: clamp(2.75rem, 1rem + 5.2vw, 6rem);
	}

	.on-apertura__sub {
		max-width: 48ch;
		margin-top: 22px;
		font-size: var(--on-fs-lede);
		letter-spacing: 0;
		line-height: var(--on-lh-lede);
	}

	.on-apertura__box {
		display: grid;
		gap: 4px;
		min-width: 280px;
		padding-top: 16px;
	}

	.on-apertura__k {
		font-size: var(--on-fs-label);
	}

	.on-apertura__box-titolo {
		font-size: var(--on-fs-h5);
	}

	.on-apertura__box-riga {
		display: block;
	}

	.on-apertura__box-link {
		margin: 10px 0 0;
		padding: 0 0 2px;
		font-size: var(--on-fs-nav);
	}

	.on-apertura__testo > .on-apertura__k {
		margin-bottom: 12px;
	}

	.on-apertura__cd-cifre {
		gap: clamp(14px, 2.4vw, 36px);
		margin-top: 22px;
	}

	.on-apertura__cd-cifre b {
		font-size: var(--on-fs-number);
	}

	.on-apertura__cta {
		margin-top: 24px;
	}

	.on-apertura__cta .on-btn {
		padding: var(--on-btn-pad);
		font-size: var(--on-fs-nav);
	}

	.is-motion .on-apertura__invito {
		bottom: max(28px, env(safe-area-inset-bottom));
		gap: 14px;
	}

	.on-apertura__invito-testo {
		font-size: 1.125rem;
		text-shadow: none;
	}

	/* Sul desktop il suono sta in basso a sinistra, la pausa del video in alto a destra */
	.on-apertura__suono {
		top: auto;
		right: auto;
		bottom: max(22px, env(safe-area-inset-bottom));
		left: max(20px, env(safe-area-inset-left));
	}

	.on-apertura__pausa,
	.on-apertura__guarda {
		right: var(--on-gutter);
		left: auto;
		top: calc(var(--on-bar-h) + 16px);
	}
}

/* ---------------------------------------------------------------------
 * Movimento ridotto: anche se una classe di movimento restasse, la scena torna ferma
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.on-apertura.is-motion {
		height: auto;
	}

	.on-apertura__neve.is-viva {
		animation: none;
	}

	.on-apertura__scudo,
	.on-apertura__suono {
		display: none;
	}

	html.on-apertura-chiusa .on-bar,
	html.on-apertura-volo .on-bar__logo {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}