/*
Theme Name: Cocoon Numana
Theme URI: https://cocoon-numana.it
Author: Enrico Morano
Author URI: https://enricomorano.it
Description: Tema figlio di Kadence per Cocoon Numana. Kadence porta guscio, layout e opzioni; qui vivono i design token del progetto e le personalizzazioni. I contenuti editabili arrivano dai widget Elementor content-only del plugin cocoon-numana-blocks.
Template: kadence
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cocoon-numana
Tags: custom-menu, featured-images, translation-ready
*/

/*
 * Foglio del tema figlio.
 *
 * Contiene solo quello che vale su tutto il sito: font, design token, basi
 * tipografiche, componenti condivisi e le correzioni sopra il guscio di Kadence.
 * Le regole di una singola fascia stanno nel CSS del widget che la disegna
 * (cocoon-numana-blocks/assets/css/<slug>.css), non qui.
 *
 * Palette, misure e componenti vengono dal prototipo approvato dal cliente il
 * 30/08 (_mockup/proto-home-2026-08-30/assets/css/style.css). Kadence carica il
 * suo foglio prima di questo, quindi qui non serve nessun !important: basta la
 * cascata. Se una regola sembra averne bisogno, il problema è la theme mod
 * sbagliata in _scripts/configure-kadence.php.
 *
 * Nomi delle classi: prefisso cn- come chiede il README del plugin dei blocchi.
 * Le tre classi delle sezioni hanno anche l'alias senza prefisso, che è il nome
 * con cui girano nel prototipo e nei ticket.
 */

/* ---------- 1. Font self-hosted ---------- */

/*
 * Su Google Fonts queste due famiglie esistono solo come font variabili: un
 * unico woff2 latin per famiglia copre tutte le grammature che usiamo, quindi
 * l'intervallo nel font-weight non è una scorciatoia ma la forma vera del file.
 * Licenza OFL, il testo sta accanto ai font in assets/fonts/.
 */

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('assets/fonts/eb-garamond-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Design token ---------- */

:root {
	/* Moodboard del cliente: Panna -> Noce. */
	--cn-panna: #f5f2ee;
	--cn-sabbia: #e7e0d4;
	--cn-beige: #d8c8b3;
	--cn-rovere: #c6aa86;
	--cn-rovere-miele: #a57c4f;
	--cn-noce: #5b4634;

	/* Ruoli. Il fondo è uno solo su tutta la pagina: le sezioni si distinguono
	   per mezzo tono, non per colore. */
	--cn-fondo: #eae4d9;
	--cn-fondo-alt: #e0d7c7;
	--cn-superficie: var(--cn-panna);
	--cn-inchiostro: #2b211a;
	--cn-inchiostro-tenue: #6b5847;
	--cn-accento: var(--cn-noce);
	--cn-scuro: #2b211a;
	--cn-bordo: rgba(43, 33, 26, 0.18);

	/* Unico colore freddo della direzione grafica: sta sui link di testo e sul
	   loro hover, da nessun'altra parte. */
	--cn-verde-mare: #5c7370;

	--cn-font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	--cn-font-testo: 'EB Garamond', Georgia, 'Times New Roman', serif;

	/* Scala tipografica: fluida, così non servono breakpoint per il testo. */
	--cn-corpo: clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
	--cn-corpo-piccolo: 1rem;
	--cn-titolo-hero: clamp(2.9rem, 1.6rem + 6.4vw, 6.4rem);
	--cn-titolo-sezione: clamp(2.1rem, 1.3rem + 3.4vw, 3.8rem);
	--cn-titolo-manifesto: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem);
	--cn-titolo-camera: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem);
	--cn-titolo-voce: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	--cn-cifra: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
	--cn-occhiello-corpo: 0.76rem;
	--cn-etichetta: 0.82rem;

	/* Misure. */
	--cn-max-width: 76rem;
	--cn-gutter: clamp(1.25rem, 5vw, 4.5rem);
	--cn-sezione-gap: clamp(4rem, 8vw, 8.5rem);
	--cn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cn-transizione: 320ms var(--cn-ease);
	--cn-filetto: 1px;
	--cn-anello-sporgenza: 0.35rem;
	--cn-radius: 0;
}

/* ---------- 3. Basi ---------- */

body {
	background-color: var(--cn-fondo);
	color: var(--cn-inchiostro);
	font-family: var(--cn-font-testo);
	font-size: var(--cn-corpo);
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Grana di carta: toglie la piattezza al fondo pieno senza pesare un byte in
   più di quelli che vedi. Sopra tutto, ma trasparente ai clic. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--cn-font-display);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-wrap: balance;
}

/* Il testo corrente evita la parola sola sull'ultima riga; i testi brevi
   (sottotitoli, intro, note) si bilanciano come i titoli, perché su due o tre
   righe la riga corta si nota di più. */
body {
	text-wrap: pretty;
}

.cn-hero__sotto,
.cn-intro__sotto,
.cn-sezione__intro,
.cn-banda__testo,
.cn-banda__nota,
.cn-contatti__nota,
.cn-lista-attesa__nota,
.cn-mappa__nota,
.cn-prenota__nota {
	text-wrap: balance;
}

/* I link dentro il testo sono l'unico posto dove entra il verde mare. Nav,
   bottoni e footer restano sul filetto in currentColor come nel prototipo. */
.entry-content a:not(.cn-bottone):not(.bottone),
.cn-testo a {
	color: var(--cn-verde-mare);
	text-decoration-thickness: var(--cn-filetto);
	text-underline-offset: 0.22em;
	transition: color var(--cn-transizione);
}

.entry-content a:not(.cn-bottone):not(.bottone):hover,
.cn-testo a:hover {
	color: var(--cn-noce);
}

/* ---------- 4. Impianto delle sezioni ---------- */

/*
 * L'alias `.wrap` esiste perché è il nome che la colonna centrale ha nel
 * prototipo. Kadence però chiama `wrap` anche il suo #inner-wrap, che avvolge
 * tutta la pagina: senza l'esclusione le fasce a tutta larghezza (bande, fondi
 * alternati, hero) resterebbero strette come il testo.
 */
.cn-wrap,
.wrap:not(#inner-wrap) {
	width: min(100% - var(--cn-gutter) * 2, var(--cn-max-width));
	margin-inline: auto;
}

.cn-sezione,
.sezione {
	position: relative;
	padding-block: var(--cn-sezione-gap);
}

.cn-sezione--alt,
.sezione--alt {
	background-color: var(--cn-fondo-alt);
}

.cn-sezione--chiara,
.sezione--chiara {
	background-color: var(--cn-superficie);
}

.cn-sezione--scura,
.sezione--scura {
	background-color: var(--cn-scuro);
	color: var(--cn-panna);
}

.cn-sezione--scura h1,
.cn-sezione--scura h2,
.cn-sezione--scura h3,
.sezione--scura h1,
.sezione--scura h2,
.sezione--scura h3 {
	color: var(--cn-panna);
}

/* No smaller phone value on purpose: the prototype keeps the 2.6rem floor at
   390 too. A 2rem phone override here was the 10px gap between home and /demo/
   on camere, casa and dintorni. */
.cn-sezione__testa {
	max-width: 44rem;
	margin-bottom: clamp(2.6rem, 6vw, 4.5rem);
}

.cn-sezione__titolo {
	font-size: var(--cn-titolo-sezione);
	text-wrap: balance;
	margin-bottom: 0.4em;
}

.cn-sezione__intro {
	color: var(--cn-inchiostro-tenue);
	max-width: 50ch;
	margin: 0;
}

/* ---------- 5. Componenti condivisi ---------- */

.cn-occhiello,
.occhiello {
	display: block;
	font-family: var(--cn-font-testo);
	font-size: var(--cn-occhiello-corpo);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--cn-rovere-miele);
	margin: 0 0 1.4rem;
}

.cn-occhiello--chiaro,
.occhiello--chiaro {
	color: rgba(245, 242, 238, 0.82);
}

.cn-bottone,
.bottone {
	--cn-bottone-fondo: var(--cn-accento);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0.95rem 2rem;
	background-color: var(--cn-bottone-fondo);
	color: var(--cn-panna);
	border: var(--cn-filetto) solid var(--cn-bottone-fondo);
	border-radius: var(--cn-radius);
	font-family: var(--cn-font-testo);
	font-size: var(--cn-etichetta);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cn-transizione), color var(--cn-transizione), border-color var(--cn-transizione);
}

.cn-bottone--vuoto,
.bottone--vuoto {
	--cn-bottone-fondo: transparent;
	color: inherit;
	border-color: var(--cn-bordo);
}

.cn-bottone--vuoto:hover,
.bottone--vuoto:hover,
.cn-bottone--vuoto:focus-visible,
.bottone--vuoto:focus-visible {
	border-color: currentColor;
}

.cn-bottone:not(.cn-bottone--vuoto):hover,
.bottone:not(.bottone--vuoto):hover,
.cn-bottone:not(.cn-bottone--vuoto):focus-visible,
.bottone:not(.bottone--vuoto):focus-visible {
	background-color: var(--cn-inchiostro);
	border-color: var(--cn-inchiostro);
	color: var(--cn-panna);
}

/* Anello che si stacca all'hover: il bottone non si muove, il segno gli orbita
   attorno. Preso da web-enrmor, è la firma dei bottoni del progetto. */
.cn-anello::after,
.anello::after {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--cn-filetto) solid currentColor;
	opacity: 0;
	pointer-events: none;
	transition: inset var(--cn-transizione), opacity var(--cn-transizione);
}

.cn-anello:hover::after,
.anello:hover::after,
.cn-anello:focus-visible::after,
.anello:focus-visible::after {
	inset: calc(var(--cn-anello-sporgenza) * -1);
	opacity: 0.9;
}

.cn-lift,
.lift {
	transition: transform var(--cn-transizione);
}

.cn-lift:hover,
.lift:hover {
	transform: translateY(-0.25rem);
}

/* Banda di carattere a tutta larghezza, con la foto che scorre più piano della
   pagina. L'immagine è più alta del contenitore apposta: la parallasse la
   sposta dentro il ritaglio senza scoprire i bordi. */
.cn-banda {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: min(78vh, 34rem);
	padding-block: clamp(4rem, 10vw, 8rem);
	text-align: center;
	color: var(--cn-panna);
	overflow: hidden;
}

/* Due classi: Elementor stampa `.elementor img { height: auto }` e con una
   classe sola la foto tornerebbe alle sue proporzioni, uscendo dal ritaglio
   della parallasse. */
.cn-banda .cn-banda__foto {
	position: absolute;
	inset: -12% 0;
	z-index: -2;
	width: 100%;
	height: 124%;
	object-fit: cover;
	will-change: transform;
}

.cn-banda::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(120% 90% at 50% 50%, rgba(20, 14, 10, 0.66) 0%, rgba(20, 14, 10, 0.44) 55%, rgba(20, 14, 10, 0.6) 100%);
}

.cn-banda__testo {
	width: min(100% - var(--cn-gutter) * 2, 44rem);
}

.cn-banda__frase {
	font-family: var(--cn-font-display);
	font-weight: 300;
	font-size: var(--cn-titolo-manifesto);
	line-height: 1.12;
	text-wrap: balance;
	margin: 0 0 1rem;
	text-shadow: 0 0.12em 1.2em rgba(0, 0, 0, 0.4);
}

.cn-banda__nota {
	font-size: 1.02rem;
	color: rgba(245, 242, 238, 0.85);
	max-width: 46ch;
	margin: 0 auto;
}

/* Comparsa progressiva. La classe .js la mette cocoon.js: senza JavaScript il
   contenuto è visibile e basta, non nascosto per sempre. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(0.9rem);
	transition: opacity 800ms var(--cn-ease), transform 800ms var(--cn-ease);
}

.js [data-reveal].visibile {
	opacity: 1;
	transform: none;
}

/* ---------- 6. Testata (Kadence) ---------- */

/* Kadence disegna la testata: qui si aggiunge solo quello che la sua interfaccia
   non espone. Il resto (altezza, colori, sticky, trasparenza) sono theme mod. */

.site-header-row-container.item-is-stuck .site-header-row-container-inner {
	backdrop-filter: blur(8px);
	border-bottom: var(--cn-filetto) solid var(--cn-bordo);
}

#masthead .header-navigation .header-menu-container > ul > li > a {
	font-size: var(--cn-etichetta);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Il logo del cliente è nero con alpha: sopra la foto dell'hero si rovescia in
   bianco, come nel prototipo. Appena la testata si posa torna nero.
   La riga mobile di Kadence è un markup a parte e non ha la classe
   `site-header-row-container` della riga desktop: si aggancia per id, e lo
   stato "posata" si toglie con una regola dopo invece che con un :not(). */
body.transparent-header #main-header .site-branding img,
body.mobile-transparent-header #mobile-header .site-branding img {
	filter: invert(1);
	transition: filter var(--cn-transizione);
}

body.transparent-header #main-header .item-is-stuck .site-branding img,
body.mobile-transparent-header #mobile-header .item-is-stuck .site-branding img {
	filter: none;
}

/* L'ultima voce del menu è la chiamata all'azione: nel prototipo è un bottone
   vuoto, non un link. La classe la mette configure-kadence.php sulla voce. */
#masthead .header-navigation .menu-item.cn-voce-cta > a {
	position: relative;
	padding: 0.7rem 1.4rem;
	border: var(--cn-filetto) solid var(--cn-bordo);
	transition: border-color var(--cn-transizione);
}

#masthead .header-navigation .menu-item.cn-voce-cta > a:hover,
#masthead .header-navigation .menu-item.cn-voce-cta > a:focus-visible {
	border-color: currentColor;
}

body.transparent-header #masthead .site-header-row-container:not(.item-is-stuck) .menu-item.cn-voce-cta > a {
	border-color: rgba(245, 242, 238, 0.55);
}

/* Prenota on the phone row: Kadence's mobile-button item dressed like the
   desktop cn-voce-cta, with the prototype's phone padding. Same light/dark
   switch as the mobile logo above: light over the hero, dark once stuck. */
#masthead .mobile-header-button-wrap .mobile-header-button {
	padding: 0.7rem 1.2rem;
	font-family: var(--cn-font-testo);
	font-size: var(--cn-etichetta);
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cn-inchiostro);
	border: var(--cn-filetto) solid var(--cn-bordo);
	border-radius: var(--cn-radius);
	box-shadow: none;
	transition: color var(--cn-transizione), border-color var(--cn-transizione);
}

#masthead .mobile-header-button-wrap .mobile-header-button:hover {
	border-color: currentColor;
	box-shadow: none;
}

body.mobile-transparent-header #mobile-header .mobile-header-button-wrap .mobile-header-button {
	color: var(--cn-panna);
	border-color: rgba(245, 242, 238, 0.55);
}

body.mobile-transparent-header #mobile-header .item-is-stuck .mobile-header-button-wrap .mobile-header-button {
	color: var(--cn-inchiostro);
	border-color: var(--cn-bordo);
}

/* ---------- 7. Piede (Kadence) ---------- */

#colophon .widget-title,
#colophon .cn-pie-dove h2 {
	font-family: var(--cn-font-testo);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cn-inchiostro);
	margin-bottom: 0.9rem;
}

#colophon,
#colophon p {
	color: var(--cn-inchiostro-tenue);
	font-size: 0.98rem;
}

.cn-pie-logo {
	width: 9.5rem;
	height: auto;
	margin-bottom: 1.2rem;
}

/* Nel prototipo le pagine del piede sono una colonna, non una riga. */
#footer-navigation .footer-menu-container > ul {
	display: grid;
	justify-content: start;
	gap: 0.4rem;
}

#colophon a {
	text-decoration: none;
	border-bottom: var(--cn-filetto) solid transparent;
	transition: border-color var(--cn-transizione);
}

#colophon a:hover {
	border-bottom-color: currentColor;
}

.site-bottom-footer-inner-wrap {
	font-size: var(--cn-etichetta);
	letter-spacing: 0.06em;
}

/* Facciata della mappa: finché nessuno preme, verso OpenStreetMap non parte
   nessuna richiesta e nessun cookie. L'iframe lo inserisce cocoon.js al clic. */
.cn-mappa {
	margin-block: 1.2rem;
}

.cn-mappa__avvio {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.4rem;
	background-color: transparent;
	color: inherit;
	border: var(--cn-filetto) solid var(--cn-bordo);
	border-radius: var(--cn-radius);
	font-family: var(--cn-font-testo);
	font-size: var(--cn-etichetta);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color var(--cn-transizione);
}

.cn-mappa__avvio:hover {
	border-color: currentColor;
}

.cn-mappa__nota {
	margin: 0.7rem 0 0;
	font-size: 0.86rem;
}

.cn-mappa__telaio {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: var(--cn-filetto) solid var(--cn-bordo);
}

/* ---------- 8. Movimento ---------- */

/*
 * Sito "leggermente più vivo" (richiesta del cliente del 04/10): sette
 * movimenti discreti, tutti su transform e opacity, quindi zero layout shift.
 * Il fade allo scroll sta sopra (.js [data-reveal]) e in cocoon.js; hover delle
 * foto nei CSS dei widget, dietro `hover: hover`. Qui: hero, transizione fra
 * pagine, linea del menu, menu mobile, freccia dei bottoni. Peso aggiunto
 * complessivo (CSS + JS, senza commenti né compressione): circa 6,1 KB, di cui
 * 0,8 KB di JS.
 */

/* Hero della home: zoom lentissimo, una volta sola. `both` tiene l'ultimo
   fotogramma a fine corsa, quindi niente scatto di ritorno e niente ciclo che
   si veda ripartire. Le intro delle pagine interne non lo ricevono. */
.cn-hero .cn-hero__foto {
	will-change: transform;
	animation: cn-zoom-lento 28s cubic-bezier(0.4, 0, 0.6, 1) 0.2s both;
}

@keyframes cn-zoom-lento {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.05);
	}
}

/* Linea sotto le voci del menu desktop: il segno si disegna da sinistra e si
   ritira a destra, non occupa spazio, quindi le voci vicine non si muovono.
   Le misure seguono il padding di Kadence (0.6em ai lati) e il letter-spacing
   (0.2em in coda al testo). Il bottone Prenota ha già il suo bordo. */
#masthead .header-navigation .header-menu-container > ul > li:not(.cn-voce-cta) > a {
	position: relative;
}

#masthead .header-navigation .header-menu-container > ul > li:not(.cn-voce-cta) > a::after {
	content: '';
	position: absolute;
	left: 0.6em;
	right: 0.8em;
	bottom: 0.32em;
	height: var(--cn-filetto);
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--cn-transizione);
	pointer-events: none;
}

#masthead .header-navigation .header-menu-container > ul > li:not(.cn-voce-cta) > a:hover::after,
#masthead .header-navigation .header-menu-container > ul > li:not(.cn-voce-cta) > a:focus-visible::after,
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item:not(.cn-voce-cta) > a::after,
#masthead .header-navigation .header-menu-container > ul > li.current-menu-ancestor:not(.cn-voce-cta) > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Freccia dei bottoni: disegnata con una maschera, perché il glifo non sta nel
   subset latin di EB Garamond. A riposo è invisibile e nel padding destro:
   il bottone non cambia misura. Compare e scorre di pochi pixel in hover e
   con la tastiera. */
.cn-bottone::before,
#masthead .header-navigation .menu-item.cn-voce-cta > a::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.7rem;
	width: 0.8rem;
	height: 0.8rem;
	margin-top: -0.4rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0;
	transform: translateX(-0.4rem);
	transition: opacity var(--cn-transizione), transform var(--cn-transizione);
	pointer-events: none;
}

#masthead .header-navigation .menu-item.cn-voce-cta > a::before {
	right: 0.5rem;
	width: 0.7rem;
	height: 0.7rem;
	margin-top: -0.35rem;
}

.cn-bottone:hover::before,
.cn-bottone:focus-visible::before,
#masthead .header-navigation .menu-item.cn-voce-cta > a:hover::before,
#masthead .header-navigation .menu-item.cn-voce-cta > a:focus-visible::before {
	opacity: 1;
	transform: none;
}

/* Menu mobile. Il pannello a tendina è quello di Kadence: si lavora sul suo
   markup, senza copiare template. Kadence toglie `show-drawer` 250 ms dopo la
   chiusura, quindi la chiusura resta sotto quel tempo (transizioni sullo stato
   base) e solo l'apertura è più lenta (transizioni sullo stato `.active`).
   Pannello e velo sfumano con un piccolo scarto laterale, le voci entrano una
   dopo l'altra. L'id nel selettore vince la cascata di Kadence senza !important. */
#mobile-drawer.popup-drawer .drawer-inner {
	transform: translateX(1.6rem);
	transition: transform 220ms ease-in, opacity 200ms ease-in;
}

#mobile-drawer.popup-drawer.active .drawer-inner {
	transform: translateX(0);
	transition: transform 520ms var(--cn-ease), opacity 460ms var(--cn-ease);
}

#mobile-drawer.popup-drawer .drawer-overlay {
	transition: opacity 200ms ease-in;
}

#mobile-drawer.popup-drawer.active .drawer-overlay {
	transition: opacity 460ms var(--cn-ease);
}

#mobile-drawer .mobile-navigation li {
	opacity: 0;
	transform: translateY(0.7rem);
	transition: opacity 160ms ease-in, transform 160ms ease-in;
}

#mobile-drawer.active .mobile-navigation li {
	opacity: 1;
	transform: none;
	transition: opacity 520ms var(--cn-ease), transform 520ms var(--cn-ease);
	transition-delay: calc(140ms + var(--cn-voce, 0) * 60ms);
}

#mobile-drawer .mobile-navigation li:nth-child(2) {
	--cn-voce: 1;
}

#mobile-drawer .mobile-navigation li:nth-child(3) {
	--cn-voce: 2;
}

#mobile-drawer .mobile-navigation li:nth-child(4) {
	--cn-voce: 3;
}

#mobile-drawer .mobile-navigation li:nth-child(5) {
	--cn-voce: 4;
}

#mobile-drawer .mobile-navigation li:nth-child(n + 6) {
	--cn-voce: 5;
}

/* Transizione fra pagine (View Transitions cross-document): dissolvenza del
   documento intero, tutta del browser. Chi non la supporta ignora la regola e
   naviga come sempre; con meno movimento la regola non c'è nemmeno. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 280ms;
		animation-timing-function: var(--cn-ease);
	}
}

/* ---------- 9. Chi chiede meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.cn-hero .cn-hero__foto {
		animation: none;
		will-change: auto;
	}

	.cn-lift:hover,
	.lift:hover {
		transform: none;
	}

	.cn-anello:hover::after,
	.anello:hover::after,
	.cn-anello:focus-visible::after,
	.anello:focus-visible::after {
		inset: 0;
	}

	.cn-bottone,
	.cn-bottone::before,
	#masthead .header-navigation .menu-item.cn-voce-cta > a,
	#masthead .header-navigation .menu-item.cn-voce-cta > a::before,
	#masthead .header-navigation .header-menu-container > ul > li:not(.cn-voce-cta) > a::after {
		transition: none;
	}

	#mobile-drawer.popup-drawer,
	#mobile-drawer.popup-drawer .drawer-inner,
	#mobile-drawer.popup-drawer.active .drawer-inner,
	#mobile-drawer.popup-drawer .drawer-overlay,
	#mobile-drawer.popup-drawer.active .drawer-overlay,
	#mobile-drawer .mobile-navigation li,
	#mobile-drawer.active .mobile-navigation li {
		transition: none;
	}

	#mobile-drawer .mobile-navigation li {
		opacity: 1;
		transform: none;
	}
}