/* ============================================================
   星渊画廊 · SPACE GALLERY
   深空夜画廊风: 与照片墙统一(深蓝底 + 暖米白 + 金)
   照片是拍立得样式; 布局切换用"收缩+模糊 → 放大展开"的聚拢感
   ============================================================ */

:root {
  /* 空间配色(与首页统一) */
  --space-bg-0: #0a0f1e;      /* 深空底 */
  --space-bg-1: #11172a;
  --space-bg-2: #151c32;
  --gold: #d4a853;
  --gold-2: #e9cf8f;
  --gold-dim: rgba(212, 168, 83, 0.55);
  --violet: #9d8fd6;
  --fg: #ebe5d5;              /* 暖米白 */
  --muted: #9ca0b4;
  --ink-dim: #5d6478;
  --panel: rgba(21, 28, 50, 0.62);
  --border: rgba(255, 255, 255, 0.12);
  --radius: 12px;

  --photo-size: 96px;         /* 拍立得框宽(JS 会按需覆盖) */

  --font-display: "Fraunces", "Noto Serif SC", Georgia, serif;
  --font-cn: "Noto Serif SC", "Fraunces", Georgia, serif;
  --font-sans: "Geist", "Noto Serif SC", system-ui, -apple-system,
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 教训: 所有默认隐藏的浮层, 强制压回 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--space-bg-0);
  color: var(--fg);
  overflow: hidden;              /* 空间页不滚动, 一切在舞台里 */
  animation: fadeIn 500ms ease-out both;
}

img { display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- 星尘背景 ---------- */
#stardust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ---------- 顶部信息条 ---------- */
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  pointer-events: none;          /* 让拖拽穿透, 按钮自身恢复 */
}

.top > * { pointer-events: auto; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease, transform 150ms ease;
}

.btn-back svg { width: 16px; height: 16px; }

.btn-back:hover { color: var(--gold-2); border-color: var(--gold-dim); }
.btn-back:active { transform: scale(0.96); }

.title-group { text-align: center; }

.title {
  font-family: var(--font-cn);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  margin-left: 0.4em;            /* 抵消最后一个字的字距 */
  color: var(--fg);
}

.title-en {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  margin-left: 0.42em;
  margin-top: 4px;
  color: var(--gold-dim);
  text-transform: uppercase;
}

.subtitle {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.count {
  min-width: 64px;
  text-align: right;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--gold-dim);
}

/* ---------- 照片太少提示条 ---------- */
.hintbar {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(212, 168, 83, 0.12);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-size: 0.85rem;
  animation: fadeDown 400ms ease-out both;
}

.hintbar svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- 3D 舞台 ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  perspective: 1400px;           /* 透视: 决定 3D 纵深感的强度 */
  touch-action: none;            /* 舞台上的触摸手势全交给 JS */
  display: grid;
  place-items: center;
}

/* 缩放隔离层: 布局切换的动画作用在这一层, 和 ball 的旋转(内联 transform)互不干扰。
   注意: 必须 preserve-3d, 否则中间层会压平整个 3D 场景 */
.ball-wrap {
  position: relative;
  transform-style: preserve-3d;
}

/* 切换布局: 收缩+模糊消失(0.35s, 由 JS 加类触发) */
.ball-wrap.contracting .photo {
  animation: photoOut 0.35s cubic-bezier(.5, .05, .3, 1) forwards;
}

/* 新布局展开: 从 0.5 倍放大淡入, 错峰由 --d 控制 */
.ball-wrap.expanding .photo {
  animation: photoIn 0.5s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: var(--d, 0ms);
}

.ball {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;  /* 子元素保持 3D 位置 */
  transform: rotateX(-14deg) rotateY(0deg);
  transition: opacity 350ms ease;
}

/* 拍立得照片: 米白相纸框 + 底部留白
   位置用 CSS 变量 --pos 保存, transform 由 CSS 统一控制。
   关键: left/top 负偏移让"框中心"正好落在球心(ball 原点) */
.photo {
  position: absolute;
  left: calc(var(--photo-size, 96px) / -2);
  top: calc((var(--photo-size, 96px) + 20px) / -2);
  width: var(--photo-size, 96px);
  height: calc(var(--photo-size, 96px) + 20px);
  background: var(--fg);                 /* 米白相纸 */
  padding: 4px 4px 0;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 32px -8px rgba(0, 0, 0, 0.7);
  cursor: zoom-in;
  will-change: transform;
  transform: var(--pos, none);
  transition: box-shadow 350ms ease;
}

.photo-img {
  width: 100%;
  height: calc(100% - 20px);             /* 底部留白 20px(写字区) */
  object-fit: cover;
  border-radius: 3px;
  opacity: 0;                            /* 加载完成后淡入(见 JS onload) */
  transition: opacity 300ms ease;
}

.photo-img.loaded { opacity: 1; }

/* 悬停: 从装置里"浮出来"(transform 过渡只在 hover 时启用, 不影响切换布局时的位置瞬移) */
.photo:hover {
  transition: box-shadow 350ms ease, transform 350ms ease;
  transform: var(--pos, none) translateZ(60px) scale(1.12);
  box-shadow:
    0 0 0 1px var(--gold-dim),
    0 0 30px rgba(212, 168, 83, 0.25),
    0 20px 48px -12px rgba(0, 0, 0, 0.8);
  z-index: 99;
}

/* 拖拽中: 抑制 hover 浮起, 照片保持原位, 视觉不跳 */
.ball.dragging .photo,
.ball.dragging .photo:hover {
  transform: var(--pos, none);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 32px -8px rgba(0, 0, 0, 0.7);
}

/* ---------- HUD 控制台 ---------- */
.hud {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  width: 250px;
  padding: 16px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  overflow: hidden;   /* 收起时把内容裁掉 */
  animation: fadeUp 500ms 200ms ease-out both;
  transition: width 300ms ease, padding 300ms ease, border-radius 300ms ease,
              height 300ms ease, opacity 250ms ease;
}

/* 收起: 缩成小圆钮, 内容一起 fade */
.hud.collapsed {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  opacity: 0.85;
}

.hud-body {
  transition: opacity 200ms ease;   /* 内容同步淡出, 遮盖 height 跳变 */
}

.hud.collapsed .hud-body {
  opacity: 0;
  pointer-events: none;
}

.hud-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  transition: color 200ms ease, background-color 200ms ease,
              top 300ms ease, right 300ms ease, left 300ms ease,
              transform 300ms ease;
  z-index: 2;
}

.hud-toggle svg { width: 14px; height: 14px; }

.hud-toggle:hover { color: var(--gold-2); background: rgba(255, 255, 255, 0.1); }

/* 收起时按钮跑到圆心, 箭头翻转 */
.hud.collapsed .hud-toggle {
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  color: var(--gold-2);
}

.hud-section + .hud-section { margin-top: 14px; }

.hud-label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--muted);
  margin-bottom: 8px;
}

.hud-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.hud-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.72rem;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
  min-height: 48px;
}

.hud-btn svg { width: 17px; height: 17px; }

.hud-btn:hover { color: var(--fg); }

.hud-btn.active {
  color: var(--gold-2);
  border-color: var(--gold-dim);
  background: rgba(212, 168, 83, 0.08);
}

.hud-tip {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.08em;
}

/* ---------- 加载中 ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--space-bg-0);
  transition: opacity 400ms ease;
}

.loader.done { opacity: 0; pointer-events: none; }

.loader p {
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  color: var(--muted);
}

.loader-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(212, 168, 83, 0.15);
  border-top-color: var(--gold);
  animation: spin 900ms linear infinite;
}

/* ---------- 灯箱 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 10, 18, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn 220ms ease-out both;
}

.lb-figure {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lb-figure img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 60px rgba(212, 168, 83, 0.12), 0 30px 60px -16px rgba(0, 0, 0, 0.9);
  animation: popIn 260ms ease-out both;
}

.lb-figure figcaption {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.lb-btn {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  transition: background-color 200ms ease, transform 150ms ease, color 200ms ease;
}

.lb-btn:hover { color: var(--gold-2); background: rgba(255, 255, 255, 0.12); }
.lb-btn:active { transform: scale(0.93); }

.lb-close { top: 18px; right: 22px; }
.lb-prev  { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }

body.no-scroll { overflow: hidden; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  animation: toastIn 260ms ease-out both;
}

/* ---------- 动画 ---------- */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown{ from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes popIn   { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }

/* 布局切换: 收缩消失(保持当前位置, 缩小+模糊) */
@keyframes photoOut {
  to {
    opacity: 0;
    transform: var(--pos, none) scale(0.3);
    filter: blur(6px);
  }
}

/* 布局切换: 放大展开(从 0.5 倍弹性放大到原位) */
@keyframes photoIn {
  from {
    opacity: 0;
    transform: var(--pos, none) scale(0.5);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: var(--pos, none) scale(1);
    filter: blur(0);
  }
}

@keyframes spin    { to { transform: rotate(360deg); } }

/* 窄屏: HUD 收窄, 顶部压缩, 照片缩小 */
@media (max-width: 640px) {
  .top { padding: 14px 16px; }
  .title { font-size: 0.95rem; letter-spacing: 0.32em; }
  .subtitle { display: none; }
  .hud { width: 210px; right: 12px; bottom: 12px; padding: 12px; }
  .hud-tip { display: none; }
  .hintbar { top: 110px; font-size: 0.75rem; padding: 8px 14px; white-space: nowrap; }
  :root { --photo-size: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}