/* 创造页临时预览（单页 + 全页）的样式
 * 元素结构：.modal-overlay.preview-one > .pv1-stage  或  .modal-overlay.preview-all > .pva-stage
 * preview 内部用与 viewer 同样的 .md-* 类 + data-layout（共享 renderSlide.js），
 * 所以媒体布局直接复用 viewer/slide-media.css 的 [data-layout="..."] 规则
 *
 * 这份文件只覆盖 preview 专属的部分：
 *   1) 弹窗容器 + stage 尺寸
 *   2) 文字样式 + 词动画（pv-wordBounce 区别于 viewer 的 wordBounce）
 *   3) 媒体图片预览动画（pv-mediaIn 区别于 viewer 的 mediaIn）
 *   4) 弹窗工具条（header / foot）
 */

.preview-one,
.preview-all {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.preview-one .pv1-stage,
.preview-all .pva-stage {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* preview 内的 .md-slide 用更紧凑的内边距（modal stage 比 viewer 视口小） */
.preview-one .md-slide,
.preview-all .md-slide {
  padding: 32px 28px;
  gap: 12px;
}
.preview-one .md-slide-text,
.preview-all .md-slide-text {
  max-width: 92%;
  font-size: clamp(16px, 2.2vw, 26px);
  line-height: 1.5;
  margin: 0 0 18px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}
.preview-one .md-slide-text .md-word,
.preview-all .md-slide-text .md-word {
  white-space: pre;
  word-break: keep-all;
  opacity: 0;
  transform: translateY(20px) scale(0.7);
  animation: pv-wordBounce 540ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--i, 0) * 50ms + 80ms);
}
@keyframes pv-wordBounce {
  0%   { opacity: 0; transform: translateY(20px) scale(0.6); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* preview 内 .md-slide-media：填满 stage；具体布局走 viewer/slide-media.css 的 [data-layout] 规则
 * 只覆盖 max-width 收窄到 modal 尺寸，比例 / 网格 全部继承 viewer
 */
.preview-one .md-slide-media,
.preview-all .md-slide-media {
  max-width: min(820px, 86%);
}

/* preview 内媒体图片的动画：覆盖 viewer 的 mediaIn，
 * 让 preview 弹窗里的图用 pv-mediaIn（更紧凑、角旋转幅度小一点，匹配弹窗感）
 */
.preview-one .md-slide-media img,
.preview-one .md-slide-media video,
.preview-all .md-slide-media img,
.preview-all .md-slide-media video {
  border-radius: 8px;
  background: #1a1814;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.85) rotate(-2deg);
  animation: pv-mediaIn 600ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}
@keyframes pv-mediaIn {
  0%   { opacity: 0; transform: scale(0.8) rotate(-3deg); filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}

/* preview header / nav（modal 内的工具条） */
.preview-head {
  position: absolute;
  top: 16px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
  color: #f8f4ed;
  font-size: 12px;
}
.preview-head .icon-btn {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.preview-head .icon-btn.size-md { width: 38px; height: 38px; }
.preview-head .icon-btn.size-lg { width: 48px; height: 48px; font-size: 18px; }

.preview-foot {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 5;
}