/* GV Gateway 1.1.0 — ingresso a due destinazioni.
   Usa i font già caricati dal tema (Playfair Display, Outfit). */

#gvg {
	--gvg-night: #0E0D0C;
	--gvg-line: rgba(243, 240, 234, .14);
	--gvg-cream: #F3F0EA;
	--gvg-ink: #181818;
	--gvg-champagne: #C9A96E;
	--gvg-gold: #C9A227;
	--gvg-white: #F8F9FA;
	--gvg-steel: #B8BDC7;
	--gvg-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--gvg-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--gvg-ease: cubic-bezier(.22, .61, .36, 1);

	position: fixed;
	inset: 0;
	z-index: 99990; /* sopra tema e cursore (9999), sotto il banner cookie Complianz (99999) */
	overflow: hidden;
	background: var(--gvg-night);
	color: var(--gvg-cream);
	font-family: var(--gvg-body);
	line-height: 1.55;
	cursor: auto;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
	outline: none;
}
#gvg *, #gvg *::before, #gvg *::after { box-sizing: border-box; cursor: inherit; }
#gvg button, #gvg a { cursor: pointer; }
html.gvg-out #gvg { opacity: 0; transition: opacity .45s ease; pointer-events: none; }

.gvg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* sfondo */
.gvg-bg {
	position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(60% 70% at 28% 40%, rgba(201, 169, 110, .11), transparent 70%),
		radial-gradient(55% 65% at 76% 60%, rgba(184, 189, 199, .08), transparent 70%),
		linear-gradient(180deg, #0E0D0C, #0A0A0A);
}
.gvg-glow {
	position: absolute; inset: -20%; z-index: -1;
	background: radial-gradient(30% 30% at 50% 50%, rgba(201, 162, 39, .10), transparent 70%);
	animation: gvg-drift 14s ease-in-out infinite alternate;
}
@keyframes gvg-drift { from { transform: translate(-12%, -6%); } to { transform: translate(14%, 8%); } }

/* salta intro */
.gvg-skip {
	position: absolute; z-index: 6;
	top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px;
	margin: 0; padding: 12px 16px;
	font: 500 12px/1 var(--gvg-body); letter-spacing: .14em; text-transform: uppercase;
	color: var(--gvg-cream); background: rgba(14, 13, 12, .6);
	border: 1px solid var(--gvg-line); border-radius: 2px;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	opacity: 0; pointer-events: none; transition: opacity .3s;
}
html.gvg-play .gvg-skip { opacity: 1; pointer-events: auto; }
.gvg-skip:hover { border-color: var(--gvg-champagne); }

/* intro: orizzonte, marchio, nome */
.gvg-horizon {
	position: absolute; left: 8%; right: 8%; top: 50%; height: 1px;
	background: linear-gradient(90deg, transparent, var(--gvg-champagne) 20%, var(--gvg-gold) 80%, transparent);
	opacity: 0; pointer-events: none;
}
.gvg-intro {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; opacity: 0; pointer-events: none;
}
.gvg-mark { width: min(120px, 26vw); height: auto; margin-bottom: 26px; transform: translateY(-14px); overflow: visible; }
.gvg-mark path { fill: none; stroke: var(--gvg-champagne); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gvg-name { font: italic 400 clamp(1.6rem, 4.4vw, 3.2rem)/1 var(--gvg-display); color: var(--gvg-cream); margin-top: 18px; }
.gvg-sub { font: 500 11px/1 var(--gvg-body); letter-spacing: .32em; text-transform: uppercase; color: rgba(243, 240, 234, .6); margin-top: 18px; }

/* pannelli */
.gvg-panels { position: absolute; inset: 0; display: flex; }
.gvg-divider {
	position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 2;
	background: linear-gradient(180deg, transparent, var(--gvg-line) 15%, var(--gvg-line) 85%, transparent);
	transform-origin: top; transition: left .6s var(--gvg-ease);
}
.gvg-panel {
	position: relative; isolation: isolate; flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(28px, 5vw, 72px);
	padding-bottom: calc(clamp(28px, 5vw, 72px) + env(safe-area-inset-bottom, 0px));
	overflow: hidden;
	transition: flex-grow .6s var(--gvg-ease), opacity .4s;
}
.gvg-content { display: flex; flex-direction: column; align-items: flex-start; max-width: 520px; }
.gvg-art { position: absolute; inset: 0; z-index: -1; }
.gvg-a .gvg-art { background: radial-gradient(80% 70% at 30% 35%, rgba(201, 169, 110, .13), transparent 70%); }
.gvg-b .gvg-art { background: radial-gradient(80% 70% at 70% 35%, rgba(184, 189, 199, .10), transparent 70%); }
.gvg-traj { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gvg-construct { position: absolute; inset: 0; width: 100%; height: 100%; }
.gvg-construct circle, .gvg-construct line {
	fill: none; stroke: var(--gvg-champagne); stroke-width: 1; vector-effect: non-scaling-stroke;
	opacity: .17; transition: opacity .6s;
}
.gvg-a:hover .gvg-construct circle, .gvg-a:hover .gvg-construct line,
.gvg-a:focus-within .gvg-construct circle, .gvg-a:focus-within .gvg-construct line { opacity: .42; }

.gvg-logo-a { width: 54px; height: auto; margin: 0 0 22px; }
.gvg-logo-a path { fill: var(--gvg-champagne); }
.gvg-logo-b { width: auto; height: 54px; margin: 0 0 22px; display: block; object-fit: contain; }

#gvg .gvg-tag {
	display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0;
	font: 500 11px/1.2 var(--gvg-body); letter-spacing: .24em; text-transform: uppercase;
}
#gvg .gvg-tag::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.gvg-a .gvg-tag { color: var(--gvg-champagne); }
.gvg-b .gvg-tag { color: var(--gvg-gold); font-weight: 600; }

#gvg .gvg-title { margin: 0; padding: 0; color: inherit; text-wrap: balance; }
.gvg-a .gvg-title { font: 400 clamp(2rem, 4.4vw, 3.6rem)/1.04 var(--gvg-display); color: var(--gvg-cream); }
.gvg-a .gvg-title em { font-style: italic; color: var(--gvg-champagne); }
.gvg-b .gvg-title { font: 700 clamp(1.7rem, 3.8vw, 3.1rem)/1.04 var(--gvg-body); text-transform: uppercase; letter-spacing: -.005em; color: var(--gvg-white); }
.gvg-b .gvg-title span { color: var(--gvg-gold); }

#gvg .gvg-desc { margin: 14px 0 26px; padding: 0; max-width: 36ch; font: 400 clamp(.92rem, 1.25vw, 1.05rem)/1.55 var(--gvg-body); }
.gvg-a .gvg-desc { color: #CFC8BE; }
.gvg-b .gvg-desc { color: var(--gvg-steel); }

#gvg .gvg-cta {
	display: inline-flex; align-items: center; gap: 14px; margin: 0; min-height: 48px;
	padding: 16px 22px; border-radius: 2px; text-decoration: none;
	font: 600 12px/1 var(--gvg-body); letter-spacing: .16em; text-transform: uppercase;
	transition: background .3s, color .3s, border-color .3s;
}
.gvg-arr { display: inline-block; transition: transform .3s var(--gvg-ease); }
#gvg .gvg-a .gvg-cta { background: var(--gvg-cream); color: var(--gvg-ink); border: 1px solid var(--gvg-cream); }
#gvg .gvg-a .gvg-cta:hover, #gvg .gvg-a .gvg-cta:focus-visible { background: var(--gvg-champagne); border-color: var(--gvg-champagne); }
#gvg .gvg-b .gvg-cta { background: transparent; color: var(--gvg-white); border: 1px solid var(--gvg-gold); }
#gvg .gvg-b .gvg-cta:hover, #gvg .gvg-b .gvg-cta:focus-visible { background: var(--gvg-gold); color: #121212; }
#gvg .gvg-cta:hover .gvg-arr, #gvg .gvg-cta:focus-visible .gvg-arr { transform: translateX(4px); }
#gvg .gvg-host { margin: 12px 0 0; padding: 0; font: 400 12px/1.2 var(--gvg-body); letter-spacing: .06em; color: inherit; opacity: .55; }

#gvg :focus-visible { outline: 2px solid var(--gvg-champagne); outline-offset: 3px; }
#gvg .gvg-b :focus-visible { outline-color: var(--gvg-gold); }

/* micro-interazioni: il pannello sotto il puntatore si allarga, l'altro si attenua */
@media (hover: hover) and (min-width: 721px) {
	.gvg-panels:has(.gvg-a:hover) .gvg-a, .gvg-panels:has(.gvg-b:hover) .gvg-b { flex-grow: 1.3; }
	.gvg-panels:has(.gvg-a:hover) .gvg-b, .gvg-panels:has(.gvg-b:hover) .gvg-a { opacity: .55; }
	.gvg-panels:has(.gvg-a:hover) .gvg-divider { left: 56.5%; }
	.gvg-panels:has(.gvg-b:hover) .gvg-divider { left: 43.5%; }
}
.gvg-panels:has(.gvg-a :focus-visible) .gvg-b, .gvg-panels:has(.gvg-b :focus-visible) .gvg-a { opacity: .55; }
.gvg-panel.gvg-tap { opacity: 1 !important; }
.gvg-panel.gvg-tap .gvg-art { filter: brightness(1.6); transition: filter .2s; }

/* sequenza d'ingresso (≈2,6 s). A riposo tutto è già visibile. */
html.gvg-play .gvg-horizon { animation: gvg-hz-in .6s var(--gvg-ease) .2s both, gvg-out .35s ease 1.6s both; }
html.gvg-play .gvg-intro { animation: gvg-in .4s ease .35s both, gvg-out .35s ease 1.65s both; }
html.gvg-play .gvg-mark path { animation: gvg-draw 1s cubic-bezier(.4, 0, .15, 1) .4s both; }
html.gvg-play .gvg-name, html.gvg-play .gvg-sub { animation: gvg-blur-in .55s var(--gvg-ease) .85s both; }
html.gvg-play .gvg-divider { animation: gvg-grow-y .6s var(--gvg-ease) 1.75s both; }
html.gvg-play .gvg-a { animation: gvg-from-left .75s var(--gvg-ease) 1.9s both; }
html.gvg-play .gvg-b { animation: gvg-from-right .75s var(--gvg-ease) 2s both; }
html.gvg-play .gvg-content > * { animation: gvg-rise .6s var(--gvg-ease) both; }
html.gvg-play .gvg-a .gvg-content > :nth-child(1) { animation-delay: 2s; }
html.gvg-play .gvg-a .gvg-content > :nth-child(2) { animation-delay: 2.06s; }
html.gvg-play .gvg-a .gvg-content > :nth-child(3) { animation-delay: 2.12s; }
html.gvg-play .gvg-a .gvg-content > :nth-child(4) { animation-delay: 2.18s; }
html.gvg-play .gvg-a .gvg-content > :nth-child(n+5) { animation-delay: 2.24s; }
html.gvg-play .gvg-b .gvg-content > :nth-child(1) { animation-delay: 2.08s; }
html.gvg-play .gvg-b .gvg-content > :nth-child(2) { animation-delay: 2.14s; }
html.gvg-play .gvg-b .gvg-content > :nth-child(3) { animation-delay: 2.2s; }
html.gvg-play .gvg-b .gvg-content > :nth-child(4) { animation-delay: 2.26s; }
html.gvg-play .gvg-b .gvg-content > :nth-child(n+5) { animation-delay: 2.32s; }

@keyframes gvg-hz-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes gvg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gvg-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gvg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gvg-blur-in { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes gvg-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gvg-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gvg-from-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes gvg-from-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes gvg-from-top { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes gvg-from-bottom { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes gvg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* smartphone e tablet stretti: due fasce una sopra l'altra */
@media (max-width: 720px) {
	.gvg-panels { flex-direction: column; }
	.gvg-divider {
		top: 50%; bottom: auto; left: 6%; right: 6%; width: auto; height: 1px;
		background: linear-gradient(90deg, transparent, var(--gvg-line) 15%, var(--gvg-line) 85%, transparent);
		transform-origin: left;
	}
	.gvg-panel { justify-content: center; padding: 24px 22px; }
	.gvg-a { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
	.gvg-b { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
	.gvg-content { width: 100%; }
	.gvg-logo-a { width: 40px; margin-bottom: 14px; }
	.gvg-logo-b { height: 40px; margin-bottom: 14px; }
	#gvg .gvg-tag { margin-bottom: 10px; }
	#gvg .gvg-desc { margin: 10px 0 18px; }
	#gvg .gvg-cta { width: 100%; justify-content: space-between; }
	#gvg .gvg-host { display: none; }
	html.gvg-play .gvg-divider { animation-name: gvg-grow-x; }
	html.gvg-play .gvg-a { animation-name: gvg-from-top; }
	html.gvg-play .gvg-b { animation-name: gvg-from-bottom; }
}
@media (max-width: 720px) and (max-height: 700px) {
	#gvg .gvg-desc { display: none; }
	#gvg .gvg-tag { margin-bottom: 8px; }
	#gvg .gvg-cta { margin-top: 16px; }
	.gvg-logo-a, .gvg-logo-b { display: none; }
}
/* telefono in orizzontale */
@media (max-height: 480px) and (min-width: 721px) {
	#gvg .gvg-desc, .gvg-logo-a, .gvg-logo-b, #gvg .gvg-host { display: none; }
	.gvg-panel { padding: 24px 32px; justify-content: center; }
	#gvg .gvg-cta { margin-top: 16px; }
}

/* chi chiede meno animazioni vede subito la scelta, ferma */
@media (prefers-reduced-motion: reduce) {
	#gvg, #gvg *, #gvg *::before, html.gvg-out #gvg { animation: none !important; transition: none !important; }
	.gvg-skip { display: none; }
}
html.gvg-skip #gvg, html.gvg-skip #gvg * { animation: none !important; }
html.gvg-skip .gvg-glow { animation: gvg-drift 14s ease-in-out infinite alternate !important; }