@charset "utf-8";
/* CSS Document */

.hero-waiting {
	position:relative;
	height:100vh;
	min-height:500px;
	padding:clamp(1.5rem, 4vw, 3.75rem) 0;
	background:url(/public/waiting/hero.jpg) no-repeat center;
	background-size:cover;
	background-color:#C6BDB2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:clamp(1rem, 2vw, 1.5rem);
}
.hero-waiting::before {
	content:"";
	position:absolute;
	inset:0;
	background:transparent linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%) 0% 0% no-repeat padding-box;
	mix-blend-mode:multiply;
	opacity:1;
	z-index:1;
}
.hero-waiting > * {
	position:relative;
	z-index:2;
}
.hero-title-wrapper {
	gap:clamp(.5rem, 1vw, 2rem);
	margin-bottom:clamp(1rem, 2.5vw, 2rem)
}
.hero-waiting h1 {
  font-family:"Italiana", sans-serif;
	font-size:clamp(39px, 7vw, 80px);
  font-weight:400;
  line-height:clamp(48px, 7vw, 95px);
  letter-spacing:0;
	/*font-style:italic;*/
	margin:0;
}
.hero-waiting h2 {
	font-size:clamp(20px, 4vw, 30px);
  font-weight:400;
  line-height:clamp(24px, 4vw, 40px);
  letter-spacing:0;
	margin:0;
}
.hero-glyph {
	flex-shrink:0;
	height:auto;
	max-width:clamp(40px, 4vw, 55px);
}
.hero-text-wrapper {
	font-size:clamp(14px, 1.2vw, 16px);
	margin-top:clamp(-7rem, -8vw, -3rem);
}
.hero-scroll-btn {
	width:clamp(45px, 4.23vw, 90px);
	height:clamp(45px, 4.23vw, 90px);
	background:transparent;
	border:1px solid var(--quaternary);
	border-radius:50%;
	padding:0;
	flex-shrink:0;
	transition:border-color 0.3s ease;
}
.hero-scroll-btn img {
	max-width:clamp(6px, 0.56vw, 12px);
	object-fit:contain;
	transition:transform 0.3s ease;
}
.hero-scroll-btn:hover {
	border-color:var(--primary);
}
.hero-scroll-btn:hover img {
	transform:translateY(4px);
}

.form-waiting {
	padding:5rem 0;
}
.form-waiting h2 {
  font-family:"Italiana", sans-serif;
	font-size:clamp(23px, 7vw, 46px);
  font-weight:400;
  letter-spacing:0;
  line-height:clamp(27px, 7vw, 54px);
	margin-bottom:10rem;
}
.form-waiting img {
	display:block;
}
.form-style-4.form-style-4-text-tertiary .form-group {
  margin-bottom:2rem;
}
.form-style-4.form-style-4-text-tertiary .form-control {
  color:#393E4D;
}
.form-style-4.form-style-4-text-tertiary .form-control::placeholder {
  color:#393E4D;
	letter-spacing:.5px;
}
.form-style-4.form-style-4-text-tertiary .form-control {
  border-bottom-color:rgba(57,62,77,.5);
}
.form-style-4.form-style-4-text-tertiary textarea.form-control {
  border:1px solid rgba(57,62,77,.5);
}
.form-style-4.form-style-4-text-tertiary .form-check-label {
  color:#393E4D;
	font-size:10px;
	display:flow-root;
	line-height:16px;
	letter-spacing:.5px;
}
.form-style-4.form-style-4-text-tertiary .form-check-label a {
  color:#393E4D;
	text-decoration:underline;
}
.form-style-4.form-style-4-text-tertiary .form-check-label a:hover {
	text-decoration:none;
}
.form-style-4.form-style-4-text-tertiary .form-check-input {
  width:22px;
  height:22px;
  margin-top:0;
  margin-right:20px;
  background-color:transparent;
  border:1px solid rgba(57,62,77,.5);
	border-radius:0;
}
.form-style-4.form-style-4-text-tertiary button {
	font-size:12px;
	letter-spacing:2px;
	padding:1rem 3.5rem;
	font-weight:300;
}
.form-style-4.form-style-4-text-tertiary .error {
	font-size:12px;
	letter-spacing:1px;
	color:#fff
}
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

p.copyright {
	font-size:11px;
  font-weight:400;
	color:#393E4D;
	line-height:18px;
	letter-spacing:0;
	margin-bottom:0;
}
p.copyright a {
	color:#393E4D;
	margin:0 10px;
}

.grecaptcha-badge {
	z-index:2;
}


@media(max-width:991px) {
	.form-waiting .form-text {
		text-align:center;
	}
	.form-waiting h2 {
		margin-bottom:3rem;
	}
	.form-waiting img {
		display:inline-block;
  	margin:0 1.8rem 4rem;
	}
}
@media(max-width:767px) {
	.form-waiting img {
		max-width:135px;
		margin:0 1rem 4rem;
	}
}

@media(max-width:575px) {
	.form-waiting img {
		max-width:100px;
  	margin:0 .65rem 4rem;
	}
}
@media(max-width:399px) {
	.form-waiting img {
		max-width:75px;
	}
}

/* ============================================================
   Loghi partner (mobile): la SCRITTA di ogni logo alla stessa
   altezza della scritta di Kervis (riferimento).
   Kervis resta con le max-width dei blocchi qui sopra.
   Viglione ~1.6x e DILS ~0.55x, calcolati dai cap-height reali:
   KERVIS 20/155 px, VIGLIONE 16/200 px, DILS 34/145 px.
   ============================================================ */
@media(max-width:767px) {
	.form-waiting img[src*="logo-viglione"] { max-width:217px; }
	.form-waiting img[src*="logo-dils"]     { max-width:74px; }
}
@media(max-width:575px) {
	.form-waiting img[src*="logo-viglione"] { max-width:161px; }
	.form-waiting img[src*="logo-dils"]     { max-width:55px; }
}
@media(max-width:399px) {
	.form-waiting img[src*="logo-viglione"] { max-width:121px; }
	.form-waiting img[src*="logo-dils"]     { max-width:41px; }
}

/* ============================================================
   ANIMAZIONE DI INGRESSO DELLA HERO  (waiting)
   Ricavata dal prototipo XD "Gioberti_8_waiting":
   opacita' lineare + blur gaussiano che si riassorbe.
   Il blur e' applicato solo ad ALCUNE lettere (vedi markup:
   <i class="hc b"> = con blur, <i class="hc"> = nitida).
   E' tutta CSS: se il JS non gira, l'animazione parte lo stesso.
   ============================================================ */

.hero-waiting {
	--anim-delay:.2s;			/* attesa prima di partire			*/
	--anim-dur:1.3s;			/* durata titolo e glifi			*/
	--anim-delay-p:1.42s;		/* paragrafo: parte dopo			*/
	--anim-dur-p:.75s;
	--anim-blur:1;				/* moltiplicatore globale del blur	*/
	--anim-scale:1;				/* moltiplicatore globale scala		*/

	--hero-sc1:1.03;			/* riga 1 parte piu' GRANDE			*/
	--hero-sc2:0.97;			/* riga 2 parte piu' PICCOLA		*/

	--glyph-tx:clamp(6px, 1vw, 12px);	/* i glifi partono piu' larghi	*/
	--glyph-sc:1.03;
	--glyph-b:clamp(3px, .55vw, 7px);

	--lede-b:.64em;				/* blur del paragrafo				*/
	--lede-sc:1.045;			/* il paragrafo parte piu' grande	*/
}

/* --- struttura del titolo: una riga per .hl, una lettera per .hc --- */
.hero-waiting h1 .hl {
	display:block;
}
.hero-waiting h1 .hw {
	white-space:nowrap;
}
/* le lettere restano INLINE: filter non tocca il layout,
   la crenatura del font resta quella originale */
.hero-waiting h1 .hc {
	--b:0em;
	font-style:inherit;
}
/* unica eccezione: una lettera che deve annullare la scala della riga */
.hero-waiting h1 .hc.ns {
	display:inline-block;
}

.hero-waiting h1 .hc.b,
.hero-waiting .hero-glyph,
.hero-waiting .hero-text-wrapper p {
	will-change:opacity, filter, transform;
}
.hero-waiting h1 .hl {
	will-change:transform;
}

/* lettere nitide: sola dissolvenza, nessun layer di blur inutile */
.hero-waiting h1 .hc {
	animation:heroLetterFade var(--anim-dur) linear var(--anim-delay) both;
}
.hero-waiting h1 .hc.b {
	animation:heroLetterBlur var(--anim-dur) linear var(--anim-delay) both;
}
.hero-waiting h1 .hc.ns {
	animation:heroLetterBlur var(--anim-dur) linear var(--anim-delay) both,
			  heroNoScale    var(--anim-dur) linear var(--anim-delay) both;
}
/* la scala e' sulla riga intera, cosi' scalano anche gli spazi fra le parole */
.hero-waiting h1 .hl {
	animation:heroLineScale var(--anim-dur) linear var(--anim-delay) both;
}
.hero-waiting h1 .hl-1 { --sc:var(--hero-sc1); }
.hero-waiting h1 .hl-2 { --sc:var(--hero-sc2); }

.hero-waiting .hero-glyph {
	animation:heroGlyphIn var(--anim-dur) linear calc(var(--anim-delay) + .03s) both;
}
.hero-waiting .hero-glyph-left  { --tx:calc(var(--glyph-tx) * -1); }
.hero-waiting .hero-glyph-right { --tx:var(--glyph-tx); }

.hero-waiting .hero-text-wrapper p {
	animation:heroLedeIn var(--anim-dur-p) linear var(--anim-delay-p) both;
}

/* --- avvio: l'animazione resta ferma finche' il webfont non e' pronto ---
   Senza questo parte subito col font di ripiego e si vede ripartire dopo lo
   swap: e' il "doppio salto". La classe .hero-js la mette uno script inline
   nell'<head>; se il JS e' disattivato la classe non c'e' e l'animazione
   parte immediatamente, come deve. */
.hero-js .hero-waiting h1 .hl,
.hero-js .hero-waiting h1 .hc,
.hero-js .hero-waiting .hero-glyph,
.hero-js .hero-waiting .hero-text-wrapper p {
	animation-play-state:paused;
}
.hero-js.hero-ready .hero-waiting h1 .hl,
.hero-js.hero-ready .hero-waiting h1 .hc,
.hero-js.hero-ready .hero-waiting .hero-glyph,
.hero-js.hero-ready .hero-waiting .hero-text-wrapper p {
	animation-play-state:running;
}

/* --- spaziatura titolo / paragrafo ---
   Il valore originale e' clamp(-7rem, -8vw, -3rem): sopra i ~1400px di
   larghezza vale -7rem (-112px), molto piu' dello spazio disponibile
   (32px di margin-bottom del titolo + 24px di gap), quindi il paragrafo
   finisce sopra il titolo. Lo riduco qui senza toccare la regola originale:
   se serve piu' o meno aria e' l'unico numero da cambiare. */
.hero-waiting .hero-text-wrapper {
	margin-top:clamp(-2rem, -2vw, -.5rem);
}

@keyframes heroLetterFade {
	from { opacity:0; }
	to   { opacity:1; }
}
/* blur ~ b0 * (1 - p)^0.7, opacita' lineare — curva misurata sull'XD */
@keyframes heroLetterBlur {
	0%   { opacity:0;   filter:blur(calc(var(--b) * var(--anim-blur))); }
	12%  { opacity:.12; filter:blur(calc(var(--b) * var(--anim-blur) * .91)); }
	25%  { opacity:.25; filter:blur(calc(var(--b) * var(--anim-blur) * .82)); }
	38%  { opacity:.38; filter:blur(calc(var(--b) * var(--anim-blur) * .72)); }
	50%  { opacity:.50; filter:blur(calc(var(--b) * var(--anim-blur) * .62)); }
	62%  { opacity:.62; filter:blur(calc(var(--b) * var(--anim-blur) * .51)); }
	75%  { opacity:.75; filter:blur(calc(var(--b) * var(--anim-blur) * .38)); }
	88%  { opacity:.88; filter:blur(calc(var(--b) * var(--anim-blur) * .23)); }
	100% { opacity:1;   filter:blur(0); }
}
@keyframes heroLineScale {
	0%   { transform:scale(calc(1 + (var(--sc) - 1) * var(--anim-scale))); }
	50%  { transform:scale(calc(1 + (var(--sc) - 1) * var(--anim-scale) * .55)); }
	75%  { transform:scale(calc(1 + (var(--sc) - 1) * var(--anim-scale) * .30)); }
	100% { transform:scale(1); }
}
/* inverso esatto di heroLineScale sulla riga 2 */
@keyframes heroNoScale {
	0%   { transform:scale(calc(1 / (1 + (var(--hero-sc2) - 1) * var(--anim-scale)))); }
	50%  { transform:scale(calc(1 / (1 + (var(--hero-sc2) - 1) * var(--anim-scale) * .55))); }
	75%  { transform:scale(calc(1 / (1 + (var(--hero-sc2) - 1) * var(--anim-scale) * .30))); }
	100% { transform:scale(1); }
}
/* i glifi: blur + scala + traslazione verso l'esterno che rientra */
@keyframes heroGlyphIn {
	0%   { opacity:0;   filter:blur(calc(var(--glyph-b) * var(--anim-blur)));
		   transform:translateX(var(--tx)) scale(var(--glyph-sc)); }
	25%  { opacity:.25; filter:blur(calc(var(--glyph-b) * var(--anim-blur) * .82));
		   transform:translateX(calc(var(--tx) * .80)) scale(calc(1 + (var(--glyph-sc) - 1) * .80)); }
	50%  { opacity:.50; filter:blur(calc(var(--glyph-b) * var(--anim-blur) * .62));
		   transform:translateX(calc(var(--tx) * .55)) scale(calc(1 + (var(--glyph-sc) - 1) * .55)); }
	75%  { opacity:.75; filter:blur(calc(var(--glyph-b) * var(--anim-blur) * .38));
		   transform:translateX(calc(var(--tx) * .30)) scale(calc(1 + (var(--glyph-sc) - 1) * .30)); }
	100% { opacity:1;   filter:blur(0); transform:translateX(0) scale(1); }
}
/* paragrafo: blur molto marcato rispetto al corpo + scala 1,045 */
@keyframes heroLedeIn {
	0%   { opacity:0;   filter:blur(calc(var(--lede-b) * var(--anim-blur)));
		   transform:scale(var(--lede-sc)); }
	23%  { opacity:.23; filter:blur(calc(var(--lede-b) * var(--anim-blur) * .78));
		   transform:scale(calc(1 + (var(--lede-sc) - 1) * .89)); }
	33%  { opacity:.33; filter:blur(calc(var(--lede-b) * var(--anim-blur) * .65));
		   transform:scale(calc(1 + (var(--lede-sc) - 1) * .83)); }
	56%  { opacity:.56; filter:blur(calc(var(--lede-b) * var(--anim-blur) * .32));
		   transform:scale(calc(1 + (var(--lede-sc) - 1) * .50)); }
	71%  { opacity:.71; filter:blur(calc(var(--lede-b) * var(--anim-blur) * .23));
		   transform:scale(calc(1 + (var(--lede-sc) - 1) * .33)); }
	100% { opacity:1;   filter:blur(0); transform:scale(1); }
}

@media (prefers-reduced-motion:reduce) {
	.hero-waiting h1 .hl,
	.hero-waiting h1 .hc,
	.hero-waiting .hero-glyph,
	.hero-waiting .hero-text-wrapper p {
		animation:none !important;
		opacity:1 !important;
		filter:none !important;
		transform:none !important;
	}
}

/* ============================================================
   OVERLAY "INVIO IN CORSO" del form contatti (waiting)
   Lock-screen centrato, sfondo scuro sfocato, testo Italiana.
   Attivato da view-waiting.js con la classe .is-visible
   ============================================================ */
#gob-overlay {
	position:fixed;
	inset:0;
	z-index:99999;
	display:none;
	align-items:center;
	justify-content:center;
	background:rgba(57,62,77,.55);				/* --tertiary translucido */
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	opacity:0;
	transition:opacity .35s ease;
}
#gob-overlay.is-visible {
	display:flex;
	opacity:1;
}
#gob-overlay .gob-overlay-inner {
	text-align:center;
	padding:2rem;
}
#gob-overlay .gob-spinner {
	display:block;
	width:64px;
	height:64px;
	margin:0 auto 1.6rem;
	border:2px solid rgba(242,238,235,.25);
	border-top-color:#F2EEEB;					/* --quaternary */
	border-radius:50%;
	animation:gobSpin 1s linear infinite;
}
#gob-overlay .gob-overlay-text {
	font-family:"Italiana", serif;
	font-size:2rem;
	line-height:1.2;
	letter-spacing:.08em;
	margin:0 0 .4rem;
	color:#F2EEEB;
}
#gob-overlay .gob-overlay-sub {
	font-family:"Montserrat", sans-serif;
	font-size:.78rem;
	letter-spacing:.18em;
	text-transform:uppercase;
	margin:0;
	color:rgba(242,238,235,.75);
}
@keyframes gobSpin {
	to { transform:rotate(360deg); }
}
@media (prefers-reduced-motion:reduce) {
	#gob-overlay .gob-spinner { animation-duration:2s; }
	#gob-overlay { transition:none; }
}