/* ==========================================================================
   V3-FINAL-EXPERIENCE-2026-07-05 — Experience layer Electronic Solution
   ==========================================================================
   Layer ADDITIVO sopra final-renewal.css e il CSS Customizer/widget del sito.
   Principi:
   - namespace v3-* per classi e variabili: zero collisioni con es-*/reveal/GSAP;
   - progressive enhancement: senza JS il sito resta identico a oggi
     (le classi v3-prep/v3-in vengono aggiunte SOLO da v3-experience.js);
   - solo transform/opacity nelle animazioni (compositor-friendly);
   - prefers-reduced-motion: tutto il layer si spegne (sezione finale);
   - ambient (orbe) SOLO desktop con hover reale, iniettate da JS;
   - nessuna risorsa esterna, nessuna libreria.
   Rollback: eliminare questo file + il blocco enqueue V3 in functions.php.

   INDICE
   01. Variabili V3
   02. Header premium (stato base + reazione allo scroll + progress line)
   03. Navigazione (underline animata, active, CTA Contatti, dropdown)
   04. Footer premium
   05. Profondità: card, step, chip, note
   06. CTA e bottoni: stati raffinati
   07. Reveal on-scroll (classi JS: v3-prep → v3-in)
   08. Ambient: orbe luminose (iniettate da JS, solo desktop)
   09. Back-to-top: ring di progresso
   10. Rifiniture varie (hr sezioni scure, es-eco-mobile, form)
   11. Riduzione movimento + mobile guard
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. V3-FINAL-EXPERIENCE-2026-07-05 — Variabili
   -------------------------------------------------------------------------- */
:root {
	--v3-gold: #c99b4b;
	--v3-gold-soft: #d6a84f;
	--v3-cyan: #00aeef;
	--v3-ink: #071a2f;
	--v3-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--v3-progress: 0; /* 0..1, aggiornata da v3-experience.js */
}


/* --------------------------------------------------------------------------
   02. V3-FINAL-EXPERIENCE-2026-07-05 — Header premium
   Il glass di base viene dal CSS Customizer (invariato). Qui:
   - hairline oro sfumata sotto l'header;
   - transizione morbida di padding/ombra;
   - stato compresso quando si scorre (html.v3-hdr-scrolled, da JS);
   - linea di progresso lettura in cima (scaleX su --v3-progress).
   Nessun cambio di altezza brusco: solo padding, con transizione → niente salti.
   -------------------------------------------------------------------------- */
.site-header {
	position: relative;
	transition: box-shadow 0.35s ease;
}
/* hairline oro sotto l'header, sopra il bordo esistente */
.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(214, 168, 79, 0.75) 30%, rgba(214, 168, 79, 0.75) 70%, transparent);
	pointer-events: none;
}
.site-header .inside-header {
	transition: padding-top 0.35s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), padding-bottom 0.35s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
/* logo: transizione dolce (lo scale avviene nello stato scrolled) */
.site-header .site-logo img,
.site-header .header-image {
	transition: transform 0.35s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	transform-origin: left center;
	will-change: transform;
}
/* stato scrolled (aggiunto/rimosso da JS oltre 12px di scroll) */
html.v3-hdr-scrolled .site-header {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 30px rgba(7, 26, 47, 0.16);
}
html.v3-hdr-scrolled .site-header .inside-header {
	padding-top: 6px;
	padding-bottom: 6px;
}
html.v3-hdr-scrolled .site-header .site-logo img,
html.v3-hdr-scrolled .site-header .header-image {
	transform: scale(0.9);
}

/* Linea di progresso lettura: hairline oro fissa in cima, larghezza = scroll.
   È riflesso di stato (non animazione autonoma): resta anche con reduced-motion,
   ma senza transizione. */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--v3-gold, #c99b4b), var(--v3-gold-soft, #d6a84f) 60%, var(--v3-cyan, #00aeef));
	transform: scaleX(var(--v3-progress, 0));
	transform-origin: left center;
	z-index: 99990; /* sopra header, sotto cookie modal (100000) */
	pointer-events: none;
}


/* --------------------------------------------------------------------------
   03. V3-FINAL-EXPERIENCE-2026-07-05 — Navigazione
   -------------------------------------------------------------------------- */
/* underline oro animata sulle voci del menu desktop (non sul toggle mobile) */
.main-navigation .main-nav > ul > li > a {
	position: relative;
	transition: color 0.25s ease;
}
.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	border-radius: 1px;
	background: linear-gradient(90deg, var(--v3-gold, #c99b4b), var(--v3-gold-soft, #d6a84f));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	pointer-events: none;
}
.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li > a:focus-visible::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* CTA Contatti: pill oro, robusta (target per href, non per id di menu) */
.main-navigation .main-nav > ul > li > a[href$="/contatti/"] {
	background: linear-gradient(180deg, #caa14e, #a87f31);
	color: #071a2f !important;
	border-radius: 9px;
	margin-left: 6px;
	transition: transform 0.25s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), box-shadow 0.25s ease, filter 0.25s ease;
	box-shadow: 0 4px 14px rgba(167, 124, 57, 0.28);
}
.main-navigation .main-nav > ul > li > a[href$="/contatti/"]:hover,
.main-navigation .main-nav > ul > li > a[href$="/contatti/"]:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 8px 22px rgba(167, 124, 57, 0.4);
}
/* niente underline animata sotto la pill */
.main-navigation .main-nav > ul > li > a[href$="/contatti/"]::after {
	display: none;
}
/* la pill non deve applicarsi dentro al menu mobile aperto (lista verticale):
   nel menu mobile GP le voci sono full-width; la pill resta gradevole ma
   riduciamo il raggio per coerenza */
@media (max-width: 768px) {
	.main-navigation .main-nav > ul > li > a[href$="/contatti/"] {
		margin-left: 0;
		border-radius: 6px;
	}
}

/* dropdown Servizi: apertura più morbida (GP lo mostra/nasconde via display/
   opacity a seconda della config: qui solo rifiniture sicure su ombra/bordo) */
.main-navigation ul ul.sub-menu {
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}
.main-navigation ul ul.sub-menu li a {
	transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.main-navigation ul ul.sub-menu li a:hover {
	padding-left: 22px;
}


/* --------------------------------------------------------------------------
   04. V3-FINAL-EXPERIENCE-2026-07-05 — Footer premium
   Il contenuto del footer è un widget HTML (DB) con stili inline: qui si
   nobilita il CONTENITORE senza toccare i testi.
   -------------------------------------------------------------------------- */
.site-footer {
	position: relative;
}
/* doppia hairline oro + alone in cima al footer */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--v3-gold, #c99b4b) 25%, var(--v3-gold-soft, #d6a84f) 50%, var(--v3-gold, #c99b4b) 75%, transparent);
	pointer-events: none;
}
.site-footer::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(720px, 90%);
	height: 90px;
	background: radial-gradient(closest-side, rgba(214, 168, 79, 0.12), transparent);
	pointer-events: none;
}
/* i link del footer hanno già l'underline animata dal Customizer;
   qui aggiungiamo solo lo scarto laterale dolce */
.site-footer a:not(.btn) {
	transition: color 0.25s ease, transform 0.25s ease, background-size 0.3s ease;
}
.site-footer a:not(.btn):hover {
	color: #ffffff;
}


/* --------------------------------------------------------------------------
   05. V3-FINAL-EXPERIENCE-2026-07-05 — Profondità: card, step, chip
   Le card hanno già hover dal Customizer (translateY, ombra, shine):
   qui si arricchisce la PROFONDITÀ statica e la risposta al focus,
   senza duplicare le transizioni esistenti.
   -------------------------------------------------------------------------- */
.es .card {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.001), rgba(7, 26, 47, 0.018));
	box-shadow: 0 1px 2px rgba(7, 26, 47, 0.05), 0 6px 18px rgba(7, 26, 47, 0.05);
}
.es .card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 50px rgba(7, 26, 47, 0.12);
}
/* icona card: anello oro che appare al passaggio */
.es .card .ico {
	position: relative;
}
.es .card .ico::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	border: 1px solid rgba(214, 168, 79, 0);
	transition: border-color 0.3s ease, inset 0.3s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	pointer-events: none;
}
.es .card:hover .ico::after,
.es .card:focus-visible .ico::after {
	border-color: rgba(214, 168, 79, 0.55);
	inset: -5px;
}
/* step del metodo: numero che si accende */
.es .step {
	transition: transform 0.3s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.es .step:hover,
.es .step:focus-visible {
	transform: translateY(-3px);
}
.es .step .n {
	transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.es .step:hover .n,
.es .step:focus-visible .n {
	color: var(--v3-gold-soft, #d6a84f);
	letter-spacing: 0.22em;
}
/* chip scure delle sezioni dark */
.es .chip {
	transition: transform 0.25s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), border-color 0.25s ease, background-color 0.25s ease;
}
.es .chip:hover {
	transform: translateY(-2px);
	border-color: rgba(214, 168, 79, 0.5);
	background: rgba(255, 255, 255, 0.09);
}
/* note/callout: bordo che respira al passaggio */
.es .note {
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.es .note:hover {
	box-shadow: 0 8px 24px rgba(7, 26, 47, 0.08);
}


/* --------------------------------------------------------------------------
   06. V3-FINAL-EXPERIENCE-2026-07-05 — CTA e bottoni
   Sheen e lift esistono già (Customizer): qui coerenza di focus/active e
   freccia che scatta in avanti dove il testo contiene "→" (solo hover reale).
   -------------------------------------------------------------------------- */
.es .btn {
	backface-visibility: hidden;
}
.es .btn:focus-visible {
	transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
	.es .btn-gold:hover {
		filter: saturate(1.08);
	}
	.es .btn-ghost:hover {
		border-color: rgba(214, 168, 79, 0.65);
		color: var(--v3-gold-soft, #d6a84f);
	}
	.es .btn-cyan:hover {
		box-shadow: 0 10px 26px rgba(0, 174, 239, 0.32);
	}
}


/* --------------------------------------------------------------------------
   07. V3-FINAL-EXPERIENCE-2026-07-05 — Reveal on-scroll (guidato da JS)
   SICUREZZA: la classe v3-prep (stato nascosto) viene aggiunta SOLO da JS
   immediatamente prima di osservare l'elemento; senza JS niente classe,
   contenuto sempre visibile. v3-experience.js salta gli elementi già gestiti
   dal sistema reveal/GSAP del sito. Failsafe JS: dopo 2.5s ogni v3-prep
   residua diventa v3-in comunque.
   -------------------------------------------------------------------------- */
.v3-prep {
	opacity: 0.001;
	transform: translateY(16px);
}
.v3-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.65s ease, transform 0.7s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	transition-delay: calc(var(--v3-d, 0) * 70ms);
}


/* --------------------------------------------------------------------------
   08. V3-FINAL-EXPERIENCE-2026-07-05 — Ambient: orbe luminose
   Iniettate da JS (span.v3-orb) SOLO su desktop con hover reale e senza
   reduced-motion, dentro le sezioni hero (overflow:hidden già attivo).
   Movimento lentissimo su transform (compositor), opacità bassa: profondità,
   non spettacolo.
   -------------------------------------------------------------------------- */
.v3-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(42px);
	opacity: 0.16;
	z-index: 0;
	will-change: transform;
}
.v3-orb--gold {
	width: 340px;
	height: 340px;
	right: -80px;
	top: -60px;
	background: radial-gradient(circle, rgba(214, 168, 79, 0.85), transparent 65%);
	animation: v3-drift-a 26s ease-in-out infinite alternate;
}
.v3-orb--cyan {
	width: 260px;
	height: 260px;
	left: -60px;
	bottom: -80px;
	background: radial-gradient(circle, rgba(0, 174, 239, 0.7), transparent 65%);
	animation: v3-drift-b 32s ease-in-out infinite alternate;
}
@keyframes v3-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-40px, 34px, 0) scale(1.12); }
}
@keyframes v3-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(36px, -28px, 0) scale(1.08); }
}
/* il contenuto dell'hero resta sopra le orbe; l'hero clippa le orbe che
   sbordano (top/right negativi) senza toccare i vicini */
.es .hero {
	position: relative;
	overflow: hidden;
}
.es .hero .w {
	position: relative;
	z-index: 1;
}


/* --------------------------------------------------------------------------
   09. V3-FINAL-EXPERIENCE-2026-07-05 — Back-to-top: ring di progresso
   Anello conico oro attorno al pulsante nativo, pilotato da --v3-progress.
   Riflesso di stato: nessuna animazione autonoma.
   -------------------------------------------------------------------------- */
a.generate-back-to-top.generate-back-to-top {
	overflow: visible; /* l'anello sta appena fuori dal bottone */
}
a.generate-back-to-top.generate-back-to-top::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 15px;
	background:
		conic-gradient(var(--v3-gold-soft, #d6a84f) calc(var(--v3-progress, 0) * 360deg), rgba(255, 255, 255, 0.14) 0);
	-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;
	padding: 2px;
	pointer-events: none;
}


/* --------------------------------------------------------------------------
   10. V3-FINAL-EXPERIENCE-2026-07-05 — Rifiniture
   -------------------------------------------------------------------------- */
/* hairline oro in cima alle sezioni scure: ritmo verticale premium */
.es .s.dark {
	position: relative;
}
.es .s.dark::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(560px, 72%);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(214, 168, 79, 0.55), transparent);
	pointer-events: none;
}
/* card mobili dell'ecosistema (quando la PATCH A sarà applicata) */
.es .es-eco-mobile__hub,
.es .es-eco-mobile__node {
	transition: transform 0.3s var(--v3-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), box-shadow 0.3s ease;
}
.es .es-eco-mobile__node:active {
	transform: scale(0.985);
}
/* form CF7: focus ring che respira leggermente più caldo */
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible {
	box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.28);
}


/* --------------------------------------------------------------------------
   11. V3-FINAL-EXPERIENCE-2026-07-05 — Riduzione movimento + guardie
   Con prefers-reduced-motion: tutto il layer V3 si spegne (il globale di
   final-renewal.css azzera già transizioni/animazioni; qui neutralizziamo
   anche gli stati che implicano movimento e le orbe).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.v3-orb {
		display: none;
	}
	.v3-prep {
		opacity: 1;
		transform: none;
	}
	html.v3-hdr-scrolled .site-header .site-logo img,
	html.v3-hdr-scrolled .site-header .header-image {
		transform: none;
	}
	.es .step:hover,
	.es .step:focus-visible,
	.es .chip:hover,
	.es .btn:focus-visible,
	.es .card:focus-visible {
		transform: none;
	}
	/* la progress line resta (informazione di stato), senza movimenti extra */
}
/* niente orbe dove non servono: touch/mobile (iniettate solo da JS su desktop,
   questa è la cintura di sicurezza CSS) */
@media (max-width: 1024px), (hover: none) {
	.v3-orb {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   12. V3-FINAL-EXPERIENCE-2026-07-05 — Ridichiarazione variabili di sicurezza
   Duplicato intenzionale del blocco 01 su selettore html, in coda al file:
   rende il layer immune a eventuali drop della prima regola da parte di
   parser/cache intermedi (osservato una volta in QA). Tutti gli usi hanno
   comunque fallback letterali.
   -------------------------------------------------------------------------- */
html {
	--v3-gold: #c99b4b;
	--v3-gold-soft: #d6a84f;
	--v3-cyan: #00aeef;
	--v3-ink: #071a2f;
	--v3-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}