/* ============================================================
   movies.css — 电影版块「照片隧道」
   只被 movies.html 引用。canvas 由 movies.js 插入 .mv 最前面，
   铺满整个展台；overlay 是隧道上方的居中标题（children 语义）。
   ============================================================ */

body[data-chapter="movies"] {
  --mv-bg: #0a0a0c;
  --mv-ember: #d2694a;
  --mv-mist: #8a93a6;
}

/* 一屏布局：canvas 吃满第一行 */
body[data-chapter="movies"] .chapter-body {
  padding: 0;
  background: var(--mv-bg);
}

.mv {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--mv-bg);
  user-select: none;
  -webkit-user-select: none;
}

.mv-canvas {
  position: absolute;
  inset: 0;
  display: block;
  cursor: grab;
  touch-action: none; /* 按住加速不被浏览器手势打断（无拖拽，页面本身也不靠手势滚） */
}
.mv-canvas:active { cursor: grabbing; }

/* WebGL 不可用时的降级提示 */
.mv.mv-unsupported::after {
  content: "这条隧道需要 WebGL2 —— 换个现代浏览器再来看看。";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mv-mist);
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ---------------- 隧道上方的内容 ---------------- */
.mv__overlay {
  position: absolute;
  top: clamp(64px, 9vh, 110px);
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  pointer-events: none; /* 让指针事件全部落到 canvas 上 */
  z-index: 2;
  transition: opacity 0.45s ease;
}

/* 加速「飞行」时标题让位给视野，松手淡回来（.mv-boosting 挂在隧道根节点） */
.mv-boosting .mv__overlay {
  opacity: 0;
}

.mv__kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mv-mist);
}

.mv__title {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgb(244 242 238 / 0.92);
  line-height: 1.15;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.55);
}
.mv__title em {
  font-style: normal;
  color: var(--mv-ember);
}

.mv__hint {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgb(138 147 166 / 0.75);
}

/* 右下角示意标注（诚实声明） */
.mv__note {
  position: absolute;
  right: 22px;
  bottom: calc(var(--bar-h, 64px) + 16px);
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgb(138 147 166 / 0.55);
  z-index: 2;
  pointer-events: none;
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 700px) {
  .mv__title { font-size: clamp(26px, 8vw, 40px); }
  .mv__hint { letter-spacing: 0.12em; padding: 0 24px; }
  .mv__note { right: 16px; font-size: 10px; }
}