/* True CSS 3D planes form an open-front architectural volume. */
#box-room.vm-box-room {
  position: absolute;
  inset: 98px 0 96px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: var(--room-perspective, 1800px);
  perspective-origin: 50% var(--room-eye-y, 34%);
  background: #f8fafc;
  --room-back-top: #e9eef3;
  --room-back-bottom: #f9fbfd;
  --room-back-light: rgba(255, 255, 255, .86);
  --room-near: #fff;
  --room-left-far: #e5ebf1;
  --room-right-far: #eaf0f5;
  --room-ceiling-far: #e9eef4;
  --room-floor-far: #eef2f6;
  --room-ambient: rgba(53, 70, 89, .115);
  --room-seam: rgba(53, 70, 89, .045);
}

#stage:not([data-scene="room"]):not([data-scene="blue"]) #box-room {
  visibility: hidden;
}

#box-room[data-room-theme="blue"] {
  background: #078dde;
  --room-back-top: #0874c8;
  --room-back-bottom: #069bec;
  --room-back-light: rgba(32, 174, 255, .23);
  --room-near: #14adf7;
  --room-left-far: #0886d8;
  --room-right-far: #0793e7;
  --room-ceiling-far: #0472cb;
  --room-floor-far: #0496e2;
  --room-ambient: rgba(0, 36, 105, .23);
  --room-seam: rgba(0, 35, 93, .07);
}

.vm-room-geometry {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.vm-room-plane {
  position: absolute;
  backface-visibility: hidden;
  /* A hairline overlap closes rasterisation gaps at shared 3D edges. */
  outline: 1px solid var(--room-seam);
}

.vm-room-back {
  inset: 0;
  transform: translateZ(calc(-1 * var(--room-depth)));
  background:
    radial-gradient(ellipse at 46% 56%, var(--room-back-light), transparent 76%),
    linear-gradient(180deg, var(--room-back-top), var(--room-back-bottom));
  box-shadow:
    inset 22px 18px 47px -18px var(--room-ambient),
    inset -16px 0 38px -21px var(--room-ambient),
    inset 0 -9px 22px -18px var(--room-ambient);
}

.vm-room-left {
  left: 0;
  top: 0;
  width: var(--room-depth);
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, var(--room-near), var(--room-left-far));
  box-shadow: inset 0 34px 48px -34px var(--room-ambient);
}

.vm-room-right {
  right: 0;
  top: 0;
  width: var(--room-depth);
  height: 100%;
  transform-origin: right center;
  transform: rotateY(-90deg);
  background: linear-gradient(90deg, var(--room-right-far), var(--room-near));
  box-shadow: inset 0 31px 48px -34px var(--room-ambient);
}

.vm-room-ceiling {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--room-depth);
  transform-origin: center top;
  transform: rotateX(-90deg);
  background: linear-gradient(180deg, var(--room-near), var(--room-ceiling-far));
  box-shadow:
    inset 25px 0 45px -32px var(--room-ambient),
    inset -25px 0 45px -32px var(--room-ambient);
}

.vm-room-floor {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--room-depth);
  transform-origin: center bottom;
  transform: rotateX(90deg);
  background:
    radial-gradient(ellipse at 50% 83%, var(--room-back-light), transparent 68%),
    linear-gradient(180deg, var(--room-floor-far), var(--room-near));
  box-shadow:
    inset 20px 0 48px -32px var(--room-ambient),
    inset -20px 0 48px -32px var(--room-ambient);
}

@media (max-width: 760px) {
  #box-room.vm-box-room { inset: 108px 0 122px; }
}