/* APECS entry page — Figma "Splash & Entry Point" (APECS — BRAND - WEB, node 7019:94997). */

@font-face {
	font-family: 'Relative CY';
	src: url('/fonts/RelativeCYTrial-Book.otf') format('opentype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Relative CY';
	src: url('/fonts/RelativeCYTrial-Medium.otf') format('opentype');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'PP Monument Extended';
	src: url('/fonts/PPMonumentExtended-Black.otf') format('opentype');
	font-weight: 800;
	font-display: swap;
}

@font-face {
	font-family: 'Relative Faux CY';
	src: url('/fonts/RelativeFauxCYTrial-Book.otf') format('opentype');
	font-weight: 400;
	font-display: swap;
}

:root {
	--deadlock-blue: #201f27;
	--light-grey: #f7f7f4;
	--grey-64: rgba(247, 247, 244, 0.64);
	--grey-40: rgba(247, 247, 244, 0.4);
	--card: rgba(41, 40, 47, 0.6);
	--card-hover: rgba(41, 40, 47, 0.9);
	--gold: #c8ad80;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
	margin: 0;
}

body {
	min-height: 100vh;
	min-height: 100svh;
	background: var(--deadlock-blue);
	color: var(--light-grey);
	font-family: 'Relative CY', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
}

/* Background video */

.backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--deadlock-blue) url('/img/background.jpg') center / cover no-repeat;
}

/* The video sits under a dark wash; ~56% black matches the Figma render. */
.backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.56);
}

.backdrop__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Nav */

.nav {
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 72px;
	padding: 16px 40px;
	backdrop-filter: blur(17px);
	-webkit-backdrop-filter: blur(17px);
}

.nav__logo {
	display: block;
	border-radius: 2px;
}

.nav__logo img {
	width: 148px;
	height: auto;
}

/* Splash */

.splash {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 72px;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(144px, 25vh, 280px) 16px 64px;
}

.splash__intro {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
	width: min(1076px, 100%);
}

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

/*
 * The lettering keeps the two-line headline's slot (139px of 1076px) and the
 * images sit where Figma puts them; cqw scales the whole block with its width.
 */
.splash__lettering {
	position: relative;
	width: 100%;
	height: 12.918cqw;
}

/* The lettering comes on black; screen drops the black out, as in Figma. */
.splash__whos,
.splash__knocking {
	position: absolute;
	height: auto;
	mix-blend-mode: screen;
}

.splash__still {
	display: none;
}

.splash__whos {
	left: 24.257cqw;
	top: -3.81cqw;
	width: 48.792cqw;
}

.splash__knocking {
	left: 14.312cqw;
	top: -0.558cqw;
	width: 71.49cqw;
}

.splash__lead {
	max-width: 784px;
	margin: 0;
	color: var(--grey-64);
	font-family: 'Relative Faux CY', 'Relative CY', system-ui, sans-serif;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.36px;
	text-align: center;
	text-transform: uppercase;
	animation: rise 1.1s 0.15s var(--ease-out) both;
}

/* Cards */

.cards {
	display: flex;
	justify-content: center;
	gap: 8px;
	width: min(868px, 100%);
}

.card {
	display: flex;
	flex: 1 1 430px;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	max-width: 430px;
	height: 202px;
	padding: 24px 32px 32px;
	border-radius: 4px;
	background: var(--card);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
	animation: rise 1.1s 0.3s var(--ease-out) both;
}

.card + .card {
	animation-delay: 0.4s;
}

.card:hover,
.card:focus-visible {
	background: var(--card-hover);
}

.card:focus-visible,
.nav__logo:focus-visible {
	outline: 1px solid var(--gold);
	outline-offset: 2px;
}

/* The icons are 24px slots holding a 21.5px glyph. */
.card__icon {
	margin: 1px;
}

.card__footer {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.card__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	font-size: 16px;
}

.card__title {
	font-weight: 500;
	line-height: 20px;
	text-transform: capitalize;
	font-feature-settings: 'ss01' 1, 'ss02' 1;
}

.card__description {
	overflow: hidden;
	color: var(--grey-40);
	line-height: 24px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The arrow glyph is centred in its 28px slot, 5px off the baseline. */
.card__arrow {
	flex: none;
	margin: 0 4.625px 5px;
}

/* Entrance: plays once on load, never repeats (Figma annotation). */

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

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

@media (prefers-reduced-motion: reduce) {
	.backdrop__video {
		display: none;
	}

	.splash__motion {
		display: none;
	}

	.splash__still {
		display: block;
	}

	.splash__lead,
	.card {
		animation: none;
	}

	.card {
		transition: none;
	}
}

/* Phone — Figma "Splash & Entry Point Mobile" (7211:73273, 375 × 812). */

@media (max-width: 720px) {
	.nav {
		height: auto;
		padding: 40px 12px 16px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* The logo sits in a 40px row, the height of the storefront nav pill. */
	.nav__logo {
		display: flex;
		align-items: center;
		min-height: 40px;
	}

	.splash {
		gap: 92px;
		padding: 180px 0 27px;
	}

	.splash__intro {
		gap: 40px;
		width: 100%;
	}

	/* The headline is live text here, not the lettering videos. */
	.splash__lettering {
		display: none;
	}

	.splash__title {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
		color: var(--light-grey);
		font-family: 'PP Monument Extended', system-ui, sans-serif;
		font-size: 40px;
		font-weight: 800;
		line-height: 38px;
		text-align: center;
		text-transform: uppercase;
		font-feature-settings: 'ss02' 1;
		animation: rise 1.1s var(--ease-out) both;
	}

	.splash__title span {
		display: block;
	}

	.splash__title-dim {
		color: var(--grey-64);
	}

	.splash__lead {
		max-width: none;
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 0.24px;
	}

	.cards {
		flex-direction: column;
		gap: 4px;
		width: 100%;
		padding: 0 16px;
	}

	.card {
		flex: none;
		gap: 32px;
		width: 100%;
		max-width: none;
		height: auto;
		padding: 24px 16px;
	}

	/* A phone card is too narrow to cut the description short; it wraps instead. */
	.card__description {
		white-space: normal;
	}
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
	.splash__title {
		animation: none;
	}
}