/* section-why-vala — split from vala-onboarding-redesign.css (do not reorder vs main bundle). */
/* Phase 11B — content-driven rhythm; single transition owner: ::before only (choice→why) */
.vala-landing-v2--premium #neden-vala.vala-landing-section--features-scene {
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	/* Phase 11D: heading lands sooner after top transition */
	padding-top: var(--vala-section-pad-top, clamp(76px, 8.5vw, 120px));
	padding-bottom: var(--vala-section-pad-bottom, clamp(76px, 8.5vw, 118px));
}

.vala-landing-v2--premium .vala-landing-features-scene__layout {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Phase 11D: title → cards read as one block */
	gap: clamp(22px, 4.2vh, 46px);
	width: 100%;
	flex: 1 1 auto;
}

.vala-landing-v2--premium .vala-landing-features-scene__intro {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	padding-inline: clamp(8px, 2vw, 16px);
}

.vala-landing-v2--premium .vala-landing-features-scene__intro .vala-section-title--solo {
	margin-bottom: 12px;
}

.vala-landing-v2--premium .vala-landing-features-scene__intro .vala-section-sublead {
	margin-bottom: 0;
}


.vala-landing-v2--premium .vala-feature-grid--reveal .vala-feature-card {
	transition:
		opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}

.vala-landing-v2--premium .vala-feature-grid--reveal.vala-reveal-armed:not(.is-revealed) .vala-feature-card {
	opacity: 0;
	transform: translate3d(0, 24px, 0) scale(0.98);
	pointer-events: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 12px 28px rgba(15, 23, 42, 0.05);
}

.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card:nth-child(1) {
	transition-delay: 0ms;
}

.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card:nth-child(2) {
	transition-delay: 0.1s;
}

.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card:nth-child(3) {
	transition-delay: 0.2s;
}

.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card:nth-child(4) {
	transition-delay: 0.3s;
}

.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card:nth-child(5) {
	transition-delay: 0.4s;
}

.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card:nth-child(n + 6) {
	transition-delay: 0.48s;
}

.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card:hover {
	transform: translate3d(0, -6px, 0) scale(1.01);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 28px 60px rgba(31, 123, 255, 0.14);
	border-color: rgba(31, 123, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	.vala-landing-v2--premium .vala-feature-grid--reveal.vala-reveal-armed:not(.is-revealed) .vala-feature-card {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.vala-landing-v2--premium .vala-feature-grid--reveal .vala-feature-card,
	.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card {
		transition: none;
		transition-delay: 0s !important;
	}

	.vala-landing-v2--premium .vala-feature-grid--reveal.is-revealed .vala-feature-card:hover {
		transform: translate3d(0, -2px, 0);
	}
}

/* Phase 10B — Why Vala: geometry + bleed (see block below) */
.vala-landing-v2--premium #neden-vala {
	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow-x: clip;
	overflow-y: visible;
}

/* Phase 11B — light surface (no grey-lavender wash) */
/* Phase 11D: slightly calmer base — less stacking noise with #neden-vala::before */
main.vala-landing-v2--premium:not(.vala-homepage) #neden-vala.vala-landing-section--light.vala-landing-section--features-scene {
	background:
		radial-gradient(ellipse 88% 70% at 50% 58%, rgba(255, 250, 240, 0.12), transparent 62%),
		rgba(255, 250, 240, 0.18);
}

/* Phase 11B — choice→why: single cream / soft-blue transition (top ~22% only); no ::after */
/* Phase 11C — tri-band mask: transition finishes before heading/cards (no muddy mid-band) */
main.vala-landing-v2--premium:not(.vala-homepage) #neden-vala.vala-landing-section--features-scene::before {
	content: "";
	position: absolute;
	width: min(155vw, 2500px);
	/* Phase 11D: smaller top ellipse — less “block” between choice and Why */
	height: clamp(260px, 28vw, 400px);
	left: 50%;
	top: clamp(-340px, -26vw, -200px);
	transform: translateX(-50%) rotate(-2deg);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(
		185deg,
		rgba(255, 250, 240, 0.92) 0%,
		rgba(238, 248, 255, 0.85) 52%,
		rgba(223, 243, 255, 0.78) 100%
	);
	opacity: var(--vala-transition-opacity-medium, 0.12);
	box-shadow: none;
	filter: none;
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 14%,
		#000 36%,
		transparent 72%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 14%,
		#000 36%,
		transparent 72%
	);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.vala-landing-v2--premium #neden-vala.vala-landing-section--features-scene::after {
	display: none;
}

@media (min-width: 769px) and (max-width: 1050px) {
	main.vala-landing-v2--premium:not(.vala-homepage) #neden-vala.vala-landing-section--features-scene::before {
		height: calc(clamp(260px, 28vw, 400px) * 0.61);
		top: clamp(-300px, -22vw, -180px);
		opacity: min(0.14, var(--vala-transition-opacity-medium, 0.12));
	}
}

@media (max-width: 768px) {
	main.vala-landing-v2--premium:not(.vala-homepage) #neden-vala.vala-landing-section--features-scene::before {
		height: clamp(200px, 46vw, 300px);
		top: clamp(-220px, -32vw, -140px);
		opacity: var(--vala-transition-opacity-medium, 0.12);
	}
}

@media (max-width: 520px) {
	main.vala-landing-v2--premium:not(.vala-homepage) #neden-vala.vala-landing-section--features-scene::before {
		opacity: var(--vala-transition-opacity-soft, 0.08);
		height: clamp(160px, 42vw, 240px);
		top: clamp(-160px, -26vw, -100px);
	}
}

@media (prefers-reduced-motion: reduce) {
	main.vala-landing-v2--premium:not(.vala-homepage) #neden-vala.vala-landing-section--features-scene::before {
		opacity: 0.12;
	}
}

.vala-landing-v2--premium #neden-vala .vala-section-title {
	color: var(--vala-text-dark, #102033);
}

.vala-landing-v2--premium #neden-vala .vala-section-sublead {
	color: var(--vala-text-soft, #5f6f82);
}

/* Features: subtler hover, denser rhythm */
.vala-landing-v2--premium .vala-feature-card:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 22px 48px rgba(15, 23, 42, 0.09);
	border-color: rgba(37, 99, 235, 0.16);
}

.vala-landing-v2--premium .vala-feature-card p {
	max-width: 15rem;
	margin-left: auto;
	margin-right: auto;
}


@media (max-width: 720px) {
	.vala-landing-v2--premium #neden-vala.vala-landing-section--features-scene {
		padding-top: clamp(56px, 9vh, 96px);
		padding-bottom: clamp(56px, 9vh, 96px);
	}
}
