/* =========================================================
   zb-show-02 横向碎片重组轮播

   原 HTML 结构保持不变：
   .zb-show-02-container > .zb-show-02-item > img

   中间图片以横向不规则碎片散开、重组；左右图片保持原位，
   作为模糊的上一张/下一张预览。舞台最大宽度 1920px。
   ========================================================= */

html,
body {
    overflow-x: hidden;
}

.zb-show-02-container {
    --zb-stage-width: 1920px;
    --zb-main-width: 1300px;
    --zb-stage-height: 700px;
    --zb-side-width: 310px;
    --zb-left-x: -990px;
    --zb-center-x: 310px;
    --zb-right-x: 1610px;
    width: min(var(--zb-stage-width), 100vw);
    max-width: 1920px;
    height: var(--zb-stage-height);
    position: relative;
    left: 0;
    margin: 0;
    display: block;
    overflow: hidden;
    isolation: isolate;
    transform: translateX(var(--zb-page-shift, 0px));
    background: #090d12;
    color: #fff;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    outline: none;
}

.zb-show-02-container *,
.zb-show-02-container *::before,
.zb-show-02-container *::after {
    box-sizing: border-box;
}

/* JS 执行前只显示第一张，防止源图片纵向排开。 */
.zb-show-02-container:not([data-zb-fragment-ready="1"]) > .zb-show-02-item {
    width: min(1300px, 67.708vw);
    aspect-ratio: 13 / 7;
    margin: 0 auto;
    display: none;
}

.zb-show-02-container:not([data-zb-fragment-ready="1"]) > .zb-show-02-item:first-child {
    display: block;
}

.zb-show-02-container:not([data-zb-fragment-ready="1"]) > .zb-show-02-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.zb-show-02-fragment-sources {
    display: none !important;
}

.zb-show-02-fragment-stage {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(55, 93, 125, .20), transparent 45%),
        #090d12;
}

/* ------------------------- 三个固定画面 ------------------------- */
.zb-show-02-fragment-layer {
    width: var(--zb-main-width);
    height: var(--zb-stage-height);
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background: #070a0e;
    backface-visibility: hidden;
    will-change: opacity, filter;
}

.zb-show-02-fragment-layer > img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: block;
    object-fit: cover;
    border: 0;
    -webkit-user-drag: none;
    user-select: none;
}

.zb-show-02-fragment-layer.is-zb-left {
    z-index: 2;
    transform: translate3d(var(--zb-left-x), 0, 0);
    filter: blur(11px) grayscale(.72) brightness(.48) saturate(.52);
}

.zb-show-02-fragment-layer.is-zb-center {
    z-index: 6;
    transform: translate3d(var(--zb-center-x), 0, 0);
    box-shadow: 0 0 44px rgba(0, 0, 0, .52);
}

.zb-show-02-fragment-layer.is-zb-right {
    z-index: 2;
    transform: translate3d(var(--zb-right-x), 0, 0);
    filter: blur(11px) grayscale(.72) brightness(.48) saturate(.52);
}

.zb-show-02-fragment-side-shade {
    width: var(--zb-side-width);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
}

.zb-show-02-fragment-side-shade.is-left {
    left: 0;
    background: linear-gradient(90deg, rgba(4, 7, 11, .70), rgba(4, 7, 11, .10));
}

.zb-show-02-fragment-side-shade.is-right {
    right: 0;
    background: linear-gradient(270deg, rgba(4, 7, 11, .70), rgba(4, 7, 11, .10));
}

/* ------------------------- 横向碎片 ------------------------- */
.zb-show-02-fragment-overlay {
    width: var(--zb-main-width);
    height: var(--zb-stage-height);
    position: absolute;
    left: var(--zb-center-x);
    top: 0;
    z-index: 30;
    overflow: visible;
    pointer-events: none;
    perspective: 1100px;
    transform-style: preserve-3d;
}

.zb-show-02-fragment-group {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.zb-show-02-fragment-group.is-outgoing {
    z-index: 1;
}

.zb-show-02-fragment-group.is-incoming {
    z-index: 2;
}

.zb-show-02-fragment-piece {
    position: absolute;
    left: -2px;
    width: calc(100% + 4px);
    overflow: hidden;
    opacity: 1;
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    clip-path: polygon(
        0 7%, 14% 1%, 31% 6%, 49% 0, 67% 5%, 84% 1%, 100% 8%,
        100% 92%, 85% 99%, 68% 94%, 50% 100%, 32% 95%, 15% 99%, 0 92%
    );
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .46));
}

.zb-show-02-fragment-piece:nth-child(3n + 2) {
    clip-path: polygon(
        0 2%, 16% 8%, 34% 1%, 51% 7%, 70% 0, 86% 6%, 100% 1%,
        100% 98%, 84% 92%, 67% 100%, 49% 93%, 30% 99%, 14% 94%, 0 99%
    );
}

.zb-show-02-fragment-piece:nth-child(3n) {
    clip-path: polygon(
        0 8%, 17% 0, 35% 5%, 53% 1%, 69% 7%, 87% 0, 100% 5%,
        100% 94%, 86% 100%, 70% 93%, 52% 99%, 34% 92%, 16% 100%, 0 95%
    );
}

.zb-show-02-fragment-piece > img {
    width: var(--zb-main-width);
    height: var(--zb-stage-height);
    max-width: none;
    position: absolute;
    left: 2px;
    top: calc(-1 * var(--zb-fragment-y));
    display: block;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

.zb-show-02-container.is-zb-fragment-switching .is-zb-center {
    box-shadow: 0 0 66px rgba(49, 161, 255, .24), 0 0 44px rgba(0, 0, 0, .58);
}

.zb-show-02-fragment-flash {
    position: absolute;
    inset: 0;
    z-index: 29;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(129, 220, 255, .17), transparent);
    mix-blend-mode: screen;
}

/* ------------------------- 左右清晰缩略按钮 ------------------------- */
.zb-show-02-fragment-thumb {
    width: min(184px, calc(var(--zb-side-width) - 52px));
    aspect-ratio: 13 / 7;
    position: absolute;
    top: 50%;
    z-index: 40;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .94);
    border-radius: 3px;
    outline: 0;
    background: #fff;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .52);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: border-color .24s ease, box-shadow .24s ease, margin-top .24s ease;
}

.zb-show-02-fragment-thumb-prev {
    left: calc(var(--zb-side-width) / 2);
}

.zb-show-02-fragment-thumb-next {
    left: calc(100% - var(--zb-side-width) / 2);
}

.zb-show-02-fragment-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .30s ease, opacity .22s ease;
    -webkit-user-drag: none;
    user-select: none;
}

.zb-show-02-fragment-thumb::after {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    margin-top: -17px;
    border-radius: 50%;
    color: #fff;
    background: rgba(238, 126, 17, .96);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .34);
    font: bold 24px/1 Arial, sans-serif;
}

.zb-show-02-fragment-thumb-prev::after {
    content: "‹";
    left: 10px;
}

.zb-show-02-fragment-thumb-next::after {
    content: "›";
    right: 10px;
}

.zb-show-02-fragment-thumb:hover {
    margin-top: -4px;
    border-color: #ff9b27;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .58), 0 0 0 2px rgba(255, 147, 31, .18);
}

.zb-show-02-fragment-thumb:hover img {
    transform: scale(1.07);
}

.zb-show-02-fragment-thumb:active {
    margin-top: 0;
}

.zb-show-02-fragment-thumb:disabled {
    display: none;
}

.zb-show-02-container.is-zb-fragment-switching .zb-show-02-fragment-thumb {
    pointer-events: none;
}

.zb-show-02-container.is-zb-side-refresh .is-zb-left,
.zb-show-02-container.is-zb-side-refresh .is-zb-right,
.zb-show-02-container.is-zb-side-refresh .zb-show-02-fragment-thumb img {
    animation: zb-show-02-side-refresh .38s ease both;
}

@keyframes zb-show-02-side-refresh {
    0% { opacity: .20; }
    100% { opacity: 1; }
}

.zb-show-02-container[data-zb-count="1"] .is-zb-left,
.zb-show-02-container[data-zb-count="1"] .is-zb-right,
.zb-show-02-container[data-zb-count="1"] .zb-show-02-fragment-side-shade,
.zb-show-02-container[data-zb-count="1"] .zb-show-02-fragment-thumb {
    display: none;
}

@media (max-width: 760px) {
    .zb-show-02-fragment-thumb {
        width: max(54px, calc(var(--zb-side-width) - 16px));
        border-width: 2px;
    }

    .zb-show-02-fragment-thumb::after {
        width: 26px;
        height: 26px;
        margin-top: -13px;
        font-size: 19px;
    }

    .zb-show-02-fragment-thumb-prev::after { left: 4px; }
    .zb-show-02-fragment-thumb-next::after { right: 4px; }
}

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