/* Objects of Power 页：无垠的纯白 + 顶部的倒三角（委员会，尖角约 60°，底边贴着屏幕顶边），档案文字块绕着三角转 */
/* 层次（从下到上）：白底 1 → 背景刷 1（DOM 在后）→ 后半圈的文字块 2–6 → 三角 7 → 前半圈的文字块 9–13 → 导航 100（本页没有 3D 画布）
   #oop 本身不建层叠上下文（absolute、不设 z-index），子元素的 z-index 才能和画布交错 */
#oop {
  --oop-w: 70vw;   /* 三角宽度、高度（--oop-h）由脚本按参数设置 */
  position: absolute; inset: 0;
  display: none;
  /* 整页文字不可选中；轮盘可以按住左右拖（抓手光标）；触屏上不让浏览器把拖动当成滚动 / 缩放 */
  -webkit-user-select: none; user-select: none;
  cursor: grab; touch-action: none;
  /* 抵消浏览器缩放（Ctrl + / −，2026-10-20）：三角、文字块、物品图、坏屏竖线保持原来的物理大小。
     层里的 vw / vh 也会被一起缩小 → 乘回 --zf；oop.js 在层的坐标（屏幕 × z）里排（js/zoom.js） */
  zoom: var(--unzoom, 1);
}
body.page-oop #oop { display: block; }
/* 擦除中（还没到达）：文字块先开始渐显；白底交给背景刷，三角等到达后从竖线展开 */
body.pre-oop #oop { display: block; }
body.pre-oop:not(.page-oop) #oop .white,
body.pre-oop:not(.page-oop) #oop .board,
body.pre-oop:not(.page-oop) #oop svg.dead { visibility: hidden; }
#oop.dragging, #oop.dragging * { cursor: grabbing !important; }
#oop img, #oop a { -webkit-user-drag: none; }
#oop .white { position: fixed; inset: 0; z-index: 1; background: #fff; }
/* 坏屏竖线（脚本生成）：后层 z 1 排在白底后面（文字块、三角之下，离场时被背景刷盖住）；前层 z 18 在所有文字块之上、导航之下 */
#oop svg.dead { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#oop svg.dead.back { z-index: 1; }
#oop svg.dead.front { z-index: 18; }
/* 倒三角：底色 = 当前物品照片的灰色（--oop-bg，由脚本设置），照片和颗粒都被 clip-path 裁在三角里 */
#oop .board {
  --oop-bg: #000;
  position: fixed; z-index: 7; top: 0; left: calc((100vw * var(--zf, 1) - var(--oop-w)) / 2);
  width: var(--oop-w); height: var(--oop-h, calc(var(--oop-w) / 2));   /* 高度按尖角角度算（脚本设置 --oop-h） */
  background: var(--oop-bg);
  transition: background-color var(--photo-fade, .6s);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  overflow: hidden;
  transform-origin: 50% 0;   /* 离场压扁：以中线为轴收窄（scaleX 由脚本设置） */
}
/* 当前物品的档案照片：三角上部居中，四边羽化融进同色的底（两张交替淡入淡出） */
#oop .board .photo {
  position: absolute; left: 50%; top: var(--photo-top, 0px);
  height: var(--photo-h, 60%); width: auto;
  transform: translate(calc(-50% + var(--wx, 0px)), var(--wy, 0px));   /* --wx / --wy：放映机片门晃动 */
  opacity: 0; transition: opacity var(--photo-fade, .6s);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--photo-feather), #000 calc(100% - var(--photo-feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--photo-feather), #000 calc(100% - var(--photo-feather)), transparent);
          mask-image:
    linear-gradient(to right, transparent, #000 var(--photo-feather), #000 calc(100% - var(--photo-feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--photo-feather), #000 calc(100% - var(--photo-feather)), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
#oop .board .photo.on { opacity: 1; }
/* 颗粒：铺满整个三角，和照片自带的噪点接上（照片羽化掉的边缘不会露出一块「光滑」的底） */
#oop .board .grain {
  position: absolute; inset: 0;
  background-size: var(--grain-size, 160px); background-repeat: repeat;
  mix-blend-mode: overlay; opacity: var(--grain, .35);
  pointer-events: none;
}
/* 幻灯放映：灼烧黑点画布，和最上面的遮光层（纯黑，不透明度 = 1 - 灯光亮度，由脚本每帧设置） */
#oop .board .burn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#oop .board .shade { position: absolute; inset: 0; background: #000; opacity: 1; pointer-events: none; }

/* ---------- 档案文字块 ---------- */
/* 位置、缩放、颜色、层次都由脚本按轨道角度每帧设置；--ink 越远越浅（涂黑条也跟着变浅） */
.oop-block {
  --ink: #000;
  position: fixed; left: 0; top: 0; width: var(--oop-block-w, 340px);
  transform-origin: 50% 0;
  color: var(--ink);
  padding-top: calc(18px * var(--oop-kt, 1)); border-top: 1.5px solid var(--ink);   /* --oop-kt：小屏校正（oop.js kt，2026-10-27），2K = 1 */
  cursor: pointer;
  will-change: transform;
}
.oop-block.front { cursor: grab; }
/* 文字块渐隐 / 渐显（离场、入场）：时长由脚本设置 --text-fade */
.oop-block, .oop-pic { transition: opacity var(--text-fade, 0s); }
#oop.text-hidden .oop-block, #oop.text-hidden .oop-pic { opacity: 0; pointer-events: none; }   /* 正前方的块：点它不转，但可以从它上面开始拖 */
/* 字号由脚本按参数设置（P.metaSize / titleSize / locSize / bodySize，2026-10-20；原来写死 11 / 30 / 10.5 / 15px） */
.oop-block .meta {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-label); font-size: var(--oop-meta, 11px); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: calc(12px * var(--oop-kt, 1));
}
.oop-block h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--oop-title, 30px); line-height: .98; letter-spacing: -0.015em;
  margin: 0 0 calc(10px * var(--oop-kt, 1));
  color: var(--title, var(--ink));   /* 物品标题色（脚本按深度设置，见 oop.js 的 titleColor） */
}
.oop-block .loc {
  font-family: var(--font-label); font-size: var(--oop-loc, 10.5px); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
}
.oop-block .loc .label { opacity: .55; display: block; }
.oop-block .desc { margin-top: calc(14px * var(--oop-kt, 1)); }
.oop-block .desc p { font-family: var(--font-body); font-size: var(--oop-body, 15px); line-height: 1.45; margin: 0 0 .7em; }
.oop-block .desc p:last-child { margin-bottom: 0; }   /* 链接行删掉后最后一段是块的底 */
.oop-block .redacted {
  display: inline-block; height: .95em; vertical-align: -0.14em;
  background: var(--ink); /* 涂黑条 */
}

/* ---------- 褪色物品图（2026-10-20，P.orbitStyle = 'pictures'）：不在正前方的位置显示物品照片 ---------- */
/* 位置、缩放、层次和文字块一样由脚本按轨道角度设置；褪色 = 一层灰白遮罩（--wash-color，强度 --wash），图本身不透明 */
.oop-pic {
  --wash: 1;
  position: fixed; left: 0; top: 0; width: var(--oop-pic-w, 260px);
  transform-origin: 50% 0;
  cursor: pointer;
  will-change: transform;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--pic-feather, 0%), #000 calc(100% - var(--pic-feather, 0%)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--pic-feather, 0%), #000 calc(100% - var(--pic-feather, 0%)), transparent);
          mask-image:
    linear-gradient(to right, transparent, #000 var(--pic-feather, 0%), #000 calc(100% - var(--pic-feather, 0%)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--pic-feather, 0%), #000 calc(100% - var(--pic-feather, 0%)), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.oop-pic img { display: block; width: 100%; height: auto; }
.oop-pic::after {
  content: ''; position: absolute; inset: 0;
  background: var(--wash-color, #efeeea); opacity: var(--wash);
}