/* =========================================================
   zb-show-02 横向3D Coverflow
   中间1张大图，左右后方各1张缩小模糊图
   ========================================================= */
.zb-show-02-wrap {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    /* 按钮区预留，上下各 0，左右给按钮留位 */
    padding: 0 64px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

/* ── 左右切换按钮 ── */
.zb-show-02-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 28, 72, .62);
    box-shadow:
        0 0 0 1.5px rgba(92, 200, 255, .38),
        0 6px 22px rgba(0, 0, 0, .38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        background .22s ease,
        box-shadow .22s ease,
        transform .18s ease;
}

.zb-show-02-btn:hover {
    background: rgba(20, 48, 120, .82);
    box-shadow:
        0 0 0 1.5px rgba(92, 200, 255, .70),
        0 0 18px rgba(72, 190, 255, .40),
        0 8px 26px rgba(0, 0, 0, .44);
    transform: translateY(-50%) scale(1.08);
}

.zb-show-02-btn:active {
    transform: translateY(-50%) scale(0.96);
}

.zb-show-02-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: rgba(180, 230, 255, .92);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.zb-show-02-btn-prev { left: 0; }
.zb-show-02-btn-next { right: 0; }

/* ── 容器：响应式，宽度撑满 wrap 内部 ── */
.zb-show-02-container {
    width: 100%;
    /* 高度按 16:7 比例自适应 */
    aspect-ratio: 1300 / 700;
    max-height: 700px;
    margin: 0 auto;
    position: relative;
    display: block;
    perspective: 2100px;
    transform-style: preserve-3d;
    overflow: visible;
    isolation: isolate;
    touch-action: pan-y;
    outline: none;
}

.zb-show-02-item {
    position: absolute;
    left: 50%;
    top: 50%;
    /* 宽高跟随容器自适应 */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity, filter;
    transition:
        transform 1.02s cubic-bezier(.18,.82,.2,1),
        opacity   .72s ease,
        filter    .90s ease,
        box-shadow .82s ease;
}

.zb-show-02-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transform: translateZ(0);
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, filter;
    transition: transform .28s ease-out, filter .72s ease;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ── 中间主图 ── */
.zb-show-02-item.is-center {
    z-index: 30;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, -50%, 150px) rotateX(0) rotateY(0) scale(1);
    filter: blur(0) brightness(1) saturate(1);
    box-shadow:
        0 30px 54px rgba(0, 14, 62, .28),
        0 0 28px rgba(41, 164, 255, .10);
}

/* ── 左后方小图 ── */
.zb-show-02-item.is-prev {
    z-index: 16;
    opacity: .68;
    pointer-events: auto;
    transform: translate3d(calc(-50% - 27%), -50%, -240px) rotateY(18deg) scale(.77);
    filter: blur(2.8px) brightness(.62) saturate(.78);
    box-shadow: 0 20px 38px rgba(0, 10, 48, .22);
}

/* ── 右后方小图 ── */
.zb-show-02-item.is-next {
    z-index: 17;
    opacity: .72;
    pointer-events: auto;
    transform: translate3d(calc(-50% + 27%), -50%, -240px) rotateY(-18deg) scale(.77);
    filter: blur(2.6px) brightness(.66) saturate(.82);
    box-shadow: 0 20px 38px rgba(0, 10, 48, .22);
}

/* ── 隐藏在更远处的图片 ── */
.zb-show-02-item.is-hidden-left {
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(calc(-50% - 48%), -50%, -520px) rotateY(28deg) scale(.58);
    filter: blur(7px) brightness(.38);
}

.zb-show-02-item.is-hidden-right {
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(calc(-50% + 48%), -50%, -520px) rotateY(-28deg) scale(.58);
    filter: blur(7px) brightness(.38);
}

/* ── 两侧图 hover：保持与原 transform 完全一致，只放大亮度 ── */
.zb-show-02-item.is-prev:hover {
    opacity: .86;
    transform: translate3d(calc(-50% - 25%), -50%, -205px) rotateY(15deg) scale(.81);
    filter: blur(1.2px) brightness(.80) saturate(.92);
}

.zb-show-02-item.is-next:hover {
    opacity: .90;
    transform: translate3d(calc(-50% + 25%), -50%, -205px) rotateY(-15deg) scale(.81);
    filter: blur(1.2px) brightness(.84) saturate(.92);
}

.zb-show-02-item.is-center:hover img {
    filter: brightness(1.025) contrast(1.025) saturate(1.035);
}

/* ── 切换瞬间主图发光反馈 ── */
.zb-show-02-container.is-coverflow-switching .zb-show-02-item.is-center {
    box-shadow:
        0 34px 60px rgba(0, 14, 62, .30),
        0 0 34px rgba(48, 179, 255, .18);
}

/* ── 拖拽时缩短过渡，响应更即时 ── */
.zb-show-02-container.is-dragging .zb-show-02-item {
    transition-duration: .38s;
}

/* ── 悬停时按钮微微显现（wrap 上加类） ── */
.zb-show-02-wrap:hover .zb-show-02-btn,
.zb-show-02-wrap:focus-within .zb-show-02-btn {
    opacity: 1;
}

/* 只有2张图时隐藏 is-hidden-* 防止看到同一张叠在后面 */
.zb-show-02-container[data-count="2"] .zb-show-02-item.is-hidden-left,
.zb-show-02-container[data-count="2"] .zb-show-02-item.is-hidden-right {
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .zb-show-02-item,
    .zb-show-02-item img {
        transition-duration: .01ms !important;
    }

    .zb-show-02-btn {
        transition: none !important;
    }
}