/* ============================================================
 * Longlight - 长光雨滴小站 | 图片放大查看器 components/image-viewer.css
 * 来源：~README/项目架构.js → 风格.控件（遮罩 / 图标按钮）
 * 用法：逻辑见 shared/imageViewer.js；图片加 data-zoom 属性即接入
 * 说明：本文件只负责遮罩、舞台与工具栏排布；工具栏按钮的尺寸与外观一律走公共控件
 *       components/button.css 的 .btn .btn-icon.is-solid，不再自带一套按钮样式
 * ============================================================ */

/* 可放大的图片：提示可点击 */
img[data-zoom] { cursor: zoom-in; }

/* ---- 全屏遮罩（纯色，禁止 backdrop-filter） ---- */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--overlay);
  opacity: 0;
  animation: imageViewerIn var(--duration-modal-overlay) var(--ease-out) forwards;
}

@keyframes imageViewerIn { to { opacity: 1; } }

/* ---- 舞台：居中承载图片，裁掉放大后的溢出部分 ---- */
.image-viewer-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-viewer-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-card);   /* 不加阴影、不加描边：图片即图片 */
  transform-origin: center center;
  transition: transform var(--duration-modal-panel) var(--ease-out);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.image-viewer-img.is-zoomed { cursor: grab; }
.image-viewer-img.dragging { cursor: grabbing; transition: none; }

/* ---- 右上角工具栏：缩小 / 放大 / 关闭 ---- */
.image-viewer-toolbar {
  position: absolute;
  top: var(--space-card);
  right: var(--space-card);
  z-index: 1;
  display: flex;
  gap: var(--space-icon-text);
}

/* 工具栏按钮走公共控件 .btn .btn-icon.is-solid（36×36 图标按钮 + 实底态：底色与 hover 不透明，
   避免按钮在遮罩上「变透明」），本文件不再另写一套按钮外观 */

/* 查看器开启时锁定背景滚动 */
body.image-viewer-open { overflow: hidden; }

/* 减少动态：关闭过渡与入场动画 */
@media (prefers-reduced-motion: reduce) {
  .image-viewer,
  .image-viewer-img { animation: none; transition: none; opacity: 1; }
}