/* =====================================================================
   Expoverse — top & bottom scene scrim (all spaces)
   ---------------------------------------------------------------------
   Subtle dark gradients along the top and bottom edges so the floating UI
   (menu + logo, floorplan trigger, "Visit reception"/"Exhibitors" pills,
   help button, viewer controls) stays legible over bright or busy 3D
   scenes instead of getting lost in them.

   Painted by the universal scene container `.page-space` (exists for the
   lobby, every hall and every booth), so it covers all spaces with no JS.
   Stacking inside `.page-space` (a transform'd stacking context):
       .scene / iframe ... z:1   (the 3D render — dimmed at the edges)
       THIS scrim ......... z:2   (::before, painted before real children)
       .booth-ui .......... z:2   (a later real child -> stays ABOVE the scrim)
       .main-logo / .hall-menu-button ... z:3  (above)
       hall-menu / main-menu / modals ... 92+  (above)
   A single ::before (both gradients) is used on purpose: an ::after would
   paint AFTER real children and dim the z:2 booth panel. Click-through.
   Delete this file + its <link> in index.php to revert.
   ===================================================================== */
.app .page-space::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	background:
		/* top scrim */
		linear-gradient(to bottom,
			rgba(8, 10, 18, .50) 0,
			rgba(8, 10, 18, .24) 92px,
			rgba(8, 10, 18, 0) 172px),
		/* bottom scrim */
		linear-gradient(to top,
			rgba(8, 10, 18, .56) 0,
			rgba(8, 10, 18, .26) 110px,
			rgba(8, 10, 18, 0) 192px);
}

@media (max-width: 760px) {
	.app .page-space::before {
		background:
			linear-gradient(to bottom,
				rgba(8, 10, 18, .52) 0,
				rgba(8, 10, 18, .26) 80px,
				rgba(8, 10, 18, 0) 150px),
			linear-gradient(to top,
				rgba(8, 10, 18, .58) 0,
				rgba(8, 10, 18, .28) 96px,
				rgba(8, 10, 18, 0) 170px);
	}
}