/* ============================================================
 * observation.css — 观察场景三格分屏动态切入组件样式
 * 三个观察对象按选择顺序填入 中 → 左 → 右
 * ============================================================ */

/* ── 主容器（覆盖整个游戏画面） ── */
#ltc-observe-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 8;               /* 低于 text-box(10)/choice(11)/quick-menu(11)，对话文本保持可读 */
  pointer-events: none;
  display: none;
  overflow: hidden;
}

#ltc-observe-stage.active {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "left center right";
}

/* ── 面板通用 ──
   默认不占据任何 slot（未观察时不可见），由 JS 设置 data-slot 后进入网格 */
.observe-panel {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: inset(0 0 100% 0);   /* 默认完全隐藏（从上方切入） */
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.observe-panel[data-slot="left"]   { grid-area: left; }
.observe-panel[data-slot="center"] { grid-area: center; }
.observe-panel[data-slot="right"]  { grid-area: right; }

/* ── 面板背景图绑定（相对本文件 style/game/ 上两级到项目根） ── */
.observe-panel[data-index="0"] {
  background-image: url('../../assets/images/cg_pro_observe_rider.webp');
}
.observe-panel[data-index="1"] {
  background-image: url('../../assets/images/cg_pro_observe_couple.webp');
}
.observe-panel[data-index="2"] {
  background-image: url('../../assets/images/cg_pro_observe_drunk.webp');
}

/* ── 切入动画方向 ── */
/* 从上往下切入 */
.observe-panel.enter-from-top {
  clip-path: inset(0 0 100% 0);         /* 初始：完全被裁切 */
}
.observe-panel.enter-from-top.shown {
  clip-path: inset(0 0 0 0);             /* 完全显示 */
  opacity: 1;
}

/* 从下往上切入 */
.observe-panel.enter-from-bottom {
  clip-path: inset(100% 0 0 0);         /* 初始：完全被裁切 */
}
.observe-panel.enter-from-bottom.shown {
  clip-path: inset(0 0 0 0);             /* 完全显示 */
  opacity: 1;
}

/* ── 面板边框分隔线（细线，营造分屏感） ── */
.observe-panel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.observe-panel[data-slot="right"]::after {
  display: none;
}

/* ── 面板内情绪条叠层（可选，由 JS 动态插入） ── */
.observe-panel .emo-bar-container {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* ── 隐藏动画 ── */
#ltc-observe-stage.hiding .observe-panel {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 0.5s ease-in, opacity 0.4s ease-in;
}

/* ── 竖屏：仍保持左中右三列，避免人物被过度裁切 ── */
@media (orientation: portrait) {
  #ltc-observe-stage.active {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "left center right";
  }

  .observe-panel::after {
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 2px;
    height: auto;
  }
}