/*
 * MA-ZAL Group — welcome screen (first visit on the home page). Reads tokens.css only.
 * Shown while <html> has .mz101-show-welcome (set before paint by template.php from localStorage).
 */
.mzs-welcome {
	position: fixed;
	inset: 0;
	z-index: var(--z-welcome);
	display: none;
	overflow-y: auto;
	background: radial-gradient(56rem 32rem at 50% 38%, var(--c-night-2) 0%, var(--c-night) 62%), var(--c-night);
	color: var(--c-on-night);
}

.mz101-show-welcome .mzs-welcome { display: block; }
.mz101-show-welcome body { overflow: hidden; }
.mzs-welcome.is-leaving { opacity: 0; transition: opacity var(--t-base); }

.mzs-welcome__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-6);
	min-height: 100%;
	box-sizing: border-box;
	padding: calc(var(--s-8) + var(--safe-top)) var(--gutter) calc(var(--s-6) + var(--safe-bottom));
	text-align: center;
}

/* two thin gold rings behind the logo */
.mzs-welcome__frame::before,
.mzs-welcome__frame::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -62%);
}

.mzs-welcome__frame::before { width: min(47.5rem, 94vw); aspect-ratio: 1; border: 1px solid var(--c-night-line); }
.mzs-welcome__frame::after { width: min(40.75rem, 80vw); aspect-ratio: 1; border: 1px solid var(--c-night-line-faint); }

.mzs-welcome__sound {
	position: absolute;
	top: calc(var(--s-5) + var(--safe-top));
	inset-inline-end: var(--s-5);
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 1px solid var(--c-night-line);
	border-radius: 50%;
	background: transparent;
	color: var(--c-gold-night);
	cursor: pointer;
}

.mzs-welcome__brand {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--s-3);
}

.mzs-welcome__logo {
	width: clamp(9rem, 6rem + 9vw, 12rem);
	height: auto;
	filter: drop-shadow(0 1.125rem 2.5rem var(--c-gold-glow));
}

.mzs-welcome__hello { font-size: var(--fs-small); color: var(--c-on-night-3); letter-spacing: 0.04em; }

.mzs-welcome__name {
	font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
	letter-spacing: 0.04em;
	color: var(--c-gold-night);
	direction: ltr;
}

.mzs-welcome__tagline { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: var(--fw-medium); color: var(--c-on-night); }

.mzs-welcome__pick {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--s-4);
	width: 100%;
	max-width: 52rem;
}

.mzs-welcome__label { font-size: var(--fs-tiny); color: var(--c-on-night-3); }

.mzs-welcome__langs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
}

.mzs-welcome__lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-width: 7.375rem;
	min-height: var(--h-control);
	padding: 0 var(--s-4);
	border: 1px solid var(--c-night-line-strong);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--c-on-night);
	font: var(--fw-medium) var(--fs-small)/1 var(--f-text);
	cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast);
}

.mzs-welcome__lang[aria-pressed="true"] { background: var(--c-gold-night); border-color: var(--c-gold-night); color: var(--c-night); font-weight: var(--fw-semi); }

.mzs-welcome__enter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	min-height: 3.5rem;
	padding: 0 var(--s-7);
	border: 0;
	border-radius: var(--r-pill);
	background: var(--g-gold-button);
	color: var(--c-night);
	font: var(--fw-bold) var(--fs-lead)/1 var(--f-text);
	box-shadow: var(--shadow-gold);
	cursor: pointer;
}


.mzs-welcome__hint { font-size: var(--fs-tiny); color: var(--c-on-night-3); }

.mzs-welcome__divisions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2) var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-tiny);
	color: var(--c-on-night-3);
}

.mzs-welcome__divisions li { display: flex; align-items: center; }

.mzs-welcome__divisions li + li::before {
	content: "◆";
	margin-inline-end: var(--s-5);
	color: var(--c-night-sep);
	font-size: 0.625rem;
}

@media (max-width: 47.99rem) {
	.mzs-welcome__frame { justify-content: space-between; gap: var(--s-5); }
	.mzs-welcome__langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
	.mzs-welcome__lang { min-width: 0; border-radius: var(--r-sm); padding: 0 var(--s-2); }
	.mzs-welcome__enter { width: 100%; }
	.mzs-welcome__divisions { display: none; }
}