@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@500;700&display=swap');

:root {
	--ink: #f8f7f2;
	--coral: #ff6b4a;
	--teal: #46d9c5;
	--yellow: #ffd166;
	--violet: #a78bfa;
	--night: #11121c;
}

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	margin: 0;
	overflow: hidden;
	color: var(--ink);
	background:
		radial-gradient(circle at 12% 15%, rgba(255, 107, 74, 0.25), transparent 28%),
		radial-gradient(circle at 88% 82%, rgba(70, 217, 197, 0.2), transparent 30%),
		var(--night);
	font-family: 'Space Grotesk', sans-serif;
}

body::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 42px 42px;
	content: '';
	transform: perspective(500px) rotateX(58deg) scale(1.8) translateY(16%);
	transform-origin: center bottom;
	animation: grid-drift 12s linear infinite;
}

section {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem);
	width: min(88vw, 920px);
	height: min(82vh, 760px);
	margin: 9vh auto;
	perspective: 1000px;
}

section div {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 0;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 1.25rem;
	color: var(--ink);
	font-family: 'Anton', Impact, sans-serif;
	font-size: clamp(6rem, 20vw, 13rem);
	line-height: 0.8;
	text-align: center;
	text-shadow:
		2px 2px 0 #11121c,
		5px 5px 0 #11121c,
		8px 8px 0 rgba(17, 18, 28, 0.75);
	transform: rotateX(5deg) rotateY(-5deg) translateZ(0);
	transform-style: preserve-3d;
	animation: card-in 850ms cubic-bezier(0.2, 0.85, 0.3, 1) both, float 5s ease-in-out infinite;
	transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 350ms ease, box-shadow 350ms ease;
}

section div::after {
	position: absolute;
	inset: 10px;
	z-index: -1;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0.85rem;
	content: '';
	transform: translateZ(-20px);
}

section div:nth-child(1) {
	background: linear-gradient(135deg, var(--coral), #c8325d);
	animation-delay: 80ms, 0ms;
	box-shadow: 0 24px 0 #8f294b, 0 34px 44px rgba(255, 107, 74, 0.22);
}

section div:nth-child(2) {
	background: linear-gradient(135deg, var(--teal), #138dba);
	animation-delay: 180ms, -1.2s;
	box-shadow: 0 24px 0 #087494, 0 34px 44px rgba(70, 217, 197, 0.22);
}

section div:nth-child(3) {
	background: linear-gradient(135deg, var(--yellow), #ec8b35);
	animation-delay: 280ms, -2.4s;
	box-shadow: 0 24px 0 #bd6528, 0 34px 44px rgba(255, 209, 102, 0.22);
}

section div:nth-child(4) {
	background: linear-gradient(135deg, var(--violet), #6550d8);
	animation-delay: 380ms, -3.6s;
	box-shadow: 0 24px 0 #4b3aa7, 0 34px 44px rgba(167, 139, 250, 0.22);
}

section div:hover {
	z-index: 2;
	filter: saturate(1.3) brightness(1.1);
	transform: rotateX(0deg) rotateY(0deg) translateY(-16px) scale(1.04) translateZ(24px);
}

@keyframes card-in {
	from {
		opacity: 0;
		transform: rotateX(35deg) rotateY(-25deg) translateY(80px) scale(0.7);
	}
	to {
		opacity: 1;
	}
}

@keyframes float {
	0%, 100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -10px;
	}
}

@keyframes grid-drift {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 42px 42px;
	}
}

@media (max-width: 560px) {
	section {
		width: 92vw;
		height: 82vh;
		gap: 0.8rem;
		margin: 9vh auto;
	}

	section div {
		border-radius: 0.85rem;
		font-size: clamp(4.5rem, 26vw, 8rem);
		text-shadow: 2px 2px 0 #11121c, 4px 4px 0 #11121c;
		box-shadow: 0 12px 0 currentColor, 0 22px 28px rgba(0, 0, 0, 0.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}