/* =========================================================================
   首页展示组件：弧形画廊 + Photo Stack
   参数全部来自 /api/site（后台管理页里改），这里只管怎么画。
   这一节自带深色底，不跟随 classic / one 皮肤 —— 它是一块独立的展示带。
   ========================================================================= */

.a377-showcase{
  --bg:#000;
  position:relative;
  background:var(--bg);
  padding:56px 0;
  margin:0;
}
.a377-showcase[hidden]{display:none}

/* 出血带（只有画廊用）
   画廊是一圈 3D 卡片，两侧的卡本来就会飞出容器，所以必须裁掉；
   再叠一层左右渐隐，让滚动带淡出而不是被硬切。
   —— Photo Stack 不能套这个类：它的背片要探出正片外侧，
     被裁掉就等于没有背片（这个坑踩过，截图里背片直接消失了）。 */
.a377-showcase-bleed{overflow:hidden}
.a377-showcase-bleed::before,
.a377-showcase-bleed::after{
  content:"";position:absolute;top:0;bottom:0;width:min(20vw,260px);
  pointer-events:none;z-index:3;
}
.a377-showcase-bleed::before{left:0;background:linear-gradient(90deg,var(--bg) 8%,transparent)}
.a377-showcase-bleed::after{right:0;background:linear-gradient(270deg,var(--bg) 8%,transparent)}

/* ---------------- slot ----------------
   首页两套皮肤视图各有一个空 slot，只有当前皮肤那个会被填内容。
   两套视图的容器内边距不一样，这里分别抵消掉，让展示带贴到容器边缘。 */
[data-showcase]{display:block;grid-column:1 / -1}
[data-showcase][hidden]{display:none!important}
html[data-skin="one"] [data-showcase]{margin:0}
html[data-skin="classic"] [data-showcase]{margin:0 -22px}

.a377-showcase-label{
  position:absolute;left:28px;top:22px;z-index:4;
  font:11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);pointer-events:none;
}

/* ---------------- 3D 弧形画廊 ---------------- */
.a377-gal-viewport{
  position:relative;
  height:var(--view-h,430px);
  perspective:var(--persp,2800px);
  perspective-origin:50% 50%;
  touch-action:pan-y;
  cursor:grab;
}
.a377-gal-viewport.is-drag{cursor:grabbing}

.a377-gal-ring{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  will-change:transform;
}

.a377-gal-card{
  position:absolute;left:0;top:0;
  width:var(--card-w,460px);
  margin-left:calc(var(--card-w,460px) / -2);
  margin-top:calc(var(--card-h,306px) / -2);
  transform-style:preserve-3d;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
/* 图片和视频走同一套外观 —— 卡片里放哪种都不该看出来区别 */
.a377-gal-card img,
.a377-gal-card video{
  display:block;width:100%;height:var(--card-h,306px);object-fit:cover;
  border-radius:12px;background:#141414;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  -webkit-user-drag:none;user-select:none;
}
/* 视频是静音自动播的装饰性内容，别让它抢焦点或出现原生控件 */
.a377-gal-card video{pointer-events:none;outline:none}
.a377-gal-card figcaption{
  margin-top:10px;text-align:center;
  font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.a377-gal-card figcaption:empty{display:none}

/* 没后端 / 没图时的占位 */
.a377-showcase-empty{
  padding:56px 24px;text-align:center;
  font:13px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  color:rgba(255,255,255,.45);
}

/* ---------------- Photo Stack ----------------
   照 DialKit 的 example/src/PhotoStack.tsx 对齐。几个关键点都在注释里，
   免得以后又照自己的口味改回「圆角卡片 + 纯色压暗 + box-shadow」。 */
.a377-ps{padding:8px 24px 24px}

/* 标题在上、照片在下，左对齐 —— 原版是 flex column + align-items:flex-start。
   （之前是「标题在左 + 照片在右」两列，那是我们自己改的，跟原版不一样。） */
.a377-ps-inner{
  max-width:820px;margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;
}
.a377-ps-meta h3{
  margin:0 0 8px;
  font:600 clamp(30px,3.6vw,48px)/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  letter-spacing:-.025em;color:#fff;
}
.a377-ps-meta p{
  margin:0;font:400 clamp(14px,1.5vw,17px)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  color:rgba(255,255,255,.48);
}
.a377-ps-meta .a377-ps-hint{
  margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.3);
}

/* 外层只负责占位（宽高由 JS 按缩放系数写），
   内层保留原版的固定 px 几何，靠 transform 整体缩放 ——
   这样弹簧、clip-path、错位量全都不用跟着屏幕宽度改。 */
.a377-ps-fit{position:relative;overflow:visible}
.a377-ps-stage{
  position:absolute;top:0;left:0;
  transform-origin:top left;
  border-radius:4px;
}
.a377-ps-stage:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:6px}

/* 阴影层不裁切：模糊本来就要溢出去。
   照片层在左边缘和下边缘裁掉 —— 出场动画往左滑出去，靠这里把它切干净；
   右侧放行 200px，因为背片偏移（默认 239）会超出容器预留的 180。 */
.a377-ps-shadow-layer{position:absolute;inset:0;pointer-events:none}
.a377-ps-photo-layer{position:absolute;inset:0;clip-path:inset(-100px -200px 0 0)}

/* 两个层里各有一份节点，位移/缩放由 JS 写同样的 transform。
   transform-origin 必须是左下角：缩放时左下角不动，
   背片才会跟正片底边对齐、只往右上缩（原版就是这个原点）。 */
.a377-ps-shadow,
.a377-ps-photo{
  position:absolute;top:0;left:0;
  width:var(--ps-sw,340px);height:var(--ps-sh,480px);
  transform-origin:bottom left;
  will-change:transform;
}

/* 照片本体。圆角 2px —— 原版就是 2，几乎是直角；
   底色用照片自己的 color，图没到之前先顶上（也是阴影被染色的来源）。 */
.a377-ps-card{
  position:absolute;inset:0;border-radius:2px;overflow:hidden;
  background:#1a1a2e;
  transition:transform .18s ease;
}
.a377-ps-card img{
  display:block;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;user-select:none;
}
/* 背片压暗：从左到右由 shadowTint 渐变到透明。
   原版是 linear-gradient，不是「纯色 + 透明度」—— 观感差别很明显。 */
.a377-ps-veil{position:absolute;inset:0;pointer-events:none}

/* 阴影层的内容：整张照片的模糊副本，所以会被照片自己的颜色染色。
   scale / translateY / blur 三个参数来自后台，写在 JS 里。 */
.a377-ps-blur{
  position:absolute;inset:0;border-radius:2px;overflow:hidden;
}
.a377-ps-blur img{display:block;width:100%;height:100%;object-fit:cover}

/* 悬停/按下的微缩放 —— 原版是 whileHover 1.01 / whileTap 0.99。
   加在卡片上而不是节点上，免得跟 JS 写的 transform 打架。 */
.a377-ps-photo.is-top{cursor:pointer}
.a377-ps-photo.is-top:hover .a377-ps-card{transform:scale(1.01)}
.a377-ps-photo.is-top:active .a377-ps-card{transform:scale(0.99)}

@media(max-width:860px){
  /* 照片的尺寸靠 JS 算的缩放系数收，这里只管外边距和标题字号 */
  .a377-ps{padding:8px 16px 20px}
  .a377-ps-meta h3{font-size:34px}
  .a377-showcase{padding:40px 0}
}

@media(prefers-reduced-motion:reduce){
  .a377-gal-viewport{cursor:default}
  .a377-ps-card{transition:none}
}