/* Zanotelli — animazioni. Attive solo con body.zan-anim e la classe del singolo pezzo.
   Con prefers-reduced-motion tutto resta fermo e visibile. */

@media (prefers-reduced-motion: reduce) {
	.zan-anim .zan-pennello,
	.zan-anim .zan-riga-in,
	.zan-anim .zan-occhiello,
	.zan-anim .zan-bottiglia,
	.zan-anim .wpb_animate_when_almost_visible,
	.zan-anim .full-screen-overlay-nav .full-screen-overlay-nav-menu > ul > li {
		transition: none !important;
		transform: none !important;
		clip-path: none !important;
		opacity: 1 !important;
	}

	.zan-anim .zan-quadrante {
		animation: none !important;
		opacity: 1 !important;
	}
}

/* ---------- 1. Pennellate: si dipingono da sinistra a destra ---------- */
.zan-anim-pennellata .zan-pennello {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 900ms cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: var(--zan-d, 0ms);
}

.zan-anim-pennellata .zan-pennello.zan-in {
	clip-path: inset(0 0 0 0);
}

/* ---------- 2. Titoli hero: una riga alla volta, poi il sottotitolo ---------- */
.zan-anim-titoli .zan-riga {
	display: block;
	overflow: hidden;
}

.zan-anim-titoli .zan-riga-in {
	display: block;
	transform: translateY(110%);
	transition: transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--zan-d, 0ms);
}

.zan-anim-titoli .zan-titolo.zan-in .zan-riga-in {
	transform: none;
}

.zan-anim-titoli .zan-occhiello {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: 380ms;
}

.zan-anim-titoli .zan-occhiello.zan-in {
	opacity: 1;
	transform: none;
}

/* ---------- 3. Ruota: i quadranti si montano uno dopo l'altro ----------
   Keyframe e non transition (corretto il 07/10): una transition su questi elementi
   sostituiva quelle della ruota nel tema, cioè la crescita al passaggio (1800ms su
   desktop, in sincronia con la descrizione che compare dopo 1290ms) e, sotto i 1024px,
   larghezza e margini insieme in 600ms. Senza i margini lo spicchio attivo saltava. */
.zan-anim-ruota .zan-quadrante {
	opacity: 0;
}

.zan-anim-ruota .zan-in .zan-quadrante,
.zan-anim-ruota .zan-quadrante.zan-in {
	opacity: 1;
	animation: zan-quadrante-entra 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--zan-d, 0ms) backwards;
}

@keyframes zan-quadrante-entra {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: none; }
}

/* ---------- 4. Bottiglie: entrano poggiandosi, si sollevano al passaggio ---------- */
.zan-anim-bottiglie .zan-bottiglia {
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 700ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--zan-d, 0ms);
}

.zan-anim-bottiglie .zan-bottiglia.zan-in {
	opacity: 1;
	transform: none;
}

.zan-anim-bottiglie .vini_card img,
.zan-anim-bottiglie .wpex-carousel-entry-media img {
	transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
	.zan-anim-bottiglie .vini_card:hover img,
	.zan-anim-bottiglie .wpex-carousel-entry:hover .wpex-carousel-entry-media img {
		transform: translateY(-8px);
	}
}

/* ---------- 5. Rivelazioni: i fade di WPBakery diventano fade-up, con ritmo ---------- */
.zan-anim-rivelazioni .wpb_animate_when_almost_visible.wpb_fadeIn:not(.zan-no-rise) {
	transform: translateY(18px);
	transition: transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.zan-anim-rivelazioni .wpb_animate_when_almost_visible.wpb_fadeIn.wpb_start_animation:not(.zan-no-rise) {
	transform: none;
}

.zan-anim-rivelazioni .wpb_wrapper > .wpb_animate_when_almost_visible:nth-child(2) { transition-delay: 80ms; animation-delay: 80ms; }
.zan-anim-rivelazioni .wpb_wrapper > .wpb_animate_when_almost_visible:nth-child(3) { transition-delay: 160ms; animation-delay: 160ms; }
.zan-anim-rivelazioni .wpb_wrapper > .wpb_animate_when_almost_visible:nth-child(4) { transition-delay: 240ms; animation-delay: 240ms; }
.zan-anim-rivelazioni .wpb_wrapper > .wpb_animate_when_almost_visible:nth-child(5) { transition-delay: 320ms; animation-delay: 320ms; }
.zan-anim-rivelazioni .wpb_wrapper > .wpb_animate_when_almost_visible:nth-child(n+6) { transition-delay: 400ms; animation-delay: 400ms; }

/* ---------- 6. Menu mobile: voci in Michroma, separatori, entrata a scalare ---------- */
.zan-anim-menu_mobile .full-screen-overlay-nav .full-screen-overlay-nav-menu__link {
	padding: 15px 0;
	font-family: Michroma, sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zan-anim-menu_mobile .full-screen-overlay-nav .full-screen-overlay-nav-menu > ul > li:not(.voce_lingua) {
	position: relative;
}

.zan-anim-menu_mobile .full-screen-overlay-nav .full-screen-overlay-nav-menu > ul > li:not(.voce_lingua) + li:not(.voce_lingua)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 150px;
	height: 1px;
	background: rgba(250, 249, 246, 0.12);
	transform: translateX(-50%);
}

.zan-anim-menu_mobile .full-screen-overlay-nav .full-screen-overlay-nav-menu > ul > li.current-menu-item:not(.voce_lingua) > a::after {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	margin: 7px auto 0;
	background: #B8443F;
}

.zan-anim-menu_mobile .full-screen-overlay-nav .full-screen-overlay-nav-menu > ul > li {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.zan-anim-menu_mobile .full-screen-overlay-nav.zan-aperto .full-screen-overlay-nav-menu > ul > li {
	opacity: 1;
	transform: none;
}

.zan-anim-menu_mobile .full-screen-overlay-nav.zan-aperto .full-screen-overlay-nav-menu > ul > li:nth-child(2) { transition-delay: 50ms; }
.zan-anim-menu_mobile .full-screen-overlay-nav.zan-aperto .full-screen-overlay-nav-menu > ul > li:nth-child(3) { transition-delay: 100ms; }
.zan-anim-menu_mobile .full-screen-overlay-nav.zan-aperto .full-screen-overlay-nav-menu > ul > li:nth-child(4) { transition-delay: 150ms; }
.zan-anim-menu_mobile .full-screen-overlay-nav.zan-aperto .full-screen-overlay-nav-menu > ul > li:nth-child(5) { transition-delay: 200ms; }
.zan-anim-menu_mobile .full-screen-overlay-nav.zan-aperto .full-screen-overlay-nav-menu > ul > li:nth-child(6) { transition-delay: 250ms; }
.zan-anim-menu_mobile .full-screen-overlay-nav.zan-aperto .full-screen-overlay-nav-menu > ul > li:nth-child(n+7) { transition-delay: 320ms; }

/* ============================================================
   Revisione 2 — 25/09/2026
   ============================================================ */

@keyframes zan-sicurezza { to { opacity: 1; visibility: visible; } }

/* Titoli e sottotitoli hero nascosti PRIMA del primo disegno (via html.zan-js),
   finche' lo script non li avvolge: niente lampo. Sicurezza: dopo 3s si mostrano comunque. */
html.zan-js .zan-anim-titoli :is(.hero_titolo, .hero_territorio_titolo, .az_hero_titolo, .esp_hero_titolo, .vini_hero_titolo, .news_hero_titolo, .sv_titolo) h1:not(.zan-titolo),
html.zan-js .zan-anim-titoli :is(.hero_occhiello, .hero_territorio_occhiello, .az_hero_occhiello, .esp_hero_occhiello, .vini_hero_occhiello, .news_hero_occhiello, .sv_occhiello):not(.zan-occhiello) {
	opacity: 0;
	animation: zan-sicurezza 1ms linear 3s forwards;
}

/* Tempi piu' generosi: prima si vedeva troppo poco. */
.zan-anim-titoli .zan-riga-in { transition-duration: 900ms; }
.zan-anim-pennellata .zan-pennello { transition-duration: 1100ms; }
.zan-anim-rivelazioni .wpb_animate_when_almost_visible.wpb_fadeIn:not(.zan-no-rise) { transform: translateY(28px); transition-duration: 820ms; }

/* Ruota, hover: nessuna regola qui. Valgono i tempi del tema (style.css, .cerchio_quadrante).
   Le tre regole che c'erano dal 25/09 rendevano la crescita più rapida della descrizione:
   il cliente l'ha vista comparire «troppo lentamente» e ha chiesto di tornare a prima. */

/* Transizioni di pagina: la pagina in arrivo appare in dissolvenza (260ms), quella
   in uscita si spegne al click su un link interno. Sicurezza CSS: dopo 2,5s la
   pagina e' visibile comunque. */
html.zan-t body {
	opacity: 0;
	transition: opacity 260ms ease;
	animation: zan-sicurezza 1ms linear 2.5s forwards;
}

html.zan-t.zan-pronto body {
	opacity: 1;
}

html.zan-t.zan-uscita body {
	opacity: 0;
	transition-duration: 220ms;
}

/* Terza sicurezza per le transizioni di pagina: non un'animazione, un cambio di
   classe secco che lo script fa dopo 1,8s. Vale al primo disegno, sempre. */
html.zan-fermo body {
	opacity: 1 !important;
	transition: none !important;
	animation: none !important;
}