/* «In arrivo» — coming soon di maurofelter.com (15/9/2026, rifatta a schermata sola il 16/9).
   Si carica solo quando la coming soon è attiva (inc/in-arrivo.php).
   Colori e font solo dai token di theme.json. */

.mf-nav-in-arrivo .mf-brand { cursor: default; }

/* La schermata: tutto al centro, niente da scorrere. */
/* Il contenitore dei blocchi ha un margine in cima: qui non serve, la pagina non deve scorrere. */
.mf-in-arrivo .wp-site-blocks { margin: 0; padding: 0; }
.mf-in-arrivo .wp-site-blocks > * { margin-block-start: 0; } /* il «block gap» di WordPress (24px) faceva scorrere la pagina */
.mf-ia-screen {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 5.5rem 1.2rem 5rem;
	color: var(--wp--preset--color--ink);
}

/* Il logo di Mauro, e sopra un riflesso d’oro che passa lento (l’«animazione» del 16/9). */
.mf-ia-logo-wrap {
	position: relative;
	width: clamp(88px, 10vw, 128px);   /* 18/9 Mauro: il logo centrale un po' più piccolo (era 96–150) */
	margin: 0 0 2.2rem;
	opacity: 0;
	transform: translateY(8px);
	animation: mfIaIn 1.4s cubic-bezier(.2, .7, .2, 1) .2s forwards;
}
.mf-ia-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); }
.mf-ia-logo-wrap::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 236, 190, .85) 50%, transparent 62%);
	background-size: 260% 100%;
	background-position: 130% 0;
	-webkit-mask: var(--mf-logo) center / contain no-repeat;
	mask: var(--mf-logo) center / contain no-repeat;
	animation: mfIaSheen 8s ease-in-out calc(var(--mf-ia-t, 0s) + 2.6s) infinite;
	pointer-events: none;
}
@keyframes mfIaIn { to { opacity: 1; transform: none; } }
@keyframes mfIaSheen {
	0%   { background-position: 130% 0; }
	28%  { background-position: -130% 0; }
	100% { background-position: -130% 0; }
}

/* I testi: riga piccola, titolo, sottotitolo; entrano uno dopo l’altro. */
.mf-ia-k, .mf-ia-ttl, .mf-ia-sub, .mf-ia-cta, .mf-ia-guarda {
	opacity: 0;
	transform: translateY(8px);
	animation: mfIaIn 1.1s cubic-bezier(.2, .7, .2, 1) forwards;
}
/* --mf-ia-t la mette la forgia (in-arrivo-forgia.js): i testi aspettano i tre colpi. Senza script, 0. */
.mf-ia-k { animation-delay: calc(var(--mf-ia-t, 0s) + .6s); }
.mf-ia-ttl { animation-delay: calc(var(--mf-ia-t, 0s) + .8s); }
.mf-ia-sub { animation-delay: calc(var(--mf-ia-t, 0s) + 1.05s); }
.mf-ia-cta { animation-delay: calc(var(--mf-ia-t, 0s) + 1.4s); }
.mf-ia-guarda { animation-delay: calc(var(--mf-ia-t, 0s) + 1.7s); }

/* La forgia: il canvas col martello sta sopra il logo, più largo e più alto di lui; l'immagine
   resta nel flusso (tiene lo spazio) ma non si vede. Un clic riforgia. */
.mf-ia-logo-wrap.forgia { animation: none; opacity: 1; transform: none; cursor: pointer; }
.mf-ia-logo-wrap.forgia .mf-ia-logo { visibility: hidden; }
.mf-ia-forgia { position: absolute; z-index: 2; pointer-events: none; }

/* L'alone d'oro: un cerchio fisso, molto sfumato, dietro a tutto (la schermata sta sopra con z-index 1).
   Lo muove lo script: sotto il logo, poi dietro al mouse. */
.mf-in-arrivo .mf-ia-screen { position: relative; z-index: 1; }
.mf-ia-glow {
	position: fixed;
	left: 0;
	top: 0;
	width: 110vmin;
	height: 110vmin;
	margin: -55vmin 0 0 -55vmin;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(220, 180, 104, .13) 0%, rgba(220, 180, 104, .07) 22%, rgba(210, 172, 98, .025) 45%, rgba(200, 164, 92, 0) 66%);
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.6s ease;
	will-change: transform;
}
.mf-ia-glow.on { opacity: 1; }

.mf-ia-k {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .66rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 1.1rem;
}
.mf-ia-ttl {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(2.4rem, 7vw, 5.5rem);
	line-height: 1.05;
	letter-spacing: .02em;
	max-width: min(92vw, 11em);
	margin: 0;
	text-wrap: balance;
	white-space: pre-line;   /* 18/9: l'a capo lo decide il testo («Esemplari unici,» / «dal 1989») */
}
.mf-ia-sub {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.1rem, 2.2vw, 1.55rem);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	max-width: min(92vw, 26em);
	margin: 1.3rem 0 0;
	text-wrap: balance;
}
.mf-ia-cta {
	display: inline-block;
	margin-top: 2.4rem;
	padding: .95rem 1.8rem;
	border: 1px solid var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .66rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	transition: background .35s ease, color .35s ease;
}
.mf-ia-cta:hover, .mf-ia-cta:focus-visible { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--void); }

/* Schermi bassi (portatili a 720, telefoni in orizzontale): spazi più stretti, così il pulsante
   del video non tocca la riga legale. */
/* Telefono: il logo che si incide più grande (Seba 16/9, guardandolo dal cellulare). */
@media (max-width: 700px) {
	.mf-ia-logo-wrap { width: clamp(112px, 30vw, 128px); margin-bottom: 1.8rem; }   /* 18/9: era 150–180 */
	/* 18/9: il titolo va a capo dove lo dice il testo (\n dopo la virgola), vedi .mf-ia-ttl white-space */
}

@media (max-height: 780px) and (min-width: 701px) {
	.mf-ia-screen { padding: 4.5rem 1.2rem 5.5rem; }
	.mf-ia-logo-wrap { width: clamp(64px, 8vw, 96px); margin-bottom: 1.4rem; }
	.mf-ia-ttl { font-size: clamp(2rem, 5.5vw, 4rem); }
	.mf-ia-sub { margin-top: .9rem; }
	.mf-ia-cta { margin-top: 1.6rem; padding: .8rem 1.5rem; }
	.mf-in-arrivo .mf-ia-guarda { margin-top: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mf-ia-logo-wrap, .mf-ia-k, .mf-ia-ttl, .mf-ia-sub, .mf-ia-cta, .mf-ia-guarda { animation: none; opacity: 1; transform: none; }
	.mf-ia-logo-wrap::after { display: none; }
}

/* Riga legale: titolare e Partita IVA in pagina (art. 35 DPR 633/72). */
.mf-ia-legal {
	position: fixed;
	left: clamp(1rem, 3vw, 2.2rem);
	bottom: 1.1rem;
	z-index: 46;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-dim);
}
.mf-ia-legal button {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0;
	margin-left: .15rem;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: color .3s ease;
}
.mf-ia-legal button:hover,
.mf-ia-legal button:focus-visible { color: var(--wp--preset--color--gold-bright); }

/* Pannello informazioni. */
#mf-ia-info {
	position: fixed;
	inset: 0;
	z-index: 1100; /* sopra il menu (.mf-nav è a 1000), sotto banner cookie e loader */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.2rem;
	background: rgba(6, 6, 6, .88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease;
}
#mf-ia-info.on { opacity: 1; pointer-events: auto; }

.mf-ia-box {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 84vh;
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	padding: 2.4rem clamp(1.2rem, 4vw, 2.4rem) 2rem;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	font-size: .9rem;
	line-height: 1.7;
}
.mf-ia-box h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: 1.9rem;
	line-height: 1.15;
	margin: 0 0 .4rem;
	letter-spacing: .02em;
}
.mf-ia-box h3 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .62rem;
	font-weight: 400;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 1.5rem 0 .35rem;
}
.mf-ia-box p { margin: 0 0 .6rem; color: var(--wp--preset--color--muted); }
.mf-ia-close {
	position: absolute;
	top: .7rem;
	right: .9rem;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}
.mf-ia-close:hover, .mf-ia-close:focus-visible { color: var(--wp--preset--color--gold-bright); }

/* Il video «solo gioielli» si guarda a richiesta (come sfondo in cima è stato provato e scartato, 15/9). */
.mf-in-arrivo .mf-ia-guarda {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-top: 1.3rem;
	padding: .4rem .2rem;
	background: none;
	border: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .6rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: color .3s ease;
}
.mf-in-arrivo .mf-ia-guarda .t {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	margin: 0;
	max-width: none;
}
.mf-in-arrivo .mf-ia-guarda svg { color: var(--wp--preset--color--gold); }
.mf-in-arrivo .mf-ia-guarda:hover,
.mf-in-arrivo .mf-ia-guarda:focus-visible { color: var(--wp--preset--color--gold-bright); }

#mf-ia-video {
	position: fixed;
	inset: 0;
	z-index: 1100; /* sopra il menu (.mf-nav è a 1000), sotto banner cookie e loader */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(6, 6, 6, .94);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease;
}
#mf-ia-video.on { opacity: 1; pointer-events: auto; }
#mf-ia-video video {
	width: 100%;
	max-width: 1100px;
	max-height: 80vh;
	background: var(--wp--preset--color--void);
}
#mf-ia-video .mf-ia-close { top: 1rem; right: 1.2rem; font-size: 2rem; }

/* Una lingua alla volta, seguendo il selettore IT/EN. */
html[data-lang="en"] .ia-it { display: none; }
html:not([data-lang="en"]) .ia-en { display: none; }

/* Credito dello studio, di fronte alla riga legale (stessa dicitura dei siti Lucia, AMA, Stile a Strati). */
.mf-ia-credit {
	position: fixed;
	right: clamp(1rem, 3vw, 2.2rem);
	bottom: 1.1rem;
	z-index: 46;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-dim);
}
.mf-ia-credit a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: color .3s ease;
}
.mf-ia-credit a:hover,
.mf-ia-credit a:focus-visible { color: var(--wp--preset--color--gold-bright); }

@media (max-width: 760px) {
	/* Sul telefono la scritta «Felter» si attaccava a «IT»: resta solo il simbolo (il logo grande è al centro). */
	.mf-nav-in-arrivo .mf-brand-word { display: none; }
	.mf-ia-legal { left: 0; right: 0; text-align: center; bottom: .7rem; }
	.mf-ia-credit { left: 0; right: 0; text-align: center; bottom: 1.9rem; }
}

/* Scala di misura (18/9): pulsante principale 56, «Guarda i gioielli in movimento» 48 (bersaglio da dito). Prima 49 e 27. */
.mf-ia-cta { box-sizing: border-box; min-height: 56px; padding-block: 0; display: inline-flex; align-items: center; justify-content: center; }
.mf-ia-guarda { box-sizing: border-box; min-height: 48px; }

/* ===== Lista «Avvisami quando apre» (22/9/2026). Scala: pulsanti e campo 48, spazi 8/16/24, testi 20/24.
   Chiusa finché non si tocca «Avvisami quando apre»: la pagina resta com'era. ===== */
.mf-ia-avvisa { margin-top: 8px; width: 100%; max-width: 440px; }
.mf-ia-avvisa-apri { box-sizing: border-box; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px;
	background: none; border: 0; cursor: pointer; color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--sans);
	font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; transition: color .3s; }
.mf-ia-avvisa-apri svg { color: var(--wp--preset--color--gold); }
.mf-ia-avvisa-apri:hover, .mf-ia-avvisa-apri:focus-visible, .mf-ia-avvisa-apri[aria-expanded="true"] { color: var(--wp--preset--color--ink); }
.mf-ia-avvisa-form { margin-top: 16px; text-align: left; }
.mf-ia-avvisa-form[hidden] { display: none; }
.mf-ia-av-riga { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.mf-ia-av-riga[hidden] { display: none; }
.mf-ia-av-riga input { box-sizing: border-box; height: 48px; min-width: 0; padding: 0 16px; background: rgba(6, 6, 6, .7);
	border: 1px solid rgba(200, 164, 92, .35); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--sans); font-size: 16px; }
.mf-ia-av-riga input:focus { outline: none; border-color: var(--wp--preset--color--gold); }
.mf-ia-av-invia { box-sizing: border-box; height: 48px; padding: 0 24px; border: 1px solid var(--wp--preset--color--gold); background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--void); font-family: var(--wp--preset--font-family--sans); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; cursor: pointer; }
.mf-ia-av-invia:disabled { opacity: .6; cursor: default; }
.mf-ia-av-consenso { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: .74rem; line-height: 20px; color: var(--wp--preset--color--muted); cursor: pointer; }
.mf-ia-av-consenso[hidden] { display: none; }
.mf-ia-av-consenso input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--wp--preset--color--gold); }
.mf-ia-av-nota { margin: 8px 0 0 26px; font-size: .7rem; line-height: 20px; }
.mf-ia-av-nota button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--wp--preset--color--gold); text-decoration: underline; font: inherit; }
.mf-ia-av-msg { margin: 8px 0 0; min-height: 20px; font-size: .74rem; line-height: 20px; color: var(--wp--preset--color--muted); }
.mf-ia-av-msg.fatto { color: var(--wp--preset--color--gold-bright, #E4C788); text-align: center; margin-top: 0; }
/* A cosa fatta spunta e campo spariscono: quello che resta si centra, senza il rientro della spunta. */
.mf-ia-avvisa-form.fatto { text-align: center; }
.mf-ia-avvisa-form.fatto .mf-ia-av-nota { margin: 8px 0 0; }
.mf-ia-av-sr, .mf-ia-av-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 420px) { .mf-ia-av-riga { grid-template-columns: 1fr; } }