/* =====================================================================
 * QDN — MOTION: HOMEPAGE
 * ---------------------------------------------------------------------
 * Vale SOLO per la homepage. Si carica da functions.php quando il
 * livello motion della pagina e' "piena", cioe' solo su is_front_page().
 * Tutto e' preceduto da "body.qdn-mo--piena": nessuna regola esce di qui.
 *
 * La grammatica condivisa (comparse, sfalsamento, vetro, movimento
 * ridotto) sta invece in qdn-motion.css, che vale su piu' famiglie di
 * pagine. Qui c'e' soltanto cio' che serve alla hero cinematografica.
 *
 * ATTENZIONE alle classi: Elementor mette le classi personalizzate sul
 * CONTENITORE del widget, non sul tag interno. Il vero <h1> e' quindi
 * ".qdn-motion-h1 .elementor-heading-title".
 * ===================================================================== */
body.qdn-mo--piena .qdn-motion-home {
	--qi:#1C1A17; --qi2:#23211D; --qo:#B0895A; --qc:#F4EFE6; --qn:#C9C2B4;
	--qs:rgba(244,239,230,.74); --qsc:rgba(28,26,23,.74);
	--qd:"Fraunces",Georgia,"Times New Roman",serif;
	--qb:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
	--qm-p:0; --qm-headh:112px; --qm-max:1120px;
}
body.qdn-mo--piena .qdn-motion-home *, body.qdn-mo--piena .qdn-motion-home *::before, body.qdn-mo--piena .qdn-motion-home *::after { box-sizing:border-box; }
body.qdn-mo--piena .qdn-motion-home .elementor-heading-title, body.qdn-mo--piena .qdn-motion-home p { margin:0; }
body.qdn-mo--piena .qdn-motion-home .elementor-widget:not(:last-child) { margin-bottom:0; }

/* --- HERO: pista 220svh, pin 100svh, corsa utile 120svh ------------- */
body.qdn-mo--piena .qdn-motion-hero { position:relative; }
body.qdn-mo--piena .qdn-motion-home.qdn-motion-pin .qdn-motion-hero { height:220vh; height:220svh; }
body.qdn-mo--piena .qdn-motion-hero__pin {
	position:relative; display:flex; align-items:center;
	height:100vh; height:100svh; min-height:560px;
	overflow:hidden; background:var(--qi);
}
body.qdn-mo--piena .qdn-motion-home.qdn-motion-pin .qdn-motion-hero__pin { position:sticky; top:0; }

body.qdn-mo--piena .qdn-motion-hero__media {
	position:absolute; inset:0; z-index:0;
	transform:scale(calc(1 + var(--qm-p) * .14));
	transform-origin:50% 46%; will-change:transform;
	/* Elementor mette su OGNI contenitore (.e-con) una transizione di 0,4s
	   che comprende "transform". Qui il transform cambia a ogni fotogramma
	   dello scrub: con la transizione accesa lo zoom INSEGUE lo scroll con
	   quattro decimi di ritardo invece di seguirlo. Misurato il 2 ottobre
	   2026: con la transizione la scala resta ferma a 1,0000 mentre --qm-p
	   sale a 1; spegnendola va 1,0000 / 1,0700 / 1,1400 come progettato. */
	transition:none;
}
body.qdn-mo--piena .qdn-motion-hero__media > .e-con-inner,
body.qdn-mo--piena .qdn-motion-hero__media .elementor-widget-image,
body.qdn-mo--piena .qdn-motion-hero__media .elementor-widget-container,
body.qdn-mo--piena .qdn-motion-hero__media figure { height:100%; margin:0; }
body.qdn-mo--piena .qdn-motion-hero__media img {
	display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
	filter:saturate(.73) contrast(1.04) brightness(.94);
}

/* Velo: tiene leggibile il testo sopra la fotografia */
body.qdn-mo--piena .qdn-motion-hero__pin::before {
	content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:
		linear-gradient(180deg, rgba(28,26,23,.80) 0%, rgba(28,26,23,.52) 40%, rgba(28,26,23,.94) 100%),
		linear-gradient(90deg, rgba(28,26,23,.92) 0%, rgba(28,26,23,.34) 64%, rgba(28,26,23,.12) 100%);
	opacity:calc(.88 + var(--qm-p) * .12);
}
/* Alone ottone = la diffusione del profumo, senza canvas */
body.qdn-mo--piena .qdn-motion-hero__pin::after {
	content:""; position:absolute; z-index:2; pointer-events:none;
	left:50%; top:54%; width:min(78vw,860px); aspect-ratio:1; translate:-50% -50%;
	background:radial-gradient(circle at 50% 50%, rgba(176,137,90,.30) 0%, rgba(176,137,90,.11) 34%, rgba(176,137,90,0) 68%);
	transform:scale(calc(.55 + var(--qm-p) * 1.15));
	opacity:calc(.75 - var(--qm-p) * .62);
	filter:blur(6px);
}
body.qdn-mo--piena .qdn-motion-hero__inner {
	position:relative; z-index:3; width:100%; max-width:var(--qm-max); margin:0 auto;
	padding:var(--qm-headh) 28px 0;
	transform:translate3d(0, calc(var(--qm-p) * -56px), 0);
	opacity:calc(1 - (var(--qm-p) - .55) / .45);
}
body.qdn-mo--piena .qdn-motion-eyebrow { margin-bottom:18px; }
body.qdn-mo--piena .qdn-motion-eyebrow .elementor-heading-title {
	font-family:var(--qb); font-size:12px; font-weight:500; letter-spacing:.16em;
	text-transform:uppercase; color:var(--qo);
}
body.qdn-mo--piena .qdn-motion-h1 .elementor-heading-title {
	font-family:var(--qd); font-weight:400; font-size:clamp(34px,5.4vw,64px);
	line-height:1.06; letter-spacing:-.015em; color:var(--qc); max-width:15em;
}
body.qdn-mo--piena .qdn-motion-hero__testo { margin-top:26px; position:relative; padding-top:26px; }
body.qdn-mo--piena .qdn-motion-hero__testo::before {
	content:""; position:absolute; top:0; left:0; width:1px;
	height:calc(18px + var(--qm-p) * 40px);
	background:linear-gradient(180deg, var(--qo), rgba(176,137,90,0));
}
body.qdn-mo--piena .qdn-motion-hero__testo p {
	font-family:var(--qb); font-size:clamp(15px,1.25vw,17.5px); line-height:1.62;
	color:var(--qs); max-width:46ch;
}
body.qdn-mo--piena .qdn-motion-hero__cta { flex-direction:row; flex-wrap:wrap; gap:14px 16px; margin-top:32px; width:auto; }

/* --- H1 parola per parola: testo vero, spazi veri ------------------- */
body.qdn-mo--piena .qdn-motion-word {
	display:inline-block; overflow:hidden; vertical-align:bottom;
	padding-bottom:.14em; margin-bottom:-.14em;
}
body.qdn-mo--piena .qdn-motion-word > i { display:inline-block; font-style:inherit; }
body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-word > i { transform:translateY(104%); opacity:0; }
body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-h1.is-in .qdn-motion-word > i {
	transform:none; opacity:1;
	transition:transform .72s cubic-bezier(.22,.61,.36,1), opacity .52s ease, filter .52s ease;
	transition-delay:calc(var(--w,0) * 55ms);
}
@media (min-width:901px) {
	body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-word > i { filter:blur(6px); }
	body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-h1.is-in .qdn-motion-word > i { filter:blur(0); }
}

/* --- Comparsa progressiva ------------------------------------------ */
body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-rv { opacity:0; transform:translate3d(0,22px,0); }
body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-rv.is-in {
	opacity:1; transform:none;
	transition:opacity .6s ease, transform .68s cubic-bezier(.22,.61,.36,1);
	transition-delay:calc(var(--i,0) * 80ms);
}

/* --- Sezioni ------------------------------------------------------- */
body.qdn-mo--piena .qdn-motion-sec { padding:108px 0; background:var(--qc); }
body.qdn-mo--piena .qdn-motion-sec--scura { background:var(--qi); }
body.qdn-mo--piena .qdn-motion-wrap { width:100%; max-width:var(--qm-max); margin:0 auto; padding:0 28px; }
body.qdn-mo--piena .qdn-motion-h2 { margin-top:12px; }
body.qdn-mo--piena .qdn-motion-h2 .elementor-heading-title {
	font-family:var(--qd); font-weight:400; font-size:clamp(27px,3.4vw,42px);
	line-height:1.14; letter-spacing:-.01em; color:var(--qi);
}
body.qdn-mo--piena .qdn-motion-intro { margin-top:18px; }
body.qdn-mo--piena .qdn-motion-intro p { font-family:var(--qb); font-size:16.5px; line-height:1.66; color:var(--qsc); max-width:58ch; }
body.qdn-mo--piena .qdn-motion-sec--scura .qdn-motion-h2 .elementor-heading-title,
body.qdn-mo--piena .qdn-motion-metodo .qdn-motion-h2 .elementor-heading-title { color:var(--qc); }
body.qdn-mo--piena .qdn-motion-sec--scura .qdn-motion-intro p,
body.qdn-mo--piena .qdn-motion-metodo .qdn-motion-intro p { color:var(--qs); }

/* --- METODO: tre card liquid-glass in palette QDN ------------------- */
body.qdn-mo--piena .qdn-motion-metodo { position:relative; overflow:hidden; background:var(--qi); }
body.qdn-mo--piena .qdn-motion-metodo::before {
	content:""; position:absolute; z-index:0; left:50%; top:6%;
	width:min(90vw,1000px); aspect-ratio:1; translate:-50% 0; pointer-events:none;
	background:radial-gradient(circle at 50% 50%, rgba(176,137,90,.16) 0%, rgba(176,137,90,.05) 40%, rgba(176,137,90,0) 70%);
}
body.qdn-mo--piena .qdn-motion-metodo > .e-con-inner, body.qdn-mo--piena .qdn-motion-metodo > .qdn-motion-wrap { position:relative; z-index:1; }
body.qdn-mo--piena .qdn-motion-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; width:100%; }
body.qdn-mo--piena .qdn-motion-card {
	padding:32px 28px 34px; border:1px solid rgba(176,137,90,.34); border-radius:3px;
	background:rgba(28,26,23,.52);
	-webkit-backdrop-filter:blur(14px) saturate(118%); backdrop-filter:blur(14px) saturate(118%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
	body.qdn-mo--piena .qdn-motion-card { background:rgba(24,22,19,.92); }
}
body.qdn-mo--piena .qdn-motion-num .elementor-heading-title { font-family:var(--qd); font-size:34px; line-height:1; color:var(--qo); }
body.qdn-mo--piena .qdn-motion-card h3, body.qdn-mo--piena .qdn-motion-sol h3 {
	font-family:var(--qd); font-weight:400; font-size:21px; line-height:1.24; color:var(--qc); margin:14px 0 12px;
}
body.qdn-mo--piena .qdn-motion-card p, body.qdn-mo--piena .qdn-motion-sol p { font-family:var(--qb); font-size:15px; line-height:1.62; color:var(--qs); }

/* --- AMBIENTI: 31% x3 + 24px = 1089,6px dentro 1120 (lezione §9.4) -- */
body.qdn-mo--piena .qdn-motion-griglia {
	display:grid; grid-template-columns:repeat(3,31%); justify-content:space-between;
	gap:32px 24px; margin-top:52px; width:100%;
}
body.qdn-mo--piena .qdn-motion-amb {
	position:relative; background:var(--qi2); border:1px solid rgba(176,137,90,.28);
	border-radius:3px; overflow:hidden; padding:0;
}
body.qdn-mo--piena .qdn-motion-amb__media { position:relative; overflow:hidden; aspect-ratio:3/2; padding:0; width:100%; }
body.qdn-mo--piena .qdn-motion-amb__media .elementor-widget-image,
body.qdn-mo--piena .qdn-motion-amb__media .elementor-widget-container,
body.qdn-mo--piena .qdn-motion-amb__media figure { height:100%; margin:0; }
body.qdn-mo--piena .qdn-motion-amb__media img {
	display:block; width:100%; height:100%; object-fit:cover;
	filter:saturate(.73) contrast(1.04) brightness(.94);
}
body.qdn-mo--piena .qdn-motion-amb__media::after {
	content:""; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(28,26,23,.12), rgba(28,26,23,.55));
	transition:opacity .3s ease;
}
body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-amb__media img { clip-path:inset(0 0 100% 0); transform:scale(1.08); }
body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-amb.is-in .qdn-motion-amb__media img {
	clip-path:inset(0 0 0 0); transform:scale(1);
	transition:clip-path .8s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
	transition-delay:calc(var(--i,0) * 70ms);
}
body.qdn-mo--piena .qdn-motion-amb__corpo { padding:24px 24px 26px; }
body.qdn-mo--piena .qdn-motion-amb__corpo .qdn-motion-num .elementor-heading-title {
	font-family:var(--qb); font-size:12px; letter-spacing:.14em; color:var(--qo);
}
body.qdn-mo--piena .qdn-motion-amb h3 { font-family:var(--qd); font-weight:400; font-size:20px; line-height:1.24; color:var(--qc); margin:10px 0; }
body.qdn-mo--piena .qdn-motion-amb p { font-family:var(--qb); font-size:14.5px; line-height:1.6; color:var(--qs); margin-bottom:16px; }
body.qdn-mo--piena .qdn-motion-amb:hover .qdn-motion-amb__media::after { opacity:.55; }
body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-amb.is-in:hover .qdn-motion-amb__media img { transform:scale(1.04); }
body.qdn-mo--piena .qdn-motion-amb--testo { justify-content:flex-end; }
body.qdn-mo--piena .qdn-motion-amb--testo .qdn-motion-amb__corpo {
	border-left:2px solid var(--qo); margin:24px; padding:4px 0 4px 20px;
	/* width:auto e non il 100% che Elementor impone ai contenitori:
	   sommato ai margini rendeva questo corpo 23px piu largo della scheda,
	   e con overflow:hidden il testo di "Grandi spazi" veniva tagliato a
	   destra. Con width:auto lo dimensiona il flex, sottraendo i margini.
	   Difetto trovato nella verifica del 9 settembre 2026. */
	width:auto;
}

/* --- Freccia, pulsanti, note --------------------------------------- */
body.qdn-mo--piena .qdn-motion-go .elementor-button {
	background:transparent; padding:0; border:0; border-radius:0;
	font-family:var(--qb); font-size:13px; font-weight:500; letter-spacing:.04em;
	color:var(--qo); fill:var(--qo); box-shadow:none;
	transition:transform .3s ease, color .3s ease;
}
body.qdn-mo--piena .qdn-motion-go .elementor-button:hover { color:var(--qc); }
body.qdn-mo--piena .qdn-motion-amb:hover .qdn-motion-go .elementor-button,
body.qdn-mo--piena .qdn-motion-sol:hover .qdn-motion-go .elementor-button { transform:translateX(6px); }
body.qdn-mo--piena .qdn-motion-identita .qdn-motion-go .elementor-button { color:var(--qi); }
body.qdn-mo--piena .qdn-motion-identita .qdn-motion-go .elementor-button:hover { color:var(--qo); }
body.qdn-mo--piena .qdn-motion-btn .elementor-button {
	font-family:var(--qb); font-size:14.5px; font-weight:500; letter-spacing:.02em;
	padding:15px 30px; border-radius:2px; box-shadow:none;
	transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
body.qdn-mo--piena .qdn-motion-btn--ottone .elementor-button { background:var(--qo); color:var(--qi); border:1px solid var(--qo); }
body.qdn-mo--piena .qdn-motion-btn--ottone .elementor-button:hover { background:#C29A67; border-color:#C29A67; color:var(--qi); }
body.qdn-mo--piena .qdn-motion-btn--fantasma .elementor-button { background:transparent; color:var(--qc); border:1px solid rgba(244,239,230,.38); }
body.qdn-mo--piena .qdn-motion-btn--fantasma .elementor-button:hover { border-color:var(--qo); color:var(--qo); }
body.qdn-mo--piena .qdn-motion-nota { margin-top:34px; }
body.qdn-mo--piena .qdn-motion-nota p { font-family:var(--qb); font-size:14.5px; color:var(--qs); }
body.qdn-mo--piena .qdn-motion-nota a { color:var(--qo); }

/* --- SOLUZIONI e IDENTITA' ----------------------------------------- */
body.qdn-mo--piena .qdn-motion-cards--piatte { gap:40px 24px; }
body.qdn-mo--piena .qdn-motion-sol { padding:26px 0 0; border-top:1px solid rgba(176,137,90,.34); }
body.qdn-mo--piena .qdn-motion-requisiti { margin-top:30px; }
body.qdn-mo--piena .qdn-motion-requisiti ul { list-style:none; margin:0; padding:0; max-width:62ch; border-left:2px solid var(--qo); }
body.qdn-mo--piena .qdn-motion-requisiti li {
	font-family:var(--qb); font-size:15.5px; line-height:1.6; color:var(--qi);
	padding:12px 0 12px 22px; border-bottom:1px solid rgba(28,26,23,.10);
}
body.qdn-mo--piena .qdn-motion-requisiti li:last-child { border-bottom:0; }
body.qdn-mo--piena .qdn-motion-identita .qdn-motion-go { margin-top:26px; }

/* --- CHIUSURA ------------------------------------------------------ */
body.qdn-mo--piena .qdn-motion-cta-card {
	border:1px solid rgba(176,137,90,.42); border-radius:3px;
	padding:56px 44px 58px; text-align:center; align-items:center;
	background:rgba(176,137,90,.05);
}
body.qdn-mo--piena .qdn-motion-chiusura .qdn-motion-h2 .elementor-heading-title { color:var(--qc); }
body.qdn-mo--piena .qdn-motion-cta-card p {
	font-family:var(--qb); font-size:16.5px; line-height:1.66; color:var(--qs);
	max-width:52ch; margin:16px auto 30px;
}

/* --- Fuoco da tastiera: tema e kit lo azzerano ---------------------- */
body.qdn-mo--piena .qdn-motion-home a:focus-visible,
body.qdn-mo--piena .qdn-motion-home button:focus-visible,
body.qdn-mo--piena .qdn-motion-home .elementor-button:focus-visible { outline:2px solid var(--qo); outline-offset:3px; }

/* --- Schermi stretti ----------------------------------------------- */
@media (max-width:1024px) {
	body.qdn-mo--piena .qdn-motion-cards { grid-template-columns:repeat(2,1fr); }
	body.qdn-mo--piena .qdn-motion-griglia { grid-template-columns:repeat(2,48.5%); }
	body.qdn-mo--piena .qdn-motion-sec { padding:84px 0; }
}
@media (max-width:900px) {
	body.qdn-mo--piena .qdn-motion-home.qdn-motion-pin .qdn-motion-hero { height:auto; }
	body.qdn-mo--piena .qdn-motion-home.qdn-motion-pin .qdn-motion-hero__pin { position:relative; top:auto; }
	body.qdn-mo--piena .qdn-motion-hero__media { transform:none; }
	body.qdn-mo--piena .qdn-motion-hero__inner { transform:none; opacity:1; }
	body.qdn-mo--piena .qdn-motion-hero__pin::after { transform:scale(.9); opacity:.5; }
	body.qdn-mo--piena .qdn-motion-hero__testo::before { height:18px; }
	body.qdn-mo--piena .qdn-motion-home.qdn-motion-js .qdn-motion-rv.is-in { transition-duration:.38s,.42s; }
}
@media (max-width:600px) {
	body.qdn-mo--piena .qdn-motion-sec { padding:64px 0; }
	body.qdn-mo--piena .qdn-motion-wrap { padding-left:20px; padding-right:20px; }
	body.qdn-mo--piena .qdn-motion-hero__inner { padding-left:20px; padding-right:20px; }
	body.qdn-mo--piena .qdn-motion-cards, body.qdn-mo--piena .qdn-motion-griglia { grid-template-columns:1fr; gap:20px; }
	body.qdn-mo--piena .qdn-motion-cards--piatte { gap:28px; }
	body.qdn-mo--piena .qdn-motion-hero__pin { min-height:520px; }
	body.qdn-mo--piena .qdn-motion-cta-card { padding:40px 24px 42px; }
	body.qdn-mo--piena .qdn-motion-btn .elementor-button { width:100%; text-align:center; }
}

/* --- Movimento ridotto: cintura di sicurezza ------------------------
 * La difesa vera e' nel JavaScript, che qui non aggiunge nemmeno le
 * classi .qdn-motion-js e .qdn-motion-pin: senza quelle nessuno stato
 * nascosto viene mai creato.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
	body.qdn-mo--piena .qdn-motion-home *, body.qdn-mo--piena .qdn-motion-home *::before, body.qdn-mo--piena .qdn-motion-home *::after {
		animation:none !important; transition:none !important;
	}
	body.qdn-mo--piena .qdn-motion-home.qdn-motion-pin .qdn-motion-hero { height:auto; }
	body.qdn-mo--piena .qdn-motion-home.qdn-motion-pin .qdn-motion-hero__pin { position:relative; top:auto; }
	body.qdn-mo--piena .qdn-motion-hero__media { transform:none; }
	body.qdn-mo--piena .qdn-motion-hero__inner { transform:none; opacity:1; }
	body.qdn-mo--piena .qdn-motion-home .qdn-motion-rv, body.qdn-mo--piena .qdn-motion-home .qdn-motion-word > i {
		opacity:1; transform:none; filter:none;
	}
	body.qdn-mo--piena .qdn-motion-home .qdn-motion-amb__media img { clip-path:none; transform:none; }
}