/* Mizzey — coming soon.
   Colours, type, spacing and motion values are the CoreX theme tokens (theme/theme.json).
   No Mizzey brand value is used: the client identity has not been supplied yet. */

@font-face {
	font-family: 'Space Grotesk';
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
	src: url('fonts/space-grotesk-latin-500-700.woff2') format('woff2');
}

@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
}

@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
}

:root {
	--color-primary: #0B1F3B;
	--color-primary-dark: #06121F;
	--color-accent: #007A9E;
	--color-selection: #BFEFFF;
	--color-inverse: #FFFFFF;
	--color-inverse-soft: rgba(255, 255, 255, 0.72);
	--color-hairline: rgba(255, 255, 255, 0.16);

	--font-heading: 'Space Grotesk', system-ui, sans-serif;
	--font-arabic: 'IBM Plex Sans Arabic', system-ui, sans-serif;
	--font-body: system-ui, sans-serif;

	--size-sm: clamp(0.875rem, 1vw, 1rem);
	--size-base: clamp(1rem, 1.2vw, 1.125rem);
	--size-xl: clamp(1.5rem, 3vw, 2rem);
	--size-wordmark: clamp(3.25rem, 13vw, 8.5rem);

	--space-30: 1rem;
	--space-40: 1.5rem;
	--space-50: 2rem;
	--space-60: 3rem;
	--space-70: 4rem;

	--duration-slow: 400ms;
	--easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100%;
	margin: 0;
	display: grid;
	grid-template-rows: 1fr auto;
	color: var(--color-inverse);
	background-color: var(--color-primary);
	background-image:
		radial-gradient(120% 90% at 85% -10%, rgba(0, 122, 158, 0.38) 0%, rgba(0, 122, 158, 0) 60%),
		linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	background-attachment: fixed;
	font-family: var(--font-body);
	font-size: var(--size-base);
	line-height: 1.6;
}

::selection {
	color: var(--color-primary-dark);
	background: var(--color-selection);
}

.stage {
	width: min(100% - 2 * var(--space-40), 72rem);
	margin-inline: auto;
	padding-block: var(--space-70) var(--space-60);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wordmark {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--size-wordmark);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.rule {
	height: 4px;
	width: clamp(4rem, 12vw, 7rem);
	margin-block: var(--space-50) var(--space-60);
	border-radius: 9999px;
	background: var(--color-selection);
	transform-origin: left center;
}

.messages {
	display: grid;
	gap: var(--space-50);
	grid-template-columns: 1fr;
}

.message {
	padding-block-start: var(--space-40);
	border-block-start: 1px solid var(--color-hairline);
}

.message p {
	margin: 0;
}

.headline {
	font-family: var(--font-heading);
	font-size: var(--size-xl);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.lede {
	max-width: 32ch;
	margin-block-start: var(--space-30);
	color: var(--color-inverse-soft);
}

.message[lang='ar'] .headline,
.message[lang='ar'] .lede {
	font-family: var(--font-arabic);
	letter-spacing: 0;
}

.message[lang='ar'] .headline {
	font-weight: 600;
	line-height: 1.4;
}

.message[lang='ar'] .lede {
	line-height: 1.9;
}

.foot {
	width: min(100% - 2 * var(--space-40), 72rem);
	margin-inline: auto;
	padding-block: var(--space-40);
	border-block-start: 1px solid var(--color-hairline);
	color: var(--color-inverse-soft);
	font-size: var(--size-sm);
}

@media (min-width: 48rem) {
	.messages {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-70);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wordmark,
	.message {
		animation: rise var(--duration-slow) var(--easing-emphasized) both;
	}

	.rule {
		animation: draw 700ms var(--easing-emphasized) 150ms both;
	}

	.message:nth-child(1) {
		animation-delay: 250ms;
	}

	.message:nth-child(2) {
		animation-delay: 350ms;
	}
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes draw {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}