/* =====================================================================
 * QDN — SISTEMA MOTION
 * ---------------------------------------------------------------------
 * La grammatica condivisa del movimento, non l'effetto identico su ogni
 * pagina. L'intensita' la decide functions.php mettendo sul <body> una
 * classe:
 *
 *   qdn-mo--piena   homepage: esperienza cinematografica completa
 *   qdn-mo--media   Chi siamo, Contatti, pagine settore
 *   qdn-mo--lieve   negozio, categorie, schede prodotto
 *   (nessuna)       carrello, cassa, area clienti, pagine legali, 404
 *
 * Cio' che serve SOLO alla homepage sta in qdn-motion-home.css.
 *
 * REGOLA DI SICUREZZA: lo stato nascosto vive esclusivamente sotto
 * "body.qdn-mo-on", una classe che aggiunge il JavaScript dopo essersi
 * inizializzato. Se il JavaScript non parte, non si nasconde nulla.
 * ===================================================================== */

/* --- 1. Intensita' -------------------------------------------------- */
body.qdn-mo {
	--qdn-mo-sposta: 20px;
	--qdn-mo-durata: .55s;
	--qdn-mo-passo:  70ms;
	--qdn-mo-curva:  cubic-bezier(.22, .61, .36, 1);
	--qdn-mo-ottone: #B0895A;
}
body.qdn-mo--media { --qdn-mo-sposta: 22px; --qdn-mo-durata: .60s; --qdn-mo-passo: 80ms; }
body.qdn-mo--lieve { --qdn-mo-sposta: 12px; --qdn-mo-durata: .42s; --qdn-mo-passo: 45ms; }

/* --- 2. Comparsa progressiva ---------------------------------------
 * La classe .qdn-mo-rv non e' scritta nel markup: la aggiunge il
 * JavaScript agli elementi che ha deciso di animare, subito prima di
 * osservarli. Nessuna pagina va toccata per ottenere l'effetto, e
 * nessun blocco di codice finisce dentro le pagine Elementor.
 * ------------------------------------------------------------------- */
body.qdn-mo-on .qdn-mo-rv {
	opacity: 0;
	transform: translate3d(0, var(--qdn-mo-sposta), 0);
}
body.qdn-mo-on .qdn-mo-rv.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity   var(--qdn-mo-durata) ease,
		transform var(--qdn-mo-durata) var(--qdn-mo-curva);
	transition-delay: calc(var(--i, 0) * var(--qdn-mo-passo));
}

/* --- 3. Rete di sicurezza per il prototipo PHP ----------------------
 * In qdn-home.css la classe .qdn-rv e' nascosta SENZA condizioni
 * (opacity:0). Se il JavaScript del prototipo non parte, quelle sezioni
 * restano invisibili per sempre. Qui la regola viene ribaltata: di base
 * sono visibili, e si nascondono soltanto quando il motore e' davvero
 * acceso. Il motore di qdn-motion.js le rivela comunque, anche se
 * qdn-home.js dovesse fallire.
 * ------------------------------------------------------------------- */
body.qdn-mo .qdn-rv { opacity: 1; transform: none; }
body.qdn-mo.qdn-mo-on .qdn-rv:not(.qdn-in) {
	opacity: 0;
	transform: translate3d(0, var(--qdn-mo-sposta), 0);
}
body.qdn-mo.qdn-mo-on .qdn-rv { transition-delay: calc(var(--i, 0) * var(--qdn-mo-passo)); }

/* --- 4. Immagini: un movimento appena percettibile all'ingresso -----
 * Solo al livello medio, e solo sulla scala: mai larghezza o altezza,
 * cosi' non si sposta nulla nella pagina.
 * ------------------------------------------------------------------- */
body.qdn-mo--media.qdn-mo-on .qdn-mo-img img {
	transform: scale(1.05);
	transition: transform 1s var(--qdn-mo-curva);
	transition-delay: calc(var(--i, 0) * var(--qdn-mo-passo));
}
body.qdn-mo--media.qdn-mo-on .qdn-mo-img.is-in img { transform: none; }

/* --- 5. Vetro QDN: uso selettivo, mai su interi blocchi di testo ---- */
.qdn-mo-vetro {
	background: rgba(28, 26, 23, .52);
	-webkit-backdrop-filter: blur(14px) saturate(118%);
	backdrop-filter: blur(14px) saturate(118%);
	border: 1px solid rgba(176, 137, 90, .34);
	border-radius: 3px;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.qdn-mo-vetro { background: rgba(24, 22, 19, .92); }
}

/* --- 6. Negozio: effetti brevi, che non rallentino la scelta --------
 * Nessuna hero bloccata, nessuno scrub, niente che ritardi la lettura
 * del prezzo o del pulsante.
 * ------------------------------------------------------------------- */
body.qdn-mo--lieve ul.products li.product img,
body.qdn-mo--lieve .woocommerce-loop-product__link img {
	transition: transform .45s var(--qdn-mo-curva);
}
body.qdn-mo--lieve ul.products li.product:hover img { transform: scale(1.03); }

/* --- 7. Fuoco da tastiera: sempre visibile, in ottone --------------- */
body.qdn-mo a:focus-visible,
body.qdn-mo button:focus-visible,
body.qdn-mo .elementor-button:focus-visible {
	outline: 2px solid var(--qdn-mo-ottone);
	outline-offset: 3px;
}

/* --- 8. Telefono e tablet: ampiezza e costo ridotti ----------------- */
@media (max-width: 768px) {
	body.qdn-mo {
		--qdn-mo-sposta: 12px;
		--qdn-mo-durata: .40s;
		--qdn-mo-passo:  40ms;
	}
	body.qdn-mo--media.qdn-mo-on .qdn-mo-img img { transform: none; transition: none; }
}

/* --- 9. Movimento ridotto: tutto visibile subito -------------------- */
@media (prefers-reduced-motion: reduce) {
	body.qdn-mo *,
	body.qdn-mo *::before,
	body.qdn-mo *::after {
		animation: none !important;
		transition: none !important;
	}
	body.qdn-mo .qdn-mo-rv,
	body.qdn-mo .qdn-rv {
		opacity: 1 !important;
		transform: none !important;
	}
	body.qdn-mo .qdn-mo-img img { transform: none !important; }
}