/*
 * Why Homz. Figma 1932:41870 desktop (lilac band, 84 padding, 480 header |
 * 64 gap | 480 card stack), 1932:41869 mobile (grey band, 42 padding, stacked).
 * Card motion: sticky folder stack modelled on humbleops.com FolderCards.
 * Nothing above this section may set overflow other than visible, or sticky stops working.
 */

.why-homz__band {
	padding-block: 84px;
	background: var(--c-bg-purple);
}

.why-homz__inner {
	--stick: 120px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 64px;
}

/* The header stays in view while the cards stack beside it. */
.why-homz__head {
	position: sticky;
	top: var(--stick);
	flex: 0 1 480px;
	min-width: 0;
	padding-top: 40px;
}

.why-homz__stage {
	flex: 0 1 480px;
	min-width: 0;
}

/*
 * Folder stack. Every card sticks at the same top; the gap is the scroll
 * distance between two cards locking in. --p (set by init) goes 0 -> 1 while
 * the next card covers this one: it shrinks to 80% and lifts 28px, so its tab
 * peeks out above the card in front.
 */
.why-homz__cards {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.why-homz__card {
	--p: 0;
	position: sticky;
	top: var(--stick);
	z-index: var(--z, 1);
	display: flex;
	flex-direction: column;
	transform-origin: 50% 0;
	transform: translateY(calc(var(--p) * -28px)) scale(calc(1 - var(--p) * .2));
	will-change: transform;
}

/* Entrance: rise and fade in when the card reaches the viewport. */
.why-homz__card.is-waiting {
	opacity: 0;
	translate: 0 48px;
	transition: opacity .6s ease, translate .6s cubic-bezier(.22, .61, .36, 1);
}

.why-homz__card.is-waiting.is-in {
	opacity: 1;
	translate: 0 0;
}

/* Folder tab sitting on the card's top border. */
.why-homz__tab {
	position: relative;
	z-index: 1;
	align-self: flex-end;
	margin: 0 24px -1px;
	padding: 6px 24px 6px;
	border: 1px solid var(--c-border-light);
	border-bottom-color: var(--c-bg-white);
	border-radius: var(--r-s) var(--r-s) 0 0;
	background: var(--c-bg-white);
	color: var(--c-primary);
	font: var(--f-header-3xs);
	white-space: nowrap;
}

.why-homz__card[data-pos="center"] .why-homz__tab { align-self: center; }
.why-homz__card[data-pos="start"] .why-homz__tab { align-self: flex-start; }

.why-homz__box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-l);
	background: var(--c-bg-white);
	box-shadow: 0 -6px 24px rgba(9, 3, 19, .06);
}

.why-homz__icon { --icon-size: 72px; color: var(--c-secondary); }

.why-homz__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font: var(--f-body-s);
	color: var(--c-text-dark);
}

.why-homz__row--others { color: var(--c-text-grey); }
.why-homz__label { font: var(--f-header-2xs); }

.why-homz__rule {
	align-self: stretch;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--c-border-light);
}

/* One title per breakpoint (Figma 1932:41870 desktop / 1932:41869 mobile). */
.why-homz__title-mobile { display: none; }

@media (prefers-reduced-motion: reduce) {
	.why-homz__card { transform: none; }
}

@media (max-width: 1023px) {
	.why-homz__inner { gap: 32px; }
}

@media (max-width: 767px) {
	.why-homz__title-desktop { display: none; }
	.why-homz__title-mobile { display: inline; }

	.why-homz__band {
		padding-block: 42px;
		background: var(--c-bg-grey);
	}

	.why-homz__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.why-homz__inner { --stick: 72px; }

	.why-homz__head {
		position: static;
		padding-top: 0;
	}

	.why-homz__head,
	.why-homz__stage { flex: none; }

	.why-homz__stage { padding-top: 24px; }
	.why-homz__cards { gap: 40px; }
	.why-homz__tab { margin-inline: 20px; }
	.why-homz__icon { --icon-size: 54px; }
}