* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.logo {
	width: clamp(320px, 60vw, 80vh);
	max-width: 80vw;
	max-height: 80vh;
	height: auto;
	filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.05));
	opacity: 0;
	transform: translateY(32px) scale(0.96);
	animation: intro 1s ease-out forwards, pulse 3.6s ease-in-out infinite 1s;
}

@keyframes pulse {
	0% {
		transform: translateY(0) scale(1);
		opacity: 0.8;
	}
	50% {
		transform: translateY(0) scale(1.02);
		opacity: 1;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 0.8;
	}
}

@keyframes intro {
	0% {
		opacity: 0;
		transform: translateY(8em) scale(1.75);
	}
	100% {
		opacity: 0.8;
		transform: translateY(0) scale(1);
	}
}