/*
 * NICHRAUM AUTARK MODUL
 *
 * Modul:      Elevator Stage
 * Bereich:    UI FX / 3D
 * Pfad:       /sys/ui/fx/3d/elevator-stage/elevator-stage.css
 * Version:    3
 *
 * Zweck:
 * Räumlicher Austausch zweier beliebiger HTML-Flächen innerhalb eines
 * feststehenden, platinenartig gestalteten Fahrstuhlschachts.
 *
 * Architektur:
 * - Die Ausgangsplatte definiert die sichtbare Schachtöffnung.
 * - Der Schachtrahmen bleibt während der gesamten Animation stehen.
 * - Die bewegten Platten bleiben parallel zur Portaloberfläche.
 * - Die Tiefenwirkung entsteht über translateZ() und die zentrale Perspektive.
 * - Die Proportionen der Platten bleiben erhalten.
 */


/* ==========================================================================
   1. ÄUSSERE BÜHNE
   ========================================================================== */

.ui-elevator-stage {
	--ui-elevator-perspective:980px;
	--ui-elevator-perspective-origin:50% 50%;

	--ui-elevator-stage-background:transparent;

	--ui-elevator-shaft-depth:360px;
	--ui-elevator-shaft-inset:0px;

	--ui-elevator-shaft-frame-size:12px;
	--ui-elevator-shaft-frame-color:#26353d;
	--ui-elevator-shaft-frame-highlight:#5b737d;
	--ui-elevator-shaft-frame-shadow:#071116;

	--ui-elevator-shaft-wall-color:#0d1a20;
	--ui-elevator-shaft-wall-dark:#071015;
	--ui-elevator-shaft-wall-line:rgba(120,170,190,.12);

	--ui-elevator-trace-color:#2ec0d3;
	--ui-elevator-trace-highlight:#8ff5ff;
	--ui-elevator-contact-color:#d3f9ff;
	--ui-elevator-warning-color:#89f7ff;

	--ui-elevator-screen-glow:rgba(52,220,255,.22);
	--ui-elevator-screen-core:rgba(40,180,220,.18);
	--ui-elevator-screen-shadow:rgba(0,0,0,.72);

	--ui-elevator-shaft-bg-image:url("/sys/ui/fx/3d/elevator-stage/bg2.jpg");
	--ui-elevator-shaft-bg-position:center center;
--ui-elevator-shaft-bg-size:600px 800px;
--ui-elevator-shaft-bg-repeat:no-repeat;

	--ui-elevator-mask-color:#ffffff;

	position:relative;
	display:block;
	width:100%;
	box-sizing:border-box;
	background:var(--ui-elevator-stage-background);
	isolation:isolate;
}

.ui-elevator-stage--running {
	overflow:hidden;
}


/* ==========================================================================
   2. INNERE 3D-SZENE
   ========================================================================== */

.ui-elevator-stage__scene {
	position:relative;
	z-index:20;
	display:block;
	width:100%;
	box-sizing:border-box;
	perspective:var(--ui-elevator-perspective);
	perspective-origin:var(--ui-elevator-perspective-origin);
	transform-style:preserve-3d;
	overflow:visible;
}

.ui-elevator-stage--running
.ui-elevator-stage__scene {
	position:absolute;
	inset:0;
	height:100%;
}


/* ==========================================================================
   3. FESTSTEHENDER SCHACHTRAHMEN
   ========================================================================== */

.ui-elevator-stage__shaft {
	position:absolute;
	inset:var(--ui-elevator-shaft-inset);
	z-index:15;
	display:block;
	box-sizing:border-box;
	pointer-events:none;
	transform-style:preserve-3d;
}

.ui-elevator-stage__shaft::before {
	content:"";
	position:absolute;
	inset:0;
	z-index:2;
	border:
		var(--ui-elevator-shaft-frame-size)
		solid
		var(--ui-elevator-shaft-frame-color);
	box-shadow:
		inset 0 0 0 1px var(--ui-elevator-shaft-frame-highlight),
		inset 0 0 18px rgba(0,0,0,.62),
		0 0 0 1px var(--ui-elevator-shaft-frame-shadow),
		0 10px 24px rgba(0,0,0,.28);
}

.ui-elevator-stage__shaft::after {
	content:"";
	position:absolute;
	inset:
		var(--ui-elevator-shaft-frame-size);
	z-index:1;
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255,255,255,.03) 49%,
			rgba(255,255,255,.07) 50%,
			rgba(255,255,255,.03) 51%,
			transparent 100%
		),
		linear-gradient(
			to bottom,
			rgba(255,255,255,.02),
			rgba(0,0,0,.18)
		);
	box-shadow:
		inset 0 0 30px rgba(0,0,0,.86);
}


/* ==========================================================================
   4. SCHACHTINNENRAUM
   ========================================================================== */

.ui-elevator-stage__shaft-inner {
	position:absolute;
	inset:var(--ui-elevator-shaft-frame-size);
	z-index:0;
	display:block;
	overflow:hidden;

	background-image:
		linear-gradient(
			to bottom,
			rgba(0,0,0,.03),
			rgba(0,0,0,.10)
		),
		var(--ui-elevator-shaft-bg-image);

	background-position:
		0 0,
		var(--ui-elevator-shaft-bg-position);

	background-size:
		100% 100%,
		var(--ui-elevator-shaft-bg-size);

	background-repeat:
		no-repeat,
		var(--ui-elevator-shaft-bg-repeat);

	box-shadow:
		inset 0 0 22px rgba(0,0,0,.40),
		inset 0 0 52px rgba(0,0,0,.18),
		inset 0 0 12px rgba(70,220,255,.12);

	transform-style:preserve-3d;
}

.ui-elevator-stage__shaft-inner::before,
.ui-elevator-stage__shaft-inner::after {
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
}

.ui-elevator-stage__shaft-inner::before {
	content:"";
	position:absolute;
	inset:0;
	z-index:3;
	pointer-events:none;
	background:
		linear-gradient(
			90deg,
			transparent 0 6%,
			rgba(46,192,211,.85) 6% 6.5%,
			transparent 6.5% 14%,
			rgba(143,245,255,.85) 14% 14.35%,
			transparent 14.35% 27%,
			rgba(46,192,211,.72) 27% 27.55%,
			transparent 27.55% 41%,
			rgba(143,245,255,.8) 41% 41.4%,
			transparent 41.4% 58%,
			rgba(46,192,211,.8) 58% 58.55%,
			transparent 58.55% 72%,
			rgba(143,245,255,.85) 72% 72.35%,
			transparent 72.35% 86%,
			rgba(46,192,211,.78) 86% 86.55%,
			transparent 86.55% 100%
		),
		repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent 13px,
			rgba(80,220,255,.07) 13px,
			rgba(80,220,255,.07) 14px,
			transparent 14px,
			transparent 28px
		),
		linear-gradient(
			to bottom,
			rgba(90,240,255,.05) 0%,
			transparent 40%,
			rgba(90,240,255,.03) 72%,
			transparent 100%
		);
	mix-blend-mode:screen;
	opacity:.16;
}

.ui-elevator-stage__shaft-inner::after {
	content:"";
	position:absolute;
	inset:0;
	z-index:4;
	pointer-events:none;
	background:
		radial-gradient(circle at 8% 18%, rgba(211,249,255,.95) 0 2px, rgba(137,247,255,.55) 3px, transparent 6px),
		radial-gradient(circle at 14% 74%, rgba(211,249,255,.95) 0 2px, rgba(137,247,255,.55) 3px, transparent 6px),
		radial-gradient(circle at 27% 39%, rgba(211,249,255,.95) 0 2px, rgba(137,247,255,.55) 3px, transparent 6px),
		radial-gradient(circle at 41% 22%, rgba(211,249,255,.95) 0 2px, rgba(137,247,255,.55) 3px, transparent 6px),
		radial-gradient(circle at 58% 61%, rgba(211,249,255,.95) 0 2px, rgba(137,247,255,.55) 3px, transparent 6px),
		radial-gradient(circle at 72% 29%, rgba(211,249,255,.95) 0 2px, rgba(137,247,255,.55) 3px, transparent 6px),
		radial-gradient(circle at 86% 68%, rgba(211,249,255,.95) 0 2px, rgba(137,247,255,.55) 3px, transparent 6px),
		linear-gradient(
			90deg,
			transparent 0 7.7%,
			rgba(143,245,255,.22) 7.7% 8.3%,
			transparent 8.3% 13.7%,
			rgba(143,245,255,.18) 13.7% 14.2%,
			transparent 14.2% 26.6%,
			rgba(143,245,255,.18) 26.6% 27.1%,
			transparent 27.1% 40.6%,
			rgba(143,245,255,.18) 40.6% 41.1%,
			transparent 41.1% 57.6%,
			rgba(143,245,255,.18) 57.6% 58.1%,
			transparent 58.1% 71.6%,
			rgba(143,245,255,.18) 71.6% 72.1%,
			transparent 72.1% 85.6%,
			rgba(143,245,255,.18) 85.6% 86.1%,
			transparent 86.1% 100%
		);
	opacity:.22;
}


/* ==========================================================================
   5. SCHACHTWÄNDE
   ========================================================================== */

.ui-elevator-stage__shaft-wall {
	position:absolute;
	z-index:5;
	display:block;
	box-sizing:border-box;
	background:
		repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent 31px,
			rgba(106,151,163,.14) 32px,
			transparent 33px
		),
		linear-gradient(
			to bottom,
			#17343c,
			#0b1d23
		);
	box-shadow:
		inset 0 0 18px rgba(0,0,0,.70);
	backface-visibility:hidden;
	transform-style:preserve-3d;
}

.ui-elevator-stage__shaft-wall--left,
.ui-elevator-stage__shaft-wall--right {
	top:var(--ui-elevator-shaft-frame-size);
	bottom:var(--ui-elevator-shaft-frame-size);
	width:var(--ui-elevator-shaft-frame-size);
}

.ui-elevator-stage__shaft-wall--left {
	left:var(--ui-elevator-shaft-frame-size);
	transform-origin:left center;
	transform:
		rotateY(90deg)
		translateZ(
			calc(
				-1 *
				var(--ui-elevator-shaft-frame-size)
			)
		);
}

.ui-elevator-stage__shaft-wall--right {
	right:var(--ui-elevator-shaft-frame-size);
	transform-origin:right center;
	transform:
		rotateY(-90deg)
		translateZ(
			calc(
				-1 *
				var(--ui-elevator-shaft-frame-size)
			)
		);
}

.ui-elevator-stage__shaft-wall--top,
.ui-elevator-stage__shaft-wall--bottom {
	left:var(--ui-elevator-shaft-frame-size);
	right:var(--ui-elevator-shaft-frame-size);
	height:var(--ui-elevator-shaft-frame-size);
}

.ui-elevator-stage__shaft-wall--top {
	top:var(--ui-elevator-shaft-frame-size);
	transform-origin:center top;
	transform:
		rotateX(-90deg)
		translateZ(
			calc(
				-1 *
				var(--ui-elevator-shaft-frame-size)
			)
		);
}

.ui-elevator-stage__shaft-wall--bottom {
	bottom:var(--ui-elevator-shaft-frame-size);
	transform-origin:center bottom;
	transform:
		rotateX(90deg)
		translateZ(
			calc(
				-1 *
				var(--ui-elevator-shaft-frame-size)
			)
		);
}


/* ==========================================================================
   6. SCHACHTBODEN / TIEFENEBENE
   ========================================================================== */

.ui-elevator-stage__shaft-floor {
	position:absolute;
	inset:var(--ui-elevator-shaft-frame-size);
	z-index:1;
	display:block;
	background:
		radial-gradient(
			ellipse at center,
			rgba(70,220,255,.10) 0%,
			rgba(70,220,255,.04) 24%,
			rgba(0,0,0,0) 68%
		),
		linear-gradient(
			to bottom,
			rgba(10,24,30,.20),
			rgba(3,9,12,.70)
		);
	box-shadow:
		inset 0 0 44px rgba(0,0,0,.82),
		inset 0 0 12px rgba(143,245,255,.08);
	transform:
		translateZ(
			calc(
				-1 *
				var(--ui-elevator-shaft-depth)
			)
		);
	transform-style:preserve-3d;
	backface-visibility:hidden;
}


/* ==========================================================================
   7. BEWEGTE FLÄCHEN
   ========================================================================== */

.ui-elevator-stage__surface {
	position:relative;
	display:block;
	width:100%;
	box-sizing:border-box;
	transform-origin:50% 50%;
	transform-style:preserve-3d;
	backface-visibility:hidden;
}

.ui-elevator-stage__surface[hidden] {
	display:none !important;
}

.ui-elevator-stage--running
.ui-elevator-stage__surface {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	margin:0;
	will-change:transform;
}

.ui-elevator-stage--running
.ui-elevator-stage__surface--outgoing {
	z-index:20;
}

.ui-elevator-stage--running
.ui-elevator-stage__surface--incoming {
	z-index:19;
	pointer-events:none;
}

.ui-elevator-stage[data-ui-elevator-state="final"]
.ui-elevator-stage__surface--incoming {
	position:relative;
	pointer-events:auto;
}


/* ==========================================================================
   8. TECHNISCHE SCHACHTDETAILS
   ========================================================================== */

.ui-elevator-stage__shaft-led {
	position:absolute;
	z-index:8;
	width:7px;
	height:7px;
	border-radius:50%;
	background:#c9fbff;
	box-shadow:
		0 0 4px rgba(143,245,255,.95),
		0 0 10px rgba(143,245,255,.55),
		0 0 16px rgba(46,192,211,.28);
	pointer-events:none;
	opacity:.92;
}

.ui-elevator-stage__shaft-led--top-left {
	top:7px;
	left:7px;
}

.ui-elevator-stage__shaft-led--top-right {
	top:7px;
	right:7px;
}

.ui-elevator-stage__shaft-led--bottom-left {
	bottom:7px;
	left:7px;
}

.ui-elevator-stage__shaft-led--bottom-right {
	right:7px;
	bottom:7px;
}


/* ==========================================================================
   9. ZUSTÄNDE
   ========================================================================== */

.ui-elevator-stage[aria-busy="true"] {
	cursor:progress;
}

.ui-elevator-stage[aria-busy="true"]
.ui-elevator-stage__surface {
	user-select:none;
}

.ui-elevator-stage:not(.ui-elevator-stage--running)
.ui-elevator-stage__shaft {
	display:none;
}


/* ==========================================================================
   10. FALLBACK FÜR BROWSER OHNE COLOR-MIX
   ========================================================================== */

@supports not (
	background:
		color-mix(
			in srgb,
			#000 50%,
			transparent
		)
) {
	.ui-elevator-stage__shaft::before {
		box-shadow:
			inset 0 0 0 1px #45616a,
			inset 0 0 18px rgba(0,0,0,.62),
			0 0 0 1px #071116,
			0 10px 24px rgba(0,0,0,.28);
	}
}


/* ==========================================================================
   11. REDUZIERTE BEWEGUNG
   ========================================================================== */

@media (prefers-reduced-motion:reduce) {
	.ui-elevator-stage__surface {
		will-change:auto;
	}
}


@keyframes ui-elevator-led-pulse {
	0% {
		opacity:.55;
		transform:scale(.92);
	}
	50% {
		opacity:1;
		transform:scale(1.08);
	}
	100% {
		opacity:.65;
		transform:scale(.96);
	}
}

.ui-elevator-stage__shaft-led {
	animation:ui-elevator-led-pulse 1.8s ease-in-out infinite;
}

.ui-elevator-stage__shaft-led--top-right {
	animation-delay:.25s;
}

.ui-elevator-stage__shaft-led--bottom-left {
	animation-delay:.6s;
}

.ui-elevator-stage__shaft-led--bottom-right {
	animation-delay:.95s;
}