.content--with-planets {

	--lu-planet-intro-room: clamp(7rem, 16vh, 12rem);

	min-height: var(--lu-planet-section-min, auto);

	justify-content: flex-start;

	padding-bottom: clamp(0.75rem, 2.5vw, 1.75rem);

}



.content--with-planets .content__text {

	position: relative;

	z-index: 3;

	grid-column: 1;

	grid-row: 1;

	margin: 0;

	max-width: none;

	width: auto;

	padding-top: var(--lu-planet-intro-room);

	padding-left: 0;

}

.content--with-planets .lu_meet_planets-copy {

	opacity: var(--lu-planet-copy-opacity, 1);

	filter: blur(var(--lu-planet-copy-blur, 0px));

	will-change: opacity, filter;

}



.content--with-planets .content__split {

	position: relative;

	display: grid;

	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);

	gap: clamp(1rem, 3vw, 3rem);

	align-items: start;

	width: 100%;

	overflow: visible;

	min-height: min(50vw, 620px);

}



.lu_meet_planets-sticky {

	position: relative;

	grid-column: 2;

	grid-row: 1;

	min-height: min(50vw, 620px);

	z-index: 1;

	overflow: visible;

	pointer-events: none;

}



.lu_meet_planets {

	--lu-planet-fade-core: 48%;

	--lu-planet-rise: clamp(-72px, -8vh, -28px);

	position: absolute;

	top: var(--lu-planet-rise);

	right: 0;

	width: min(55vw, 680px);

	height: min(50vw, 620px);

	margin-left: -14vw;

	z-index: 1;

	opacity: 0;

	overflow: hidden;

	pointer-events: none;

	/*
	 * One radial mask avoids the browser-dependent multi-mask composite that
	 * produced hard rectangular cuts. The long falloff makes planets and moons
	 * dissolve into space before they reach any canvas boundary.
	 */
	-webkit-mask-image: radial-gradient(
		ellipse 70% 72% at 50% 48%,
		#000 0,
		#000 32%,
		rgba(0, 0, 0, 0.76) 48%,
		rgba(0, 0, 0, 0.27) 62%,
		transparent 72%
	);

	mask-image: radial-gradient(
		ellipse 70% 72% at 50% 48%,
		#000 0,
		#000 32%,
		rgba(0, 0, 0, 0.76) 48%,
		rgba(0, 0, 0, 0.27) 62%,
		transparent 72%
	);

	-webkit-mask-repeat: no-repeat;

	mask-repeat: no-repeat;

	will-change: opacity;

}



.lu_meet_planets__stage {

	position: absolute;

	inset: 0;

	overflow: visible;

	pointer-events: none;

	transform-origin: 50% 50%;

	will-change: transform, filter;

}



.lu_meet_planets__canvas {

	display: block;

	width: 100%;

	height: 100%;

	outline: none;

}



/* Desktop wide: 60% viewport width, anchored from right edge toward center */

@media screen and (min-width: 1700px) {

	.content--with-planets .content__split {

		min-height: min(42vw, 780px);

	}



	.lu_meet_planets-sticky {

		grid-column: 1 / -1;

		grid-row: 1;

		width: 100%;

		min-height: min(42vw, 780px);

	}



	.lu_meet_planets {

		width: 60vw;

		height: min(42vw, 780px);

		right: calc(-1 * clamp(1.5rem, 3vw, 3rem));

		margin-left: 0;

		--lu-planet-rise: clamp(-88px, -9vh, -36px);

	}

}



/* Tablet / small desktop */

@media screen and (min-width: 1101px) and (max-width: 1699px) {

	.lu_meet_planets-sticky {

		grid-column: 1 / -1;

		grid-row: 1;

		min-height: min(50vw, 620px);

	}



	.lu_meet_planets {

		width: 55vw;

		height: min(50vw, 620px);

		right: 0;

		margin-left: 0;

		--lu-planet-rise: clamp(-80px, -8vh, -32px);

	}

}



/* Mobile: planets sit underneath the copy and raise with it (sticky underlay). */

@media screen and (max-width: 1100px) {

	.content--with-planets {

		min-height: var(--lu-planet-section-min, auto);

		padding-left: 0;

		padding-right: 0;

	}



	.content--with-planets .content__split {

		grid-template-columns: 1fr;

		min-height: 0;

		gap: 0;

		padding-left: 0;

		padding-right: 0;

	}



	.lu_meet_planets-sticky {

		grid-column: 1;

		grid-row: 1;

		width: 100%;

		min-height: min(92vw, 68vh);

		margin: 0;

		z-index: 1;

		align-self: start;

	}



	.lu_meet_planets {

		position: relative;

		width: 100%;

		height: min(92vw, 68vh);

		max-width: none;

		margin: 0;

		margin-top: clamp(-36px, -5vh, -12px);

		right: auto;

		left: auto;

		top: 0;

		z-index: 1;

		--lu-planet-rise: 0;

	}



	.content--with-planets .content__text {

		grid-column: 1;

		grid-row: 1;

		z-index: 3;

		align-self: start;

		padding-left: 3rem;

		padding-right: 3rem;

		/* A real runway for the first planet's slow fade-and-roll intro. */

		padding-top: clamp(9rem, 20vh, 14rem);

	}

}



@media (prefers-reduced-motion: reduce) {
	.content--with-planets {
		min-height: auto;
	}
}

/* Planets group two: planets left, text right */
.content--with-planets--group-two .content__split--group-two {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.content--with-planets--group-two .lu_meet_planets-sticky {
	grid-column: 1;
	grid-row: 1;
}

.content--with-planets--group-two .content__text {
	grid-column: 2;
	grid-row: 1;
}

.lu_meet_planets--group-two {
	left: 0;
	right: auto;
	margin-left: 0;
	margin-right: -14vw;
}

.lu_meet_planets--group-two .lu_meet_planets__stage {
	transform-origin: 50% 50%;
}

@media screen and (min-width: 1700px) {
	.content--with-planets--group-two .lu_meet_planets--group-two {
		left: calc(-1 * clamp(1.5rem, 3vw, 3rem));
		right: auto;
		margin-right: 0;
	}
}

@media screen and (min-width: 1101px) and (max-width: 1699px) {
	.content--with-planets--group-two .lu_meet_planets--group-two {
		left: 0;
		right: auto;
		margin-right: 0;
	}
}

@media screen and (max-width: 1100px) {
	.content--with-planets--group-two .content__split--group-two {
		grid-template-columns: 1fr;
	}

	/* Same underlay stack as group one: planets behind the copy. */
	.content--with-planets--group-two .lu_meet_planets-sticky {
		grid-column: 1;
		grid-row: 1;
		z-index: 1;
	}

	.content--with-planets--group-two .content__text {
		grid-column: 1;
		grid-row: 1;
		z-index: 3;
	}

	.content--with-planets--group-two .lu_meet_planets--group-two {
		left: auto;
		right: auto;
		margin-right: 0;
	}
}

/*
 * Desktop/tablet immersive underlay: the sticky WebGL field spans the entire
 * text split instead of being confined to a side column. Copy remains above it
 * at z-index 3, preserving readability and the established sticky lifecycle.
 */
@media screen and (min-width: 1101px) {
	.content--with-planets .lu_meet_planets-sticky,
	.content--with-planets--group-two .lu_meet_planets-sticky {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
		min-height: min(58vw, 780px);
		z-index: 1;
	}

	.content--with-planets .lu_meet_planets,
	.content--with-planets--group-two .lu_meet_planets--group-two {
		left: 0;
		right: 0;
		width: 100%;
		height: min(58vw, 780px);
		max-width: none;
		margin: 0;
		--lu-planet-rise: clamp(-96px, -10vh, -40px);
	}
}

@media screen and (min-width: 1700px) {
	.content--with-planets .lu_meet_planets-sticky,
	.content--with-planets--group-two .lu_meet_planets-sticky {
		min-height: min(46vw, 860px);
	}

	.content--with-planets .lu_meet_planets,
	.content--with-planets--group-two .lu_meet_planets--group-two {
		height: min(46vw, 860px);
	}
}