.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

.card,
.hero-card,
.metric,
.contact-form {
	transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover,
.hero-card:hover,
.metric:hover,
.contact-form:hover {
	transform: translateY(-4px);
	border-color: #b7c9ff;
	box-shadow: 0 18px 36px rgba(28, 61, 151, 0.16);
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.card,
	.hero-card,
	.metric,
	.contact-form {
		transition: none;
		transform: none;
	}

	.reveal {
		opacity: 1;
	}
}