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

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	background: #08080d;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Raleway", sans-serif;
}

/* ─── Background ─────────────────────────────────────────── */

.background {
	position: fixed;
	inset: 0;
	overflow: hidden;
}

.blob {
	position: absolute;
	filter: blur(100px);
	mix-blend-mode: screen;
	will-change: transform, border-radius;
}

.blob-1 {
	width: 700px;
	height: 700px;
	background: radial-gradient(
		circle at 40% 40%,
		#7c3aed 0%,
		#4f46e5 60%,
		transparent 100%
	);
	top: -20%;
	left: -10%;
	opacity: 0.7;
	border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
	animation: morph-1 18s ease-in-out infinite;
}

.blob-2 {
	width: 580px;
	height: 580px;
	background: radial-gradient(
		circle at 50% 50%,
		#06b6d4 0%,
		#0e7490 60%,
		transparent 100%
	);
	top: 15%;
	right: -8%;
	opacity: 0.65;
	border-radius: 40% 60% 30% 70% / 60% 35% 65% 40%;
	animation: morph-2 22s ease-in-out infinite;
}

.blob-3 {
	width: 520px;
	height: 520px;
	background: radial-gradient(
		circle at 60% 45%,
		#ec4899 0%,
		#be185d 60%,
		transparent 100%
	);
	bottom: -12%;
	left: 18%;
	opacity: 0.65;
	border-radius: 70% 30% 50% 50% / 40% 65% 35% 60%;
	animation: morph-3 16s ease-in-out infinite;
}

.blob-4 {
	width: 400px;
	height: 400px;
	background: radial-gradient(
		circle at 45% 55%,
		#f97316 0%,
		#c2410c 60%,
		transparent 100%
	);
	bottom: 20%;
	right: 22%;
	opacity: 0.55;
	border-radius: 50% 50% 60% 40% / 55% 45% 55% 45%;
	animation: morph-4 25s ease-in-out infinite;
}

/* Morphing keyframes */

@keyframes morph-1 {
	0%,
	100% {
		border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
	}
	25% {
		border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
	}
	50% {
		border-radius: 70% 30% 55% 45% / 40% 65% 35% 60%;
	}
	75% {
		border-radius: 30% 70% 45% 55% / 55% 35% 65% 45%;
	}
}

@keyframes morph-2 {
	0%,
	100% {
		border-radius: 40% 60% 30% 70% / 60% 35% 65% 40%;
	}
	33% {
		border-radius: 65% 35% 55% 45% / 40% 60% 40% 60%;
	}
	66% {
		border-radius: 35% 65% 70% 30% / 60% 40% 55% 45%;
	}
}

@keyframes morph-3 {
	0%,
	100% {
		border-radius: 70% 30% 50% 50% / 40% 65% 35% 60%;
	}
	50% {
		border-radius: 40% 60% 65% 35% / 60% 40% 60% 40%;
	}
}

@keyframes morph-4 {
	0%,
	100% {
		border-radius: 50% 50% 60% 40% / 55% 45% 55% 45%;
	}
	33% {
		border-radius: 65% 35% 45% 55% / 40% 60% 40% 60%;
	}
	66% {
		border-radius: 35% 65% 55% 45% / 60% 40% 65% 35%;
	}
}

/* ─── Grain overlay ──────────────────────────────────────── */

#grain {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
	opacity: 0.1;
	mix-blend-mode: overlay;
	/* keep half-res pixels sharp so grain stays crisp, not blurry */
	image-rendering: pixelated;
}

/* ─── Content ────────────────────────────────────────────── */

main {
	position: relative;
	z-index: 20;
	text-align: center;
	user-select: none;
}

h1 {
	font-size: clamp(2.8rem, 6vw, 5.5rem);
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.03em;
	line-height: 1;
	text-shadow:
		0 0 80px rgba(255, 255, 255, 0.25),
		0 0 160px rgba(180, 160, 255, 0.12);
}

p {
	margin-top: 1rem;
	font-size: clamp(0.75rem, 1.5vw, 0.95rem);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.68);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}