/*
 * How It Works — lab photo + vertical step-card stack (matches reference).
 * @package log-core
 */

.how-it-works { padding: 92px 24px; }

.how-it-works .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.how-it-works .reveal.in { opacity: 1; transform: translateY(0); }

.how-it-works-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	margin-top: 50px;
}

.lab-visual-wrap {
	border-radius: 30px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	box-shadow: 0 30px 60px -15px rgba(8, 29, 80, .16);
	background: linear-gradient(135deg, var(--sage-200), var(--sage-500));
}

.lab-visual-wrap img.lab-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: log-ken-burns-rev 22s ease-in-out infinite alternate-reverse;
}

@keyframes log-ken-burns-rev {
	from { transform: scale(1); }
	to { transform: scale(1.07) translate(-1%, -1%); }
}

.steps-stack { display: flex; flex-direction: column; gap: 20px; }

.step-card {
	display: flex;
	gap: 18px;
	padding: 22px 24px;
	background: var(--white);
	border-radius: 20px;
	border: 1px solid var(--line);
	transition: all .3s var(--ease);
}

.step-card:hover { border-color: var(--plum-600); box-shadow: 0 8px 32px rgba(26, 85, 196, .1); transform: translateX(8px); }

.step-num-pill {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--plum-700), var(--plum-800));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 16px rgba(26, 85, 196, .35);
	transition: transform .3s, box-shadow .3s;
}

.step-num-pill .icon { width: 22px; height: 22px; color: #fff; }

.step-card:hover .step-num-pill { transform: scale(1.1) rotate(-4deg); box-shadow: 0 8px 24px rgba(26, 85, 196, .45); }

.step-card h4 { font-family: var(--body); font-size: 17px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }
.step-card p { font-size: 13.5px; color: var(--ink-700); margin: 0; }

@media (max-width: 930px) {
	.how-it-works { padding: 56px 20px; }
	.how-it-works-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
	.steps-stack { gap: 12px; }
	.step-card { padding: 18px 20px; }
}