/*
 * 新效果（helix / crate / prism / flashlight）共用的界面样式。
 * 颜色变量（--fg --dim --faint --line）由各页面自己定义。
 */

/* ---------- 右侧作品索引：当前项点亮并向左伸出一道短线 ---------- */
#index { list-style: none; }
#index li {
  list-style: none; font-size: 11px; letter-spacing: .04em; color: var(--faint); padding: 4.5px 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  transition: color .4s ease; pointer-events: auto; cursor: pointer;
}
#index li:hover { color: var(--dim); }
#index li i { display: block; width: 0; height: 1px; background: currentColor; transition: width .45s cubic-bezier(.2,.8,.2,1); }
#index li.on { color: var(--fg); }
#index li.on i { width: 26px; }
@media (max-width: 899px) { #index { display: none; } }

/* ---------- 左上角字标兼作「返回入口页」 ---------- */
a.home-link { color: inherit; text-decoration: none; pointer-events: auto; display: inline-flex; align-items: center; gap: 0; }
a.home-link::before {
  content: "←"; display: inline-block; overflow: hidden; width: 0; opacity: 0; letter-spacing: 0;
  transition: width .35s cubic-bezier(.2,.8,.2,1), opacity .35s, margin .35s;
}
a.home-link:hover::before { width: 1.1em; opacity: 1; margin-right: .5em; }

/* ---------- 打开态：右栏档案 ---------- */
/* 它存在的唯一理由就是把画面填满 —— 一张图浮在空场里永远显得没做完 */
#panel {
  position: fixed; z-index: 63; opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
}
#panel.live { pointer-events: auto; }
#panel .num { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
#panel h2 { font-size: clamp(26px, 2.5vw, 40px); font-weight: 400; letter-spacing: -.018em; line-height: 1.08; margin: 16px 0 18px; }
#panel .cap { font-size: 13px; line-height: 1.85; color: var(--dim); }
#panel .sep { height: 1px; background: var(--line); margin: 24px 0; }
#panel dl { display: grid; grid-template-columns: 74px 1fr; row-gap: 11px; column-gap: 16px; }
#panel dt { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
#panel dd { font-size: 12.5px; color: var(--fg); }
#panel nav { display: flex; gap: 22px; margin-top: 26px; }
#panel nav button, #closeBtn {
  background: none; border: none; padding: 6px 0; cursor: pointer; color: var(--dim);
  font: inherit; font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); transition: color .25s, border-color .25s;
}
#panel nav button:hover, #closeBtn:hover { color: var(--fg); border-color: var(--fg); }
#closeBtn { position: fixed; z-index: 64; top: 22px; right: 36px; opacity: 0; pointer-events: none; }
#closeBtn.live { pointer-events: auto; }

/* ---------- 打开态：底部胶片条 ---------- */
/* 既是导航，也是把画面底部填起来的那一行 */
#strip {
  position: fixed; z-index: 63; left: 0; right: 0; bottom: 30px; opacity: 0; pointer-events: none;
  display: flex; justify-content: center; gap: 8px; padding: 0 36px;
}
#strip.live { pointer-events: auto; }
#strip button {
  position: relative; flex: 0 0 auto; width: var(--thumb-w, 86px); aspect-ratio: 1600 / 1231; padding: 0; border: none;
  background: none; cursor: pointer; opacity: .34; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
#strip button img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; }
#strip button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 1px; background: var(--fg);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
#strip button:hover { opacity: .7; }
#strip button.on { opacity: 1; transform: translateY(-4px); }
#strip button.on::after { transform: scaleX(1); }

@media (max-width: 767px) {
  #closeBtn { right: 20px; top: 16px; }
  #panel dl { grid-template-columns: 64px 1fr; row-gap: 7px; }
  #panel .cap { display: none; }
  #panel h2 { margin: 8px 0 0; }
  #panel .sep { margin: 14px 0; }
  #panel nav { margin-top: 14px; }
  #strip { gap: 5px; bottom: 18px; padding: 0 12px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  #strip::-webkit-scrollbar { display: none; }
}