/**
 * 鹿雅云 · H5 区块库(blocks.css)— 084 样板相册新增
 * 通用照片区块版式 + 动态贴纸动画,所有主题共用;颜色一律走令牌。
 * 纪律:动画只用 transform / opacity / filter;prefers-reduced-motion 全关(文件末尾统一)。
 */

/* ================= 照片宽高比分桶(flow 流式区块) =================
   b-pan 全景通栏 / b-land 横(默认) / b-sq 方 / b-port 竖
   由 render.js 按 photo.w/h 计算;缺宽高回退 b-land。 */
.book-print.b-pan { margin-left: 0; margin-right: 0; }
.book-print.b-pan .print { border-radius: 0; border-left: 0; border-right: 0; padding: 0 0 14px; }
.book-print.b-pan .pimg { aspect-ratio: 21 / 10; border-radius: 0; }
.book-print.b-pan .pcap { margin: 9px 16px 0; }
.book-print.b-pan .pno { right: 12px; }

.book-print.b-port { width: 74%; margin-left: auto; margin-right: auto; }
.book-print.b-port .pimg { aspect-ratio: 3 / 4; }

.book-print.b-sq { width: 66%; margin-left: auto; margin-right: auto; }
.book-print.b-sq .pimg { aspect-ratio: 1 / 1; }

/* 流式区块里竖图/方图交替微倾,手工相册的呼吸感(reduced-motion 不属动画,保留) */
.book-print.b-sq:nth-of-type(odd) .print,
.book-print.b-port:nth-of-type(even) .print { transform: rotate(.6deg); }
.book-print.b-sq:nth-of-type(even) .print { transform: rotate(-.6deg); }

/* ================= 照片墙(chapter.layout = "carousel") =================
   横滑 scroll-snap,两侧露邻卡暗示可滑;下方指示点。 */
.pwall { margin: 4px 0 26px; }
.pwall-strip {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 44px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pwall-strip::-webkit-scrollbar { display: none; }
.pwall-item { flex: 0 0 auto; width: 76%; scroll-snap-align: center; }
.pwall-item .print { padding: 5px 5px 15px; }
.pwall-item .pimg { aspect-ratio: 3 / 4; }
.pwall-item.b-land .pimg { aspect-ratio: 35 / 22; }
.pwall-item.b-sq .pimg { aspect-ratio: 1 / 1; }
.pwall-item.b-pan .pimg { aspect-ratio: 16 / 9; }
/* 滑动时轻微缩放:居中卡略大(靠 JS 标 .cur) */
.pwall-item .print { transition: transform .45s var(--motion-ease); transform: scale(.96); }
.pwall-item.cur .print { transform: scale(1); }
.pwall-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }
.pwall-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hairline);
  transition: transform .3s var(--motion-ease), background .3s;
}
.pwall-dots i.on { background: var(--gold); transform: scale(1.3); }

/* ================= 堆叠散照(chapter.layout = "stack") =================
   散落桌面的层叠照片,点最上面一张滑走、下一张浮起,循环。 */
.pstack { position: relative; margin: 12px 26px 34px; }
.pstack::after { content: ""; display: block; padding-top: 118%; } /* 占位高度 */
.pstack .print {
  position: absolute; left: 50%; top: 50%;
  width: 78%;
  padding: 5px 5px 17px;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform .55s var(--motion-ease), opacity .45s ease;
  cursor: pointer;
  will-change: transform;
}
.pstack .pimg { aspect-ratio: 3 / 4; }
.pstack .print.b-sq .pimg { aspect-ratio: 1 / 1; }
.pstack .print.b-land .pimg { aspect-ratio: 35 / 22; }
.pstack .print.away {
  transform: translate(-160%, -58%) rotate(-22deg);
  opacity: 0;
}
.pstack-hint {
  position: absolute; left: 0; right: 0; bottom: -8px;
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .22em;
  color: var(--text-3);
}

/* ================= 动态贴纸层(album.stickers) ================= */
.fx { position: absolute; pointer-events: none; z-index: 7; }
.fx svg { display: block; overflow: visible; }

/* 葡萄串:挂在封面右上,细藤 + 串,顶部为轴轻晃 */
.fx-grapes { top: -6px; right: 26px; width: 54px; }
.fx-grapes svg { transform-origin: 50% 0; animation: fx-sway 5.6s ease-in-out infinite; }
@keyframes fx-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(5deg); }
}

/* 蝴蝶:沿对角线飞过一屏,翅膀扑动,长间隔循环 */
.fx-butterfly { top: 30%; left: -40px; width: 30px; opacity: 0; animation: fx-fly 14s linear infinite 3s; }
.fx-butterfly .wing { transform-origin: 50% 50%; animation: fx-flap .5s ease-in-out infinite alternate; }
@keyframes fx-fly {
  0%   { transform: translate(0, 0) rotate(8deg); opacity: 0; }
  6%   { opacity: .9; }
  46%  { transform: translate(46vw, -60px) rotate(-6deg); opacity: .9; }
  60%  { transform: translate(72vw, -30px) rotate(10deg); opacity: .9; }
  76%  { transform: translate(100vw, -90px) rotate(-4deg); opacity: 0; }
  100% { transform: translate(100vw, -90px); opacity: 0; }
}
@keyframes fx-flap {
  from { transform: scaleX(1); }
  to   { transform: scaleX(.35); }
}

/* 叶片飘落:封面内 3 片错峰缓落 */
.fx-leaf { top: -24px; width: 16px; opacity: 0; animation: fx-fall var(--t, 11s) linear infinite var(--d, 0s); }
@keyframes fx-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: .85; }
  86%  { opacity: .85; }
  100% { transform: translateY(76vh) rotate(300deg); opacity: 0; }
}

/* ================= 占位照片(素材生成中,url = "ph:标签") ================= */
.pimg-ph {
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, var(--surface-2) 0%, var(--bg) 55%, var(--surface-2) 100%);
}
.pimg-ph span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .26em; text-indent: .26em;
  color: var(--text-3);
  border: 1px dashed var(--hairline);
  border-radius: 4px;
  padding: 8px 12px;
}
.cover-ph {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--sky) 0%, transparent 60%),
    linear-gradient(160deg, var(--surface-2) 0%, var(--bg) 100%);
}
.cover-ph span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .3em; text-indent: .3em;
  color: var(--text-3);
  border: 1px dashed var(--hairline);
  border-radius: 4px;
  padding: 10px 16px;
}

/* ================= reduced-motion:区块库动效全关 ================= */
@media (prefers-reduced-motion: reduce) {
  .pwall-item .print { transition: none; transform: none; }
  .pstack .print { transition: none; }
  .fx-grapes svg, .fx-butterfly, .fx-butterfly .wing, .fx-leaf { animation: none; }
  .fx-butterfly, .fx-leaf { display: none; }
}