/* =============================================================================
   Chino's Blog — 图片灯箱（Lightbox）
   -----------------------------------------------------------------------------
   点击文章内图片进入灯箱：放大/缩小、拖拽平移、←/→ 翻看帖内图片、
   关闭（× / Esc / 点击遮罩）。尊重 prefers-reduced-motion。
   ============================================================================ */

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  background: hsla(var(--default-900), .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
/* 夜间主题：--default-900 反转为浅色，必须另行指定纯黑遮罩 */
html.chino-dark .lightbox { background: hsla(0 0% 0% / .92); }
/* 灯箱开启时关闭特效指针与拖尾，避免指针卡顿 / 拖影 */
body.lb-active, body.lb-active * { cursor: default !important; }
body.lb-active .chino-cursor,
body.lb-active .chino-cursor-dot,
body.lb-active .chino-trail,
body.lb-active .chino-ripple { display: none !important; }
.lightbox-stage {
  position: relative; width: min(92vw, 1100px); height: min(82vh, 900px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: grab;
}
.lightbox-stage.is-grabbing { cursor: grabbing; }
.lightbox-img {
  max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none;
  transform: scale(var(--lb-scale, 1)); transition: transform var(--t-fast);
  box-shadow: 0 10px 50px hsla(0 0% 0% / .5); border-radius: var(--radius-sm);
}
html.lb-zoomed .lightbox-img { transition: none; }

/* 工具条 */
.lightbox-bar {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .25rem; padding: .375rem;
  background: hsla(var(--surface), .92); border: 1px solid var(--color-divider-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.lightbox-bar button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-foreground); border: none; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.lightbox-bar button:hover { background: var(--color-surface-2); color: var(--color-chino); }
.lightbox-bar button:disabled { opacity: .35; cursor: default; }
.lightbox-bar button svg { width: 1.125rem; height: 1.125rem; }
.lightbox-count { font-family: var(--font-mono); font-size: var(--fz-xs); color: var(--color-muted); padding: 0 .5rem; min-width: 3.25rem; text-align: center; }

.lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md);
  background: hsla(var(--surface), .92); border: 1px solid var(--color-divider-soft);
  color: var(--color-foreground); cursor: pointer; box-shadow: var(--shadow-md);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-spring);
}
.lightbox-close:hover { background: hsl(var(--accent)); color: #fff; transform: rotate(90deg); }
.lightbox-close svg { width: 1.25rem; height: 1.25rem; }

.lightbox-caption {
  position: absolute; left: 50%; top: 1.25rem; transform: translateX(-50%);
  max-width: min(80vw, 40rem); padding: .375rem .875rem;
  background: hsla(var(--surface), .9); border-radius: var(--radius-full);
  font-size: var(--fz-sm); color: var(--color-foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-sm);
}

/* 自定义特效鼠标指针（tippy.webp 作为指针主体） */
.chino-cursor {
  position: fixed; top: 0; left: 0; z-index: var(--z-tooltip);
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background-image: url("/static/chino/tippy.webp"); background-size: contain; background-repeat: no-repeat; background-position: center;
  pointer-events: none; opacity: 0; transform: translate3d(-100px, -100px, 0) scale(.6);
  transition: opacity var(--t-fast), transform var(--t-spring);
  will-change: transform; filter: drop-shadow(0 2px 6px hsla(var(--chino), .5));
}
.chino-cursor.is-visible { opacity: 1; }
.chino-cursor.is-active { transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(.82); }
.chino-cursor-dot {
  position: fixed; top: 0; left: 0; z-index: var(--z-tooltip);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: hsl(var(--accent)); pointer-events: none; opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity var(--t-fast); box-shadow: 0 0 0 3px hsla(var(--accent), .5);
}
.chino-cursor-dot.is-visible { opacity: .9; }
/* 点击涟漪 */
.chino-ripple {
  position: fixed; z-index: var(--z-tooltip); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 2px solid hsla(var(--chino), .7); pointer-events: none;
  transform: translate3d(-100px, -100px, 0) scale(.2); opacity: .9;
  animation: chino-ripple .6s ease-out forwards;
}
@keyframes chino-ripple { to { transform: translate3d(var(--rx), var(--ry), 0) scale(3.4); opacity: 0; } }
/* 指针拖尾（几枚渐隐的 tippy 残影） */
.chino-trail {
  position: fixed; top: 0; left: 0; z-index: calc(var(--z-tooltip) - 1);
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background-image: url("/static/chino/tippy.webp"); background-size: contain; background-repeat: no-repeat; background-position: center;
  pointer-events: none; opacity: 0; transform: translate3d(-100px, -100px, 0) scale(.5);
  transition: transform .18s ease-out, opacity .35s ease-out;
}

/* 开启自定义指针时隐藏原生光标（表单输入区保留文本光标） */
body.cursor-custom, body.cursor-custom * { cursor: none; }
body.cursor-custom input, body.cursor-custom textarea, body.cursor-custom .editor-textarea,
body.cursor-custom [contenteditable="true"], body.cursor-custom select, body.cursor-custom button { cursor: auto; }
body.cursor-custom input, body.cursor-custom textarea, body.cursor-custom .editor-textarea { cursor: text; }

/* 二次元趣味微动效 */
@keyframes chino-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.chino-pop { animation: chino-pop .28s var(--t-spring); }
.nav-link:hover svg, .hero-shortcut:hover svg { animation: chino-pop .3s var(--t-spring); }
.btn:active, .icon-btn:active, .tb-btn:active { transform: scale(.94); }
.navbar-brand:hover img { transform: rotate(-8deg) scale(1.08); }
.post-card:hover .post-card-cover-tag, .save-card:hover .save-top { transition: transform var(--t-base); }

@media (prefers-reduced-motion: reduce) {
  .chino-cursor, .chino-cursor-dot, .chino-trail, .chino-ripple { display: none !important; }
  .nav-link:hover svg, .hero-shortcut:hover svg, .btn:active { animation: none !important; transform: none !important; }
}
@media (pointer: coarse) {
  .chino-cursor, .chino-cursor-dot, .chino-trail { display: none !important; }
  body.cursor-custom, body.cursor-custom * { cursor: auto; }
}