/* PicMul Cloud 版式引擎样式 */
#stage { position: relative; }

/* ---------- 公共 item ---------- */
.pc-item { margin: 0; position: relative; cursor: zoom-in; overflow: hidden; background: var(--card); border-radius: var(--pc-radius, 12px); }
.pc-item img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .35s ease, filter .35s ease; }
.pc-item:hover img { transform: scale(1.04); filter: brightness(1.06); }
.pc-item::after {
  content: "🔍"; position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px;
  border-radius: 8px; background: rgba(15,18,32,.55); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: .2s;
}
.pc-item:hover::after { opacity: 1; }

/* ---------- 入场动画 ---------- */
.pc-item.anim-fade { animation: pcFade .6s ease both; animation-delay: calc(var(--pc-i, 0) * 45ms); }
.pc-item.anim-rise { animation: pcRise .65s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--pc-i, 0) * 45ms); }
.pc-item.anim-zoom { animation: pcZoom .55s ease both; animation-delay: calc(var(--pc-i, 0) * 40ms); }
@keyframes pcFade { from { opacity: 0; } }
@keyframes pcRise { from { opacity: 0; transform: translateY(26px); } }
@keyframes pcZoom { from { opacity: 0; transform: scale(.86); } }

/* ---------- 流式 feed ---------- */
.layout-feed { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--pc-gap, 16px); }
.layout-feed .pc-item { border-radius: var(--pc-radius, 14px); }
.layout-feed .pc-item img { width: 100%; height: auto; transform: scale(var(--pc-scale, 1)); }

/* ---------- 瀑布式 waterfall ---------- */
.layout-waterfall { columns: var(--pc-columns, 3); column-gap: var(--pc-gap, 16px); }
.layout-waterfall .pc-item { break-inside: avoid; margin-bottom: var(--pc-gap, 16px); border-radius: var(--pc-radius, 12px); }
.layout-waterfall .pc-item img { width: 100%; height: auto; transform: scale(var(--pc-scale, 1)); }

/* ---------- 照片墙 photowall ---------- */
.layout-photowall { display: grid; grid-template-columns: repeat(var(--pc-columns, 3), 1fr); gap: var(--pc-gap, 16px); }
.layout-photowall .pc-item { aspect-ratio: 1; border-radius: var(--pc-radius, 12px); }
.layout-photowall .pc-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 浮动 floating ---------- */
.layout-floating { position: relative; min-height: 420px; }
.layout-floating .float-item { position: absolute; left: 0; top: 0; border-radius: var(--pc-radius, 12px); box-shadow: var(--shadow); opacity: 0; }
.layout-floating.layout-ready .float-item { opacity: 1; animation: floatIn .7s ease both; animation-delay: calc(var(--pc-i, 0) * 40ms); }
@keyframes floatIn { from { opacity: 0; transform: translateY(18px) scale(.92) rotate(0); } }
.layout-floating .float-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 星丛 constellation ---------- */
.layout-constellation { position: relative; background: radial-gradient(900px 500px at 50% 0%, rgba(70, 80, 160, .14), transparent 70%), transparent; min-height: 420px; }
.layout-constellation .constellation-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.layout-constellation .star-item { position: absolute; left: 0; top: 0; border-radius: var(--pc-radius, 10px); box-shadow: 0 4px 24px rgba(0,0,0,.5); opacity: 0; }
.layout-constellation.layout-ready .star-item { opacity: 1; animation: starPulse 3.2s ease-in-out infinite; animation-delay: var(--star-delay, 0s); }
@keyframes starPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 24px rgba(0,0,0,.5); }
  50% { transform: scale(1.07); box-shadow: 0 0 26px rgba(120,140,255,.35); }
}
.layout-constellation .star-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .layout-waterfall, .layout-photowall { --pc-columns: 2; }
}
@media (max-width: 560px) {
  .layout-waterfall, .layout-photowall { --pc-columns: 2; }
  .layout-feed { max-width: 100%; }
}