/* =========================================================
   会员年度海报墙（源自 OPC 工作台演示 · 第 43 页）
   5 张海报横排 · 滚动入场逐张浮现 · 悬停放大 · 点击灯箱
   ========================================================= */

.poster-wall{
  position:relative;overflow:hidden;
  margin:0 0 44px;padding:34px 30px 26px;border-radius:22px;
  border:1px solid rgba(176,125,79,.34);
  background:
    radial-gradient(760px 320px at 80% -12%,rgba(230,193,136,.18),transparent 62%),
    radial-gradient(560px 300px at 4% 110%,rgba(176,125,79,.16),transparent 60%),
    linear-gradient(148deg,#1a140d 0%,#2a1f14 52%,#3b2b1a 100%);
  box-shadow:0 24px 60px rgba(44,38,31,.26);
}

.poster-wall-head{margin:0 0 24px;text-align:center}
.poster-wall-kicker{font-size:12.5px;letter-spacing:.34em;color:#e0c08a}
.poster-wall-title{
  margin:12px 0 0;font-size:clamp(20px,2.6vw,27px);font-weight:700;
  color:#fff8ec;line-height:1.4;
}

.poster-wall-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:start}

/* ---- 单张海报 ---- */
.poster-wall .poster{
  position:relative;display:block;width:100%;margin:0;padding:0;
  border:0;background:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .55s cubic-bezier(.22,.7,.3,1),transform .55s cubic-bezier(.22,.7,.3,1);
}
.poster-wall .poster img{
  display:block;width:100%;height:auto;border-radius:14px;background:#101828;
  border:1px solid rgba(255,216,148,.38);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:transform .22s ease,box-shadow .22s ease;
}
.poster-wall.is-in .poster{opacity:1;transform:none}
.poster-wall.is-in .poster:nth-child(2){transition-delay:.08s}
.poster-wall.is-in .poster:nth-child(3){transition-delay:.16s}
.poster-wall.is-in .poster:nth-child(4){transition-delay:.24s}
.poster-wall.is-in .poster:nth-child(5){transition-delay:.32s}

@media (hover:hover) and (pointer:fine){
  .poster-wall .poster:hover{z-index:6}
  .poster-wall .poster:hover img{
    transform:translateY(-10px) scale(1.07);
    box-shadow:0 28px 64px rgba(0,0,0,.65);
  }
}
.poster-wall .poster:focus-visible{outline:none}
.poster-wall .poster:focus-visible img{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 28px 64px rgba(0,0,0,.65),0 0 0 3px rgba(230,193,136,.85);
}

.poster-wall-note{margin:24px 0 0;text-align:center;font-size:15.5px;color:#e6d6b8}
.poster-wall-note span{display:inline-block}
.poster-wall-note span + span::before{content:"·";margin:0 .7em;color:rgba(230,214,184,.55)}
.poster-wall-note b{color:#f3d79a;font-weight:700}
.poster-wall-hint{
  margin:8px 0 0;text-align:center;font-size:12.5px;letter-spacing:.16em;
  color:rgba(230,214,184,.62);
}

@media (prefers-reduced-motion:reduce){
  .poster-wall .poster{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---- 灯箱 ---- */
.poster-lightbox{
  position:fixed;inset:0;z-index:999;display:none;padding:24px;
  align-items:center;justify-content:center;
  background:rgba(12,10,8,.88);backdrop-filter:blur(6px);
}
.poster-lightbox.is-open{display:flex}
.poster-lightbox .plb-stage{max-width:92vw;max-height:86vh;display:flex;align-items:center;justify-content:center}
.poster-lightbox .plb-stage img{
  display:block;width:auto;height:auto;max-width:92vw;max-height:82vh;
  border-radius:14px;border:1px solid rgba(255,216,148,.4);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.poster-lightbox .plb-hint{
  position:fixed;left:24px;top:26px;font-size:13px;letter-spacing:.16em;color:#cbb98f;
}
.poster-lightbox .plb-bar{position:fixed;top:20px;right:24px;display:flex;gap:10px;align-items:center}
.poster-lightbox .plb-btn{
  font-family:inherit;font-size:14.5px;font-weight:700;line-height:1;
  border-radius:999px;padding:11px 20px;cursor:pointer;text-decoration:none;
  color:#3a2a12;background:#e6c188;border:1px solid #e6c188;
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:.2s;
}
.poster-lightbox .plb-btn:hover{background:#f3d79a;border-color:#f3d79a}
.poster-lightbox .plb-btn.ghosty{
  background:rgba(255,255,255,.14);color:#f5ead2;border-color:rgba(255,216,148,.45);
}
.poster-lightbox .plb-btn.ghosty:hover{background:rgba(255,255,255,.24)}
body.plb-lock{overflow:hidden}

/* ---- 响应式 ---- */
@media (max-width:980px){
  .poster-wall-rail{
    display:flex;gap:12px;padding:4px 2px 14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .poster-wall-rail .poster{flex:0 0 40%;min-width:148px;scroll-snap-align:center}
}
@media (max-width:620px){
  .poster-wall{padding:26px 16px 20px;border-radius:18px}
  .poster-wall-rail .poster{flex:0 0 64%}
  .poster-wall-note{font-size:14px}
  .poster-wall-note span{display:block}
  .poster-wall-note span + span::before{content:none}
  .poster-lightbox .plb-hint{display:none}
  .poster-lightbox .plb-bar{top:14px;right:14px}
  .poster-lightbox .plb-btn{padding:10px 16px;font-size:13.5px}
}

/* 灯箱左右切换（2026-10-21 用户要求） */
.poster-lightbox .plb-nav{
  position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;
  display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.34);
  border-radius:50%;background:rgba(20,16,10,.78);color:#f3d79a;font-size:26px;line-height:1;cursor:pointer;
}
.poster-lightbox .plb-nav:hover{background:rgba(243,215,154,.94);color:#241c10}
.poster-lightbox .plb-nav.is-prev{left:14px}
.poster-lightbox .plb-nav.is-next{right:14px}
.poster-lightbox .plb-nav[hidden]{display:none}
.poster-lightbox .plb-count{color:#f2e3c8;font-size:13px;font-weight:700}
@media (max-width:600px){
  .poster-lightbox .plb-nav{width:40px;height:40px;font-size:22px}
  .poster-lightbox .plb-nav.is-prev{left:6px}
  .poster-lightbox .plb-nav.is-next{right:6px}
}