* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	isolation: isolate;
	overflow: hidden;
	background: #e7e2d9;
	font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

.skyline-layer {
	position: fixed;
	inset: -10%;
	z-index: -1;
	pointer-events: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: grayscale(0.28) saturate(0.78) contrast(0.9) brightness(1.08) blur(1px);
	mix-blend-mode: multiply;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 76%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 76%, transparent 100%);
	animation: skyline-drift 28s ease-in-out infinite alternate;
}

.skyline-nyc {
	background-image: url("nyc.jpg");
	inset: -10% -10% -10% 42%;
	opacity: 0.32;
	-webkit-mask-image: linear-gradient(to left, black 0%, black 68%, transparent 100%);
	mask-image: linear-gradient(to left, black 0%, black 68%, transparent 100%);
}

.skyline-la {
	background-image: url("la.jpg");
	inset: -10% 42% -10% -10%;
	opacity: 0.28;
	transform: scale(1.08);
	animation-duration: 36s;
	animation-direction: alternate-reverse;
	-webkit-mask-image: linear-gradient(to right, black 0%, black 68%, transparent 100%);
	mask-image: linear-gradient(to right, black 0%, black 68%, transparent 100%);
}

body::before,
body::after {
	position: fixed;
	inset: -35%;
	z-index: -2;
	content: "";
	pointer-events: none;
	background:
		radial-gradient(circle at 18% 28%, rgba(255, 255, 250, 0.98), transparent 25%),
		radial-gradient(circle at 84% 18%, rgba(196, 186, 171, 0.68), transparent 29%),
		radial-gradient(circle at 72% 82%, rgba(174, 166, 155, 0.64), transparent 31%),
		linear-gradient(128deg, #bcb6ac 4%, #ded9d0 44%, #faf8f2 72%, #d0c8bc 100%);
	animation: sway 18s ease-in-out infinite;
}

body::after {
	opacity: 0.78;
	background:
		radial-gradient(ellipse at 25% 75%, rgba(255, 255, 250, 0.82), transparent 24%),
		radial-gradient(ellipse at 76% 30%, rgba(224, 216, 204, 0.52), transparent 23%),
		linear-gradient(42deg, transparent 30%, rgba(125, 118, 108, 0.26) 62%, transparent 84%);
	filter: blur(38px);
	transform: scale(1.08);
	animation: sway 23s ease-in-out infinite reverse;
}

.card-stage {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	perspective: 1000px;
}

.business-card {
	position: relative;
	display: flex;
	width: 560px;
	aspect-ratio: 1.75;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	padding: 48px;
	font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
	color: #f8f5ec;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 20px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 32%),
		linear-gradient(125deg, #242726 0%, #4c4d48 56%, #716b61 100%);
	box-shadow: 0 34px 90px rgba(24, 20, 17, 0.64), 0 10px 22px rgba(40, 34, 29, 0.36);
	transform: rotateX(0) rotateY(0) translateY(0);
	transition: transform 600ms cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 600ms ease;
}

.business-card::before {
	position: absolute;
	inset: -70%;
	content: "";
	background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.22) 50%, transparent 58%);
	transform: translateX(-34%) rotate(8deg);
	transition: transform 900ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.business-card:hover {
	box-shadow: 0 50px 115px rgba(24, 20, 17, 0.76), 0 16px 30px rgba(40, 34, 29, 0.44);
	transform: translateY(-10px);
}

.business-card:hover::before {
	transform: translateX(34%) rotate(8deg);
}

.profile-picture {
	position: absolute;
	top: 50%;
	right: 48px;
	width: 112px;
	aspect-ratio: 1;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, 0.72);
	border-radius: 50%;
	box-shadow: 0 12px 26px rgba(24, 20, 17, 0.4);
	transform: translateY(-50%);
}

.card-topline,
.card-footer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.card-mark {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.card-identity .card-kicker {
	margin: 4px 0 0;
}

.card-year,
.card-footer,
.card-footer a {
	opacity: 0.68;
}

.card-footer a {
	color: inherit;
	text-decoration: none;
}

.card-footer a:hover {
	opacity: 1;
	text-decoration: underline;
}

.card-content {
	position: relative;
}

.card-kicker {
	margin: 0 0 10px;
	color: #e5cdb0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.card-content h1 {
	max-width: 17ch;
	margin: 0;
	font-family: inherit;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: 0;
}

.card-description {
	margin: 12px 0 0;
	font-size: 12px;
	letter-spacing: 0.04em;
	opacity: 0.76;
}

@keyframes sway {
	0% { transform: scale(1); }
	25% { transform: scale(1.04); }
	50% { transform: scale(1.08); }
	75% { transform: scale(1.04); }
	100% { transform: scale(1); }
}

@keyframes skyline-drift {
	0% { transform: scale(1.04); }
	100% { transform: scale(1.1); }
}

@media (max-width: 520px) {
	.card-stage {
		padding: 16px;
		perspective: none;
	}

	.business-card {
		width: min(320px, calc(100vw - 32px));
		aspect-ratio: 1.45;
		padding: 22px;
	}

	.card-topline,
	.card-footer {
		font-size: 8px;
		letter-spacing: 0.1em;
	}

	.card-mark {
		font-size: 18px;
	}

	.card-kicker {
		font-size: 9px;
		letter-spacing: 0.1em;
	}

	.card-content h1 {
		font-size: 22px;
	}

	.card-description {
		font-size: 10px;
	}

	.profile-picture {
		top: 50%;
		right: 22px;
		width: 64px;
	}

	.card-content h1 {
		max-width: 16ch;
	}

	.skyline-layer {
		filter: none;
		animation: none;
	}

	body::before,
	body::after {
		animation: none;
	}

	body::after {
		filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.skyline-layer {
		animation: none;
	}
}