/* ==========================================================================
   V4-CINEMATIC-EXPERIENCE-2026-07-05 — Cinematic layer Electronic Solution
   ==========================================================================
   Layer ADDITIVO sopra final-renewal.css + v3-experience.css + CSS DB
   (Customizer/widget, stampati DOPO questo foglio: dove serve vincere si usa
   specificità superiore html.es-v4 … e !important solo dove il DB lo usa già).

   PRINCIPI
   - namespace v4-* per classi/variabili/keyframes: zero collisioni con
     es-* / v3-* / reveal / es-rv / esRise / GSAP;
   - progressive enhancement: le classi es-v4 / es-v4-motion / es-v4-tilt
     vengono aggiunte SOLO da v4-cinematic-experience.js → senza JS il sito
     resta identico a oggi (nessun contenuto nascosto da questo foglio);
   - il motore reveal resta quello del sito (es-rv/es-rv-in, IO nel widget DB):
     qui viene POTENZIATO in prospettiva 3D, non duplicato; il fallback CSS
     scroll-timeline (esRise) viene spento sotto es-v4-motion per avere UN
     solo motore coerente su tutti i browser;
   - watchdog-safety: mai transform inline su nodi hero (li pulisce il
     watchdog GSAP del sito) → tilt/parallax via CSS custom property;
   - solo transform/opacity nelle animazioni continue; box-shadow animata
     solo su micro-elementi singoli (CTA, ring);
   - ambient (orbe/scan/dust/depth) SOLO desktop ≥1025px con hover reale,
     iniettato da JS; mobile: nessuna animazione continua;
   - prefers-reduced-motion: tutto il layer si spegne (sezione 12);
   - nessuna risorsa esterna, nessuna libreria, nessuna immagine.
   Rollback: eliminare questo file + v4-cinematic-experience.js + il blocco
   enqueue V4 in functions.php (la V3 riprende identica da sola).

   INDICE
   01. Variabili V4
   02. P0 — Barra di lettura multilivello (#es-v4-progress) + spegnimento legacy
   03. P0 — Back-to-top: ring conico potenziato a doppio livello
   04. Header V4 (edge luminosa, scrolled, nav, CTA menu, dropdown, logo)
   05. Reveal cinematico (potenzia es-rv; spegne esRise; wrapper .reveal via v3-*)
   06. Ambient hero (orbe, scan-line, dust — iniettate da JS)
   07. Tilt 3D (card, moduli, figura hero — html.es-v4-tilt)
   08. Depth layer sezioni scure (.v4-depth — iniettato da JS)
   09. Footer V4 (hairline animata, profondità, ingresso)
   10. CTA energy + rifiniture visual system
   11. Guardie mobile/touch
   12. Riduzione movimento (kill-switch totale V4)
   13. Ridichiarazione variabili di sicurezza
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Variabili
   Ogni uso nel foglio ha comunque fallback letterale (lezione QA V3).
   -------------------------------------------------------------------------- */
:root {
	--v4-gold: #d6a84f;
	--v4-gold-hi: #e9c87e;
	--v4-gold-deep: #a77c39;
	--v4-cyan: #00aeef;
	--v4-ink: #071a2f;
	--v4-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--v4-progress: 0; /* 0..1, scritta da v4-cinematic-experience.js */
}


/* --------------------------------------------------------------------------
   02. V4-CINEMATIC-EXPERIENCE-2026-07-05 — P0: barra di lettura multilivello
   UNA barra fissa in cima, tre livelli di luce (glow diffuso + nucleo 4px
   oro→ciano + testa "cometa"), leggibile su fondi chiari e scuri, visibile
   anche su mobile (dove #es-hprog sparisce con l'header non-sticky).
   Il markup (#es-v4-progress + 3 span) è INIETTATO da JS: senza JS non esiste
   e restano gli indicatori attuali del sito.
   Gli indicatori legacy vengono spenti SOLO quando V4 è attiva (html.es-v4):
   - linea V3 (body::before di v3-experience.css);
   - #es-hprog del Customizer (il suo JS DB continua a scrivere il transform
     su un elemento nascosto: innocuo, zero contese).
   Rollback: rimuovere questa sezione (tornano le barre legacy).
   -------------------------------------------------------------------------- */
html.es-v4 body::before {
	content: none !important; /* linea di progresso V3: sostituita */
}
html.es-v4 #es-hprog {
	display: none !important; /* barra hairline del Customizer: sostituita */
}

#es-v4-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	z-index: 99991; /* sopra header (99990), sotto dropdown (99999) e modal (100000) */
	pointer-events: none;
	contain: strict; /* nessun impatto layout sul resto della pagina */
}
/* Admin bar WordPress (solo utenti loggati): la barra scende sotto di essa */
body.admin-bar #es-v4-progress {
	top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 782px) {
	body.admin-bar #es-v4-progress {
		top: 46px;
	}
}
/* binario: hairline neutra che rende leggibile il "restante" su ogni fondo */
#es-v4-progress::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(122, 143, 170, 0.22), rgba(122, 143, 170, 0.14));
}
/* livello 1 — glow diffuso (nessun filter: gradiente morbido, compositor-only) */
#es-v4-progress .v4p-glow {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 6px;
	transform: scaleX(var(--v4-progress, 0));
	transform-origin: left center;
	background: linear-gradient(90deg,
		rgba(167, 124, 57, 0.0),
		rgba(214, 168, 79, 0.38) 45%,
		rgba(0, 174, 239, 0.42));
	filter: none;
	opacity: 0.9;
}
/* livello 2 — nucleo nitido con doppio contorno luce (leggibile su chiaro E scuro) */
#es-v4-progress .v4p-core {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	transform: scaleX(var(--v4-progress, 0));
	transform-origin: left center;
	background: linear-gradient(90deg,
		var(--v4-gold-deep, #a77c39),
		var(--v4-gold, #d6a84f) 38%,
		var(--v4-gold-hi, #e9c87e) 62%,
		var(--v4-cyan, #00aeef));
	box-shadow:
		0 0 0 0.5px rgba(255, 255, 255, 0.35),
		0 1px 10px rgba(214, 168, 79, 0.55),
		0 0 18px rgba(0, 174, 239, 0.30);
}
/* livello 3 — testa "cometa": punto luminoso sull'estremità della barra.
   translateX su var: compositor-friendly (usa --es-vw, già settata dal child). */
#es-v4-progress .v4p-head {
	position: absolute;
	top: 2px;
	left: -7px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: radial-gradient(circle,
		#ffffff 0%,
		var(--v4-gold-hi, #e9c87e) 34%,
		rgba(233, 200, 126, 0.35) 58%,
		rgba(233, 200, 126, 0) 72%);
	transform: translateX(calc(var(--v4-progress, 0) * var(--es-vw, 100vw)));
	will-change: transform;
}
/* respiro della cometa: SOLO con motion consentita */
html.es-v4-motion #es-v4-progress .v4p-head::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(233, 200, 126, 0) 65%);
	animation: v4-head-pulse 2.6s ease-in-out infinite;
}
@keyframes v4-head-pulse {
	0%, 100% { transform: scale(1); opacity: 0.55; }
	50%      { transform: scale(1.55); opacity: 0.95; }
}


/* --------------------------------------------------------------------------
   03. V4-CINEMATIC-EXPERIENCE-2026-07-05 — P0: ring back-to-top potenziato
   Doppio livello: nucleo conico nitido oro→ciano (3px) + alone conico
   sfocato che segue lo stesso progresso. Pilotato da --v4-progress (fallback
   --v3-progress: compatibile anche se resta solo il JS V3).
   Specificità superiore alla regola V3 (html.es-v4 + doppia classe).
   Rollback: rimuovere la sezione (torna il ring V3 sottile).
   -------------------------------------------------------------------------- */
html.es-v4 a.generate-back-to-top.generate-back-to-top {
	overflow: visible;
}
html.es-v4 a.generate-back-to-top.generate-back-to-top::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 17px;
	padding: 3px;
	background: conic-gradient(
		var(--v4-gold-hi, #e9c87e),
		var(--v4-gold, #d6a84f) calc(var(--v4-progress, var(--v3-progress, 0)) * 180deg),
		var(--v4-cyan, #00aeef) calc(var(--v4-progress, var(--v3-progress, 0)) * 360deg),
		rgba(255, 255, 255, 0.16) calc(var(--v4-progress, var(--v3-progress, 0)) * 360deg));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}
/* alone luminoso (secondo livello): stesso conico, sfocato e tenue */
html.es-v4 a.generate-back-to-top.generate-back-to-top::after {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 20px;
	background: conic-gradient(
		rgba(233, 200, 126, 0.55),
		rgba(214, 168, 79, 0.5) calc(var(--v4-progress, var(--v3-progress, 0)) * 180deg),
		rgba(0, 174, 239, 0.5) calc(var(--v4-progress, var(--v3-progress, 0)) * 360deg),
		transparent calc(var(--v4-progress, var(--v3-progress, 0)) * 360deg));
	filter: blur(7px);
	opacity: 0.65;
	pointer-events: none;
	z-index: -1;
}
/* stati hover/focus molto evidenti (il fondo bottone resta gestito da V2/V3) */
html.es-v4 a.generate-back-to-top.generate-back-to-top:hover,
html.es-v4 a.generate-back-to-top.generate-back-to-top:focus-visible {
	box-shadow:
		0 0 0 2px rgba(233, 200, 126, 0.65),
		0 10px 30px rgba(3, 8, 18, 0.45),
		0 0 26px rgba(214, 168, 79, 0.45);
}
html.es-v4 a.generate-back-to-top.generate-back-to-top:focus-visible {
	outline: 2px solid var(--es-blue-600, #1b5fa8);
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   04. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Header V4
   I pseudo-elementi dell'header sono uccisi dal DB (content:none!important):
   l'edge luminosa è un elemento FIGLIO iniettato da JS (.v4-hdr-edge),
   come già fa #es-hprog. Il glass di base resta quello del Customizer.
   Rollback: rimuovere la sezione (header = stato attuale live).
   -------------------------------------------------------------------------- */
.v4-hdr-edge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	z-index: 5; /* dentro l'header; #es-hprog (z6) è comunque nascosto */
	pointer-events: none;
	background: linear-gradient(90deg,
		transparent,
		rgba(214, 168, 79, 0.85) 22%,
		rgba(233, 200, 126, 0.95) 50%,
		rgba(214, 168, 79, 0.85) 78%,
		transparent);
	box-shadow: 0 1px 9px rgba(214, 168, 79, 0.35);
	overflow: hidden;
}
/* riflesso orizzontale che scorre lungo l'edge (solo motion + desktop) */
html.es-v4-motion .v4-hdr-edge::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 22%;
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.85) 50%,
		rgba(255, 255, 255, 0) 100%);
	transform: translateX(-120%);
	animation: v4-edge-sweep 7.5s var(--v4-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) infinite;
	will-change: transform;
}
@keyframes v4-edge-sweep {
	0%       { transform: translateX(-120%); opacity: 0; }
	8%       { opacity: 1; }
	38%      { transform: translateX(560%); opacity: 0.9; }
	46%, 100% { transform: translateX(560%); opacity: 0; }
}

/* stato scrolled più profondo (vince su HEADER-STATE-FINAL per specificità) */
html.es-v4 body.es-header-scrolled .site-header,
html.es-v4.v4-hdr-scrolled body .site-header {
	box-shadow:
		0 14px 44px rgba(7, 26, 47, 0.15),
		0 2px 0 rgba(214, 168, 79, 0.28),
		0 22px 70px rgba(7, 26, 47, 0.12) !important;
	border-bottom-color: rgba(214, 168, 79, 0.72) !important;
}

/* underline menu: più luminosa e leggermente più spessa (geometria DB intatta) */
html.es-v4 .main-navigation .main-nav ul li a::after {
	height: 2.5px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		var(--v4-gold-deep, #a77c39),
		var(--v4-gold-hi, #e9c87e) 55%,
		var(--v4-gold, #d6a84f));
	box-shadow: 0 0 9px rgba(214, 168, 79, 0.55), 0 0 2px rgba(233, 200, 126, 0.8);
}
/* la CTA del menu non ha underline (regola DB content:none!important: intatta) */

/* CTA "Contatti" (pill DB es-nav-cta): respiro luminoso in idle, spento su
   hover/focus dove riprendono gli stati DB (filter/transform/box-shadow) */
@media (min-width: 1025px) {
	html.es-v4-motion .main-navigation .main-nav > ul > li.es-nav-cta > a {
		animation: v4-cta-glow 4.5s ease-in-out infinite;
	}
	html.es-v4-motion .main-navigation .main-nav > ul > li.es-nav-cta > a:hover,
	html.es-v4-motion .main-navigation .main-nav > ul > li.es-nav-cta > a:focus-visible {
		animation: none;
	}
}
@keyframes v4-cta-glow {
	0%, 100% { box-shadow: 0 6px 18px rgba(167, 124, 57, 0.32); }
	50%      { box-shadow: 0 6px 18px rgba(167, 124, 57, 0.32), 0 0 22px rgba(214, 168, 79, 0.55); }
}

/* dropdown Servizi: cornice oro + ombra più cinematografica */
html.es-v4 .main-navigation .main-nav ul ul.sub-menu {
	border-top-color: var(--v4-gold, #d6a84f);
	box-shadow:
		0 24px 54px rgba(3, 8, 18, 0.30),
		0 0 0 1px rgba(214, 168, 79, 0.22) !important;
}
html.es-v4 .main-navigation .main-nav ul ul.sub-menu li a {
	transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease, box-shadow 0.25s ease;
}
html.es-v4 .main-navigation .main-nav ul ul.sub-menu li a:hover,
html.es-v4 .main-navigation .main-nav ul ul.sub-menu li a:focus {
	box-shadow: inset 3px 0 0 var(--v4-gold, #d6a84f);
}

/* logo: micro-risposta luminosa al passaggio (niente transform: zero conflitti
   con lo scale dello stato scrolled DB) */
html.es-v4 .site-header .site-logo img,
html.es-v4 .site-header .header-image {
	transition: filter 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
	html.es-v4 .site-header .site-logo a:hover img,
	html.es-v4 .site-header .site-logo a:focus-visible img {
		filter: brightness(1.07) drop-shadow(0 2px 10px rgba(214, 168, 79, 0.35));
	}
}


/* --------------------------------------------------------------------------
   05. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Reveal cinematico
   Il motore resta es-rv/es-rv-in (IO del widget DB). Qui:
   (a) sotto es-v4-motion il fallback CSS scroll-timeline (esRise) viene
       SPENTO: un solo motore per elemento su tutti i browser, e i transform
       degli stati es-rv non vengono più annullati dall'animation fill both;
       i wrapper .reveal orfani vengono rivelati dal JS V4 con le classi
       v3-prep/v3-in (CSS già caricato da v3-experience.css);
   (b) gli stati es-rv dei componenti "block" guadagnano prospettiva 3D
       (rotateX + scale): immagini e card entrano in profondità.
   SICUREZZA: opacity:0 qui esiste SOLO su stati es-rv, che il sito usa già
   oggi (il motore IO del DB li rivela; senza JS la classe es-rv non viene
   MAI aggiunta e nulla è nascosto). Il transition-delay a stagger resta
   quello inline del DB (longhand inline vince sullo shorthand di questo CSS).
   Rollback: rimuovere la sezione (reveal = stato attuale live).
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	html.es-v4-motion .es .reveal,
	html.es-v4-motion .es .stagger > * {
		animation: none !important; /* pattern già usato dal DB con html.es-gsap */
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* ingresso in prospettiva: card e blocchi equivalenti */
	html.es-v4-motion .es .card.es-rv,
	html.es-v4-motion .es .es-mod.es-rv,
	html.es-v4-motion .es .step.es-rv,
	html.es-v4-motion .es .agent.es-rv,
	html.es-v4-motion .es .fn.es-rv,
	html.es-v4-motion .es .qk.es-rv {
		opacity: 0;
		transform: perspective(1000px) translateY(34px) rotateX(7deg) scale(0.975);
		transform-origin: center 85%;
		transition: opacity 0.7s ease, transform 0.9s var(--v4-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	}
	/* immagini/figure: avvicinamento con leggera rotazione */
	html.es-v4-motion .es .s:not(.hero) .es-fig.es-rv {
		opacity: 0;
		transform: perspective(1200px) translateY(30px) rotateX(4deg) scale(0.96);
		transform-origin: center 80%;
		transition: opacity 0.75s ease, transform 1s var(--v4-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	}
	html.es-v4-motion .es .card.es-rv.es-rv-in,
	html.es-v4-motion .es .es-mod.es-rv.es-rv-in,
	html.es-v4-motion .es .step.es-rv.es-rv-in,
	html.es-v4-motion .es .agent.es-rv.es-rv-in,
	html.es-v4-motion .es .fn.es-rv.es-rv-in,
	html.es-v4-motion .es .qk.es-rv.es-rv-in,
	html.es-v4-motion .es .s:not(.hero) .es-fig.es-rv.es-rv-in {
		opacity: 1;
		transform: none;
	}
	/* su mobile la prospettiva si riduce a un ingresso più leggero */
	@media (max-width: 1024px) {
		html.es-v4-motion .es .card.es-rv,
		html.es-v4-motion .es .es-mod.es-rv,
		html.es-v4-motion .es .step.es-rv,
		html.es-v4-motion .es .agent.es-rv,
		html.es-v4-motion .es .fn.es-rv,
		html.es-v4-motion .es .qk.es-rv,
		html.es-v4-motion .es .s:not(.hero) .es-fig.es-rv {
			transform: translateY(22px) scale(0.985);
		}
	}
}


/* --------------------------------------------------------------------------
   06. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Ambient hero
   Wrapper .v4-fx (iniettato da JS SOLO desktop+motion) dentro .es .hero:
   contiene 3 orbe a profondità diverse, una scan-line e la "polvere" tecnica.
   Il wrapper è agganciato allo scroll (parallax via --v4-hp, impostata dal
   JS solo mentre l'hero è in viewport): profondità reale, zero layout.
   L'hero clippa tutto (overflow:hidden da v3-experience.css, ancora caricato);
   il contenuto resta sopra (.w a z1/z2). aria-hidden + pointer-events:none.
   Rollback: rimuovere sezione (il JS V4 senza CSS inietta elementi invisibili).
   -------------------------------------------------------------------------- */
.v4-fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	transform: translate3d(0, calc(var(--v4-hp, 0) * -34px), 0) scale(calc(1 + var(--v4-hp, 0) * 0.05));
	transform-origin: center top;
	will-change: transform;
}
.v4-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(46px);
	opacity: 0.17;
	will-change: transform;
}
.v4-orb--gold {
	width: 380px;
	height: 380px;
	right: -90px;
	top: -70px;
	background: radial-gradient(circle, rgba(233, 200, 126, 0.9), transparent 65%);
	animation: v4-drift-a 26s ease-in-out infinite alternate;
}
.v4-orb--cyan {
	width: 300px;
	height: 300px;
	left: -70px;
	bottom: -90px;
	background: radial-gradient(circle, rgba(0, 174, 239, 0.75), transparent 65%);
	animation: v4-drift-b 33s ease-in-out infinite alternate;
}
.v4-orb--navy {
	width: 460px;
	height: 460px;
	left: 30%;
	top: -180px;
	background: radial-gradient(circle, rgba(36, 114, 200, 0.55), transparent 62%);
	opacity: 0.14;
	animation: v4-drift-c 41s ease-in-out infinite alternate;
}
@keyframes v4-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-46px, 40px, 0) scale(1.14); }
}
@keyframes v4-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(42px, -32px, 0) scale(1.1); }
}
@keyframes v4-drift-c {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(60px, 26px, 0); }
}
/* scan-line: lama di luce verticale che attraversa l'hero (lenta, discreta) */
.v4-scan {
	position: absolute;
	top: -12%;
	bottom: -12%;
	left: 0;
	width: 130px;
	background: linear-gradient(90deg,
		rgba(233, 200, 126, 0) 0%,
		rgba(233, 200, 126, 0.10) 45%,
		rgba(255, 255, 255, 0.12) 50%,
		rgba(233, 200, 126, 0.10) 55%,
		rgba(233, 200, 126, 0) 100%);
	transform: translateX(-160px) skewX(-14deg);
	animation: v4-scan-sweep 13s var(--v4-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) infinite;
	will-change: transform;
}
@keyframes v4-scan-sweep {
	0%        { transform: translateX(-180px) skewX(-14deg); opacity: 0; }
	6%        { opacity: 1; }
	46%       { transform: translateX(calc(var(--es-vw, 100vw) + 120px)) skewX(-14deg); opacity: 0.85; }
	52%, 100% { transform: translateX(calc(var(--es-vw, 100vw) + 120px)) skewX(-14deg); opacity: 0; }
}
/* polvere tecnica: 12 punti luce in deriva lentissima (un solo nodo) */
.v4-dust {
	position: absolute;
	top: 18%;
	left: 12%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(233, 200, 126, 0.8);
	box-shadow:
		9vw 4vh 0 -0.5px rgba(233, 200, 126, 0.55),
		21vw -2vh 0 0 rgba(0, 174, 239, 0.45),
		33vw 9vh 0 -1px rgba(255, 255, 255, 0.4),
		46vw 1vh 0 0 rgba(233, 200, 126, 0.5),
		57vw 12vh 0 -1px rgba(0, 174, 239, 0.4),
		66vw -4vh 0 0 rgba(233, 200, 126, 0.45),
		74vw 7vh 0 -0.5px rgba(255, 255, 255, 0.35),
		12vw 16vh 0 -1px rgba(0, 174, 239, 0.35),
		39vw 19vh 0 0 rgba(233, 200, 126, 0.4),
		62vw 22vh 0 -1px rgba(255, 255, 255, 0.3),
		83vw 15vh 0 -0.5px rgba(233, 200, 126, 0.45),
		52vw -6vh 0 -1px rgba(0, 174, 239, 0.35);
	opacity: 0.5;
	animation: v4-dust-drift 60s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes v4-dust-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-3vw, 2vh, 0); }
}


/* --------------------------------------------------------------------------
   07. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Tilt 3D interattivo
   Pilotato da v4-cinematic-experience.js via CSS custom property
   (--v4-rx/--v4-ry, aggiornate su pointermove rAF-throttled): sopravvive al
   watchdog GSAP (che rimuove solo transform/opacity inline, non le custom
   property) e vince sul translateY(-8px) hover del DB includendolo.
   ATTIVO SOLO sotto html.es-v4-tilt (desktop ≥1025px + hover fine + motion).
   - Card/moduli: tilt SOLO in :hover (fuori hover valgono gli stati es-rv);
     questa regola è DOPO la sezione 05: a parità di specificità vince il tilt
     mentre l'utente è sopra la card.
   - Figura hero: tilt continuo dolce (nessun es-rv sull'hero; GSAP anima
     clip-path e img, mai il transform del contenitore).
   Rollback: rimuovere sezione + blocco tilt del JS.
   -------------------------------------------------------------------------- */
html.es-v4-tilt .es .grid > .card:hover,
html.es-v4-tilt .es .grid > .es-mod:hover {
	transform:
		perspective(1050px)
		rotateX(var(--v4-rx, 0deg))
		rotateY(var(--v4-ry, 0deg))
		translateY(-8px); /* baseline hover DB preservata */
	transition: transform 0.16s ease-out, box-shadow 0.4s ease, border-color 0.4s ease;
	will-change: transform;
}
html.es-v4-tilt .es .hero .es-fig {
	transform:
		perspective(1200px)
		rotateX(var(--v4-rx, 0deg))
		rotateY(var(--v4-ry, 0deg));
	transition: transform 0.22s ease-out;
}
/* profondità dell'ombra durante il tilt della figura hero */
html.es-v4-tilt .es .hero .es-fig:hover {
	box-shadow: 0 34px 80px rgba(3, 8, 18, 0.5);
}


/* --------------------------------------------------------------------------
   08. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Depth layer sezioni scure
   Span .v4-depth iniettato da JS in ogni .es .s.dark NON-hero (desktop+motion):
   doppio alone radiale oro/ciano in deriva lentissima, sotto il contenuto
   (.w è a z2, il layer resta a z0 dentro l'isolation della sezione).
   Rollback: rimuovere sezione + blocco depth del JS.
   -------------------------------------------------------------------------- */
.v4-depth {
	position: absolute;
	inset: -12%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(620px 340px at 12% 18%, rgba(214, 168, 79, 0.10), transparent 60%),
		radial-gradient(560px 320px at 88% 82%, rgba(0, 174, 239, 0.08), transparent 60%);
	animation: v4-depth-drift 44s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes v4-depth-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(2.5%, 1.8%, 0) scale(1.04); }
}


/* --------------------------------------------------------------------------
   09. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Footer V4
   Potenzia i pseudo-elementi V3 del .site-footer (liberi nel DB):
   hairline oro "viva" + alone radiale più profondo + trama circuitale a
   bassissima opacità. Ingresso elegante allo scroll via classi v4-ftr
   (aggiunte SOLO da JS: senza JS footer sempre visibile).
   Rollback: rimuovere sezione (torna il footer V3).
   -------------------------------------------------------------------------- */
html.es-v4 .site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent,
		var(--v4-gold-deep, #a77c39) 18%,
		var(--v4-gold-hi, #e9c87e) 50%,
		var(--v4-gold-deep, #a77c39) 82%,
		transparent);
	background-size: 200% 100%;
	box-shadow: 0 0 12px rgba(214, 168, 79, 0.4);
	pointer-events: none;
}
@media (min-width: 1025px) {
	html.es-v4-motion .site-footer::before {
		animation: v4-ftr-line 9s ease-in-out infinite alternate;
	}
}
@keyframes v4-ftr-line {
	from { background-position: 0% 0; }
	to   { background-position: 100% 0; }
}
/* profondità: alone radiale + trama circuitale (sopra il fondo, sotto la
   percezione: opacità totale <10%, pointer-events none — pattern V3) */
html.es-v4 .site-footer::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(960px, 96%);
	height: 140px;
	background:
		radial-gradient(closest-side, rgba(233, 200, 126, 0.13), transparent),
		repeating-linear-gradient(90deg, rgba(214, 168, 79, 0.05) 0 1px, transparent 1px 72px),
		repeating-linear-gradient(0deg, rgba(214, 168, 79, 0.04) 0 1px, transparent 1px 72px);
	pointer-events: none;
}
/* ingresso del footer (classi solo da JS; prep solo se sotto la piega) */
html.es-v4-motion .site-footer .v4-ftr-prep {
	opacity: 0.001;
	transform: translateY(26px);
}
html.es-v4-motion .site-footer .v4-ftr-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s ease, transform 0.9s var(--v4-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}


/* --------------------------------------------------------------------------
   10. V4-CINEMATIC-EXPERIENCE-2026-07-05 — CTA energy + visual system
   Respiro luminoso in idle sulle CTA oro di hero e sezioni CTA (si spegne
   su hover, dove riprende il glow DB). Icone card: alone oro al passaggio
   (il ::after delle card è occupato dal DB: si usa l'icona stessa).
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	html.es-v4-motion .es .hero .btn-gold,
	html.es-v4-motion .es .s.cta .btn-gold {
		animation: v4-cta-breathe 5s ease-in-out infinite;
	}
	html.es-v4-motion .es .hero .btn-gold:hover,
	html.es-v4-motion .es .s.cta .btn-gold:hover,
	html.es-v4-motion .es .hero .btn-gold:focus-visible,
	html.es-v4-motion .es .s.cta .btn-gold:focus-visible {
		animation: none;
	}
}
@keyframes v4-cta-breathe {
	0%, 100% { box-shadow: 0 6px 18px rgba(167, 124, 57, 0.30); }
	50%      { box-shadow: 0 8px 24px rgba(167, 124, 57, 0.38), 0 0 26px rgba(214, 168, 79, 0.5); }
}
/* chip: bordo che si accende (transizione già nel DB: solo colore al hover) */
html.es-v4 .es .chip:hover {
	box-shadow: 0 4px 14px rgba(214, 168, 79, 0.25);
}


/* --------------------------------------------------------------------------
   11. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Guardie mobile/touch
   Cintura CSS oltre ai gate JS: su viewport piccoli o senza hover reale
   niente ambient/depth/tilt/shimmer; barra più sottile.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (hover: none) {
	.v4-fx,
	.v4-orb,
	.v4-scan,
	.v4-dust,
	.v4-depth {
		display: none !important;
	}
	.v4-hdr-edge::after {
		display: none;
	}
	#es-v4-progress {
		height: 4px;
	}
	#es-v4-progress .v4p-glow {
		height: 4px;
	}
	#es-v4-progress .v4p-core {
		height: 3px;
	}
	#es-v4-progress .v4p-head {
		width: 11px;
		height: 11px;
		margin-top: -5.5px;
		left: -5px;
	}
}


/* --------------------------------------------------------------------------
   12. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Riduzione movimento
   Il JS non aggiunge es-v4-motion/es-v4-tilt con reduced-motion attivo;
   questo blocco è la SECONDA cintura (pattern V3): qualunque residuo V4
   si spegne. La barra di progresso resta come informazione di stato,
   senza pulsazioni né transizioni.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.v4-fx,
	.v4-orb,
	.v4-scan,
	.v4-dust,
	.v4-depth {
		display: none !important;
	}
	.v4-hdr-edge::after,
	#es-v4-progress .v4p-head::after {
		display: none !important;
	}
	html.es-v4 .main-navigation .main-nav > ul > li.es-nav-cta > a,
	html.es-v4 .es .hero .btn-gold,
	html.es-v4 .es .s.cta .btn-gold {
		animation: none !important;
	}
	html.es-v4 .site-footer::before {
		animation: none !important;
	}
	html.es-v4-tilt .es .grid > .card:hover,
	html.es-v4-tilt .es .grid > .es-mod:hover,
	html.es-v4-tilt .es .hero .es-fig {
		transform: none;
	}
	html.es-v4-motion .es .card.es-rv,
	html.es-v4-motion .es .es-mod.es-rv,
	html.es-v4-motion .es .step.es-rv,
	html.es-v4-motion .es .agent.es-rv,
	html.es-v4-motion .es .fn.es-rv,
	html.es-v4-motion .es .qk.es-rv,
	html.es-v4-motion .es .s:not(.hero) .es-fig.es-rv,
	html.es-v4-motion .site-footer .v4-ftr-prep {
		opacity: 1;
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   13. V4-CINEMATIC-EXPERIENCE-2026-07-05 — Ridichiarazione di sicurezza
   Duplicato intenzionale del blocco 01 su selettore html, in coda al file
   (lezione QA V3: un renderer può scartare la prima regola del foglio).
   Tutti gli usi hanno comunque fallback letterali.
   -------------------------------------------------------------------------- */
html {
	--v4-gold: #d6a84f;
	--v4-gold-hi: #e9c87e;
	--v4-gold-deep: #a77c39;
	--v4-cyan: #00aeef;
	--v4-ink: #071a2f;
	--v4-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}