/* Enter starts hidden and transitions in after the first paint.
   A CSS animation would finish during head scripts (Tailwind CDN) before anything is visible. */

body {
	opacity: 0;
	transform: translateY(30px) scale(0.99);
	filter: blur(7px);
	transition:
		opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
		filter 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.is-entered {
	opacity: 1;
	transform: none;
	filter: none;
}

body.is-leaving {
	opacity: 0;
	transform: translateY(-22px) scale(0.985);
	filter: blur(5px);
	transition:
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		filter 0.4s;
}

@media (max-width: 880px) {
	body {
		transform: translateY(16px);
		filter: none;
	}

	body.is-leaving {
		filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	body.is-leaving {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}