/* ============================================================
 * Longlight - 长光雨滴小站 | 图片放大查看器 components/image-viewer.css
 * 来源：~README/项目架构.js → 风格.控件（遮罩 / 图标按钮）
 * 用法：逻辑见 shared/imageViewer.js；图片加 data-zoom 属性即接入
 * ============================================================ */

/* 可放大的图片：提示可点击 */
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);
  box-shadow: var(--shadow-3);
  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);
}

/* 图标按钮 36×36，圆角 2px，1px 细边框 */
.image-viewer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-btn);
  border: var(--border-default);
  background: var(--surface-emphasis);
  color: var(--text-primary);
  font: var(--text-body);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-hover) var(--ease-out),
              border-color var(--duration-hover) var(--ease-out),
              color var(--duration-hover) var(--ease-out);
}

/* hover：底色保持不透明，只把表面色按前景色方向推进一档（亮色加深 / 暗色提亮），
   再用绿色描边与绿色图标做反馈；不使用半透明 hover 底色，避免按钮在遮罩上"变透明" */
.image-viewer-btn:hover {
  background: color-mix(in srgb, var(--surface-emphasis) 88%, var(--text-primary));
  border-color: var(--green-900);
  color: var(--green-900);
}

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

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