/*
	Homepage custom styling
	Keep selectors broad & non-breaking (Homepage uses Tailwind classes internally).
*/

html,
body {
	height: 100%;
}

body {
	/* Subtle dark gradient + vignette */
	background:
		radial-gradient(
			1200px 800px at 15% 10%,
			rgba(56, 189, 248, 0.16),
			transparent 55%
		),
		radial-gradient(
			1000px 700px at 85% 20%,
			rgba(168, 85, 247, 0.14),
			transparent 60%
		),
		radial-gradient(
			900px 650px at 60% 95%,
			rgba(34, 197, 94, 0.1),
			transparent 55%
		),
		linear-gradient(180deg, #050814 0%, #060a18 55%, #040612 100%) !important;
	background-attachment: fixed !important;
}

/* Make headings a bit crisper */
h1,
h2,
h3 {
	letter-spacing: -0.01em;
}

/* Slightly nicer link + card hover behavior without assuming exact DOM */
a {
	transition:
		transform 140ms ease,
		filter 140ms ease,
		opacity 140ms ease;
}

a:hover {
	filter: brightness(1.04);
}

/* Many cards are wrapped in anchors; give the immediate child a lift */
a:hover > * {
	transform: translateY(-1px);
}

/* Softer focus ring */
:focus-visible {
	outline: 2px solid rgba(56, 189, 248, 0.55);
	outline-offset: 2px;
}

/* Reduce motion for users that prefer it */
@media (prefers-reduced-motion: reduce) {
	a,
	a:hover,
	a:hover > * {
		transition: none !important;
		transform: none !important;
	}
}