.fg-2aa4d893-stage {
	position: relative;
	inline-size: 100%;
	max-inline-size: 100%;
	overflow: hidden;
	min-block-size: 620px;
	perspective: 1100px;
	perspective-origin: 50% 50%;
	--fg-rot-range: 6deg;
	--fg-depth-spread: 360px;
}

.fg-2aa4d893-scene {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

/* Each card is absolutely positioned and driven by JS via CSS variables.
   --fg-x = horizontal position (px from scene center)
   --fg-z = depth on the Z axis (negative = far, positive = near) */
.fg-2aa4d893-card {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: var(--fg-card-w, 230px);
	block-size: var(--fg-card-h, 310px);
	margin-block-start: calc(var(--fg-card-h, 310px) / -2);
	margin-inline-start: calc(var(--fg-card-w, 230px) / -2);
	border-radius: 18px;
	overflow: hidden;
	display: block;
	text-decoration: none;
	will-change: transform, filter;
	backface-visibility: hidden;
	--fg-item-offset: 0px;
	--fg-x: 0px;
	--fg-z: 0px;
	--fg-rot: 0deg;
	transform: translate3d(
			calc(var(--fg-x) - 50%),
			calc(var(--fg-item-offset) - 50%),
			var(--fg-z)
		)
		rotateY(var(--fg-rot));
}

/* True depth planes: far = pushed back on Z, near = pulled forward.
   Depth scale is achieved naturally by perspective + translateZ. */
.fg-2aa4d893-card[data-depth="background"] {
	--fg-plane-z: calc(var(--fg-depth-spread) * -1);
	--fg-plane-rot: calc(var(--fg-rot-range) * -1);
}

.fg-2aa4d893-card[data-depth="midground"] {
	--fg-plane-z: 0px;
	--fg-plane-rot: 0deg;
}

.fg-2aa4d893-card[data-depth="foreground"] {
	--fg-plane-z: var(--fg-depth-spread);
	--fg-plane-rot: var(--fg-rot-range);
}

.fg-2aa4d893-card img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Depth atmosphere: far cards softly blurred + dimmed, near cards crisp. */
.fg-2aa4d893-atmos-yes .fg-2aa4d893-card[data-depth="background"] img {
	filter: blur(2px) brightness(0.8);
}

.fg-2aa4d893-atmos-yes .fg-2aa4d893-card[data-depth="midground"] img {
	filter: brightness(0.92);
}

@media (max-width: 1024px) {
	.fg-2aa4d893-stage { min-block-size: 480px; perspective: 900px; }
}

@media (max-width: 767px) {
	.fg-2aa4d893-stage { min-block-size: 400px; perspective: 760px; }
}
