/* room.css — 房间舞台 + cover-stage 数学 + 背景层/氛围层
   关键点：舞台尺寸精确等于图片 cover 盒，热点作为舞台百分比子元素天然跟随 */

.room {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #1c140e;          /* 图未载入时的底色 */
  z-index: var(--z-room);
}

/* 真实照片缺失时的暖色书房兜底，与 3D 层 / loader 调性一致 */
.room--fallback {
  background:
    radial-gradient(120% 90% at 72% 28%, rgba(217, 164, 65, 0.20), transparent 55%),
    radial-gradient(140% 120% at 18% 82%, rgba(192, 105, 59, 0.16), transparent 60%),
    linear-gradient(160deg, #1c140e 0%, #2a2014 48%, #3a2c1c 100%);
}
.room.room--fallback .room-video { opacity: 0; }

/* cover-stage：尺寸恒等于 (100vw,100vh) 在 object-fit:cover 下图片实际占用的盒 */
.room-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width:  max(100vw, calc(100svh * var(--room-ar)));
  height: max(100svh, calc(100vw / var(--room-ar)));
  transform: translate(
    calc(var(--focus-x, 50) * -1%),
    calc(var(--focus-y, 50) * -1%)
  );
  will-change: transform;
}

.room-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 氛围层：暗角 + 暖光，统一 UI 与照片的调性（不拦截事件） */
.room-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(29,20,16,0.45) 100%),
    linear-gradient(180deg, rgba(29,20,16,0.25) 0%, transparent 22%, transparent 70%, rgba(29,20,16,0.55) 100%);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

/* 移动端：偏向书桌区域（focusSm） */
@media (max-width: 767px) {
  .room-stage {
    transform: translate(
      calc(var(--focus-sm-x, 50) * -1%),
      calc(var(--focus-sm-y, 38) * -1%)
    );
  }
}