/* =============================================================================
 * Section transitions — soft mask-image gradient between adjacent sections.
 * Each section gets a subtle fade-out at its bottom edge to ease the eye
 * into the next section's color.
 * ========================================================================== */

/* Apply mask only when transitioning between contrasting colors */
.exspa-products::after,
.exspa-amenities::after,
.exspa-founder::after,
.exspa-ig::after,
.exspa-lieu::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, rgba(43, 37, 34, 0.06) 100%);
	z-index: 2;
}

.exspa-products,
.exspa-amenities,
.exspa-founder,
.exspa-ig,
.exspa-lieu {
	position: relative;
}

/* Dark sections get a subtle cream-bleed at the bottom */
.exspa-hygiene::after,
.exspa-moments::after,
.exspa-suite::after,
.exspa-zones::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, rgba(239, 232, 218, 0.04) 100%);
	z-index: 2;
}

.exspa-hygiene,
.exspa-suite,
.exspa-zones {
	position: relative;
}
/* Moments already has overflow: hidden — make sure ::after doesn't get clipped weirdly */
.exspa-moments {
	position: relative;
}

/* Hero → first section transition: bottom of hero gets a longer fade */
.exspa-cinema::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, rgba(43, 37, 34, 0.6) 100%);
	z-index: 4;
}