/**
 * Animated hero — CSS-driven (no JS animation cost), GPU-friendly transforms only.
 */

.mst-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-7) var(--space-8);
	background: radial-gradient(120% 100% at 80% 0%, var(--bg-subtle), var(--bg) 60%);
}

.mst-hero-inner {
	display: grid;
	gap: var(--space-6);
	align-items: center;
}

@media (min-width: 960px) {
	.mst-hero-inner {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--space-7);
	}
}

.mst-hero-copy .mst-eyebrow {
	opacity: 0;
	animation: mst-rise var(--dur-slow) var(--ease-out) forwards;
	animation-delay: 60ms;
}

.mst-hero-title {
	font-size: var(--text-4xl);
	margin: var(--space-3) 0 var(--space-4);
	opacity: 0;
	animation: mst-rise var(--dur-slow) var(--ease-out) forwards;
	animation-delay: 160ms;
}

.mst-hero-title em {
	font-style: italic;
	color: var(--mst-primary);
}

:root[data-theme="dark"] .mst-hero-title em {
	color: var(--mst-accent-light);
}

.mst-hero-sub {
	font-size: var(--text-lg);
	color: var(--text-muted);
	max-width: 46ch;
	margin-bottom: var(--space-5);
	opacity: 0;
	animation: mst-rise var(--dur-slow) var(--ease-out) forwards;
	animation-delay: 260ms;
}

.mst-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	opacity: 0;
	animation: mst-rise var(--dur-slow) var(--ease-out) forwards;
	animation-delay: 360ms;
}

.mst-hero-stats {
	display: flex;
	gap: var(--space-6);
	margin-top: var(--space-6);
	opacity: 0;
	animation: mst-rise var(--dur-slow) var(--ease-out) forwards;
	animation-delay: 460ms;
}

.mst-hero-stat b {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-xl);
}

.mst-hero-stat span {
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

@keyframes mst-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mst-hero-visual {
	position: relative;
	aspect-ratio: 4 / 3.4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	opacity: 0;
	transform: scale(0.96);
	animation: mst-hero-image var(--dur-slow) var(--ease-out) forwards;
	animation-delay: 200ms;
	box-shadow: var(--shadow-lg);
}

@keyframes mst-hero-image {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.mst-hero-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mst-hero-float-card {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	background: var(--glass-bg);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	box-shadow: var(--shadow-md);
	animation: mst-float 5s var(--ease-in-out) infinite;
}

@keyframes mst-float {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

.mst-hero-float-card b {
	display: block;
	font-size: var(--text-sm);
}

.mst-hero-float-card span {
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.mst-hero-blob {
	position: absolute;
	top: -20%;
	right: -10%;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, var(--mst-accent) 0%, transparent 70%);
	opacity: 0.14;
	filter: blur(10px);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.mst-hero-float-card {
		animation: none;
	}
}