:root {
	--depth: 500px;
	--turnLeft: 0.06turn;
	--turnRight: -0.06turn;
	--turn: var(--turnRight);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	overflow: hidden;
}

body {
	height: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	background: hsl(0 0% 10%);
	perspective: 1000px;
	perspective-origin: 50% 35%;
}

.building {
	transform-style: preserve-3d;
}

.room {
	position: relative;
	border: 4vh solid hsl(0 0% 10%);
	height: 80vh;
	width: 100vw;
	scroll-snap-align: center;
	transform-style: preserve-3d;
}

.room + .room {
	border-top: 0;
}

.room::before,
.room::after {
	content: '';
	position: absolute;
	height: var(--depth);
	width: 100%;
	backface-visibility: hidden;
}

.room::before {
	background:
			radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
			lightgray;
	/* TODO: Change back to -90deg after Webkit fixes https://bugs.webkit.org/show_bug.cgi?id=265309 */
	transform: rotatex(-89.99999deg) scale(1.001);
	transform-origin: center top;
}

.room::after {
	bottom: 0;
	background:
			radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
			url(photo-1555505019-8c3f1c4aba5f.avif) center top / cover,
			sandybrown;
	/* TODO: Change back to 90deg after Webkit fixes https://bugs.webkit.org/show_bug.cgi?id=265309 */
	transform: rotateX(89.99999deg);
	transform-origin: center bottom;
}

.room-walls {
	position: absolute;
	inset: 0;
	background:
			linear-gradient(to top, hsl(0 0% 90%) 2.5vh, transparent 0),
			radial-gradient(hsl(0 0% 0% / 30%), hsl(0 0% 0% / 50%)),
			url(photo-1460501501851-d5946a18e552.avif) center / cover,
			darkgray;
	transform: translatez(calc(var(--depth) * -1));
	transform-style: preserve-3d;
}

.room-walls::before,
.room-walls::after {
	content: '';
	position: absolute;
	height: 100%;
	width: var(--depth);
}

.room-walls::before {
	right: 100%;
	background:
			linear-gradient(to top, hsl(0 0% 75%) 2.5vh, transparent 0),
			radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
			url(photo-1620153874520-aabdacf78006.avif) center / cover,
			gray;
	/* TODO: Change back to 90deg after Webkit fixes https://bugs.webkit.org/show_bug.cgi?id=265309 */
	transform: rotatey(89.99999deg);
	transform-origin: right center;
}

.room-walls::after {
	left: 100%;
	background:
			linear-gradient(to top, hsl(0 0% 75%) 2.5vh, transparent 0),
			radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
			url(photo-1441974231531-c6227db76b6e.avif) center / cover,
			gray;
	/* TODO: Change back to -90deg after Webkit fixes https://bugs.webkit.org/show_bug.cgi?id=265309 */
	transform: rotatey(-89.99999deg);
	transform-origin: left center;
}

.room-content {
	display: grid;
	place-content: center;
	height: 100%;
	width: 100%;
	color: white;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: clamp(1em, 20vmin, 8em);
	font-weight: 200;
	text-align: center;
	text-shadow: 0 5px 10px hsl(0 0% 0% / 20%);
	transform: translatez(calc(var(--depth) / -2)) rotatey(var(--turn));
}

.room:nth-child(odd) > .room-content {
	--turn: var(--turnLeft);
}