/* =========================================================
   zb-show 动态纵向层叠画廊
   - 当前大图位于最前方
   - 后方层数根据图片数量和容器宽度自动计算
   - air-01.png：上一张/向上
   - air-02.png：下一张/向下
   ========================================================= */

/*
 * 横向溢出双保险：旧浏览器保留hidden，新浏览器使用clip。
 * 只限制页面视口，不裁切画廊内部的3D层级。
 */
html.zb-stack-lock-x,
body.zb-stack-lock-x {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

.zb-show-02-container,
.zb-show-01-container {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
}

[data-zb-stack-gallery="1"] {
    --zb-stack-main-height: 700px;
    --zb-stack-rise: 170px;
    --zb-stack-stage-height: 870px;
    --zb-stack-button-size: 96px;
    --zb-stack-button-outside: -120px;
    position: relative !important;
    display: block !important;
    width: 1300px !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    perspective: none !important;
    transform: none !important;
    box-sizing: border-box;
    isolation: isolate;
}

[data-zb-stack-gallery="1"] *,
[data-zb-stack-gallery="1"] *::before,
[data-zb-stack-gallery="1"] *::after {
    box-sizing: border-box;
}

/* ------------------------ 整体舞台 ------------------------ */
[data-zb-stack-gallery="1"] .zb-stack-stage {
    width: 100%;
    height: var(--zb-stack-stage-height);
    position: relative;
    overflow: visible;
    perspective: 2100px;
    transform-style: preserve-3d;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

/* ------------------------ 图片卡片 ------------------------ */
[data-zb-stack-gallery="1"] .zb-stack-card {
    width: 100% !important;
    height: var(--zb-stack-main-height) !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    contain: none !important;
    cursor: pointer;
    transform-origin: center bottom;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity, filter;
    transition:
        transform 1.02s cubic-bezier(.18,.82,.2,1),
        opacity .74s ease,
        filter .88s ease !important;
}

/* GSAP接管卡片变换时，关闭外层CSS transition，避免双重插值 */
[data-zb-stack-gallery="1"].zb-stack-uses-gsap .zb-stack-card {
    transition: none !important;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-current {
    pointer-events: auto;
    cursor: grab;
    overflow: visible !important;
    clip-path: none !important;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-current:active {
    cursor: grabbing;
}

/* 当前图允许3D倾斜越出原始边界，不再被卡片裁切 */
[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-current > img {
    overflow: visible !important;
    clip-path: none !important;
    transform-style: preserve-3d !important;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-behind {
    pointer-events: auto;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-behind:hover {
    filter: brightness(1.08) saturate(1.04) !important;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-hidden {
    pointer-events: none !important;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-exit-next {
    z-index: 300 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform:
        translate3d(-50%, 26px, -90px)
        rotateX(-2deg)
        scale(.985) !important;
    filter: blur(2px) brightness(.78) !important;
    transition:
        transform .72s cubic-bezier(.42,.02,.28,1),
        opacity .56s ease,
        filter .62s ease !important;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-exit-prev {
    z-index: 300 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform:
        translate3d(-50%, -22px, -72px)
        rotateX(2deg)
        scale(.985) !important;
    filter: blur(2px) brightness(.80) !important;
    transition:
        transform .68s cubic-bezier(.42,.02,.28,1),
        opacity .54s ease,
        filter .60s ease !important;
}

[data-zb-stack-gallery="1"] .zb-stack-card.zb-stack-no-transition {
    transition: none !important;
}

/* -------------------------- 图片 -------------------------- */
[data-zb-stack-gallery="1"] .zb-stack-card > img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain;
    position: relative;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    z-index: 2;
    transform: perspective(1700px) translateZ(0) rotateX(0) rotateY(0) scale(1);
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    filter: none !important;
    box-shadow: none !important;
    transition: transform .34s ease-out !important;
    will-change: transform;
    -webkit-user-drag: none;
}

/* 后方图片顶部暗化，使层次更清楚 */
[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-behind::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 13, 35, .12),
        rgba(0, 10, 30, .30)
    );
}

/* 当前主图切换时扫光 */
[data-zb-stack-gallery="1"] .zb-stack-card.is-stack-current::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-120%);
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, .14) 48%,
        transparent 66%
    );
}

[data-zb-stack-gallery="1"].is-stack-switching
.zb-stack-card.is-stack-current::before {
    animation: zb-stack-light-sweep .92s ease-out;
}

/* ------------------------ 加载进度 ------------------------ */
[data-zb-stack-gallery="1"] .zb-stack-loader {
    --zb-stack-load: 0;
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #d8f7ff;
    font: 600 12px/1 Arial, sans-serif;
    background: rgba(4, 20, 52, .90);
    transition: opacity .42s ease, visibility .42s ease;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-loaded .zb-stack-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

[data-zb-stack-gallery="1"] .zb-stack-load-ring {
    width: 44px;
    height: 44px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(
        #63d9ff calc(var(--zb-stack-load) * 1%),
        rgba(104, 220, 255, .15) 0
    );
}

[data-zb-stack-gallery="1"] .zb-stack-load-ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #071b3f;
}

[data-zb-stack-gallery="1"] .zb-stack-load-number {
    position: relative;
    z-index: 2;
    font-size: 10px;
}

[data-zb-stack-gallery="1"] .zb-stack-card.is-load-error .zb-stack-loader {
    color: #ffd7d7;
    background: rgba(52, 7, 19, .92);
    cursor: pointer;
}

/* ------------------------ 上下按钮 ------------------------ */
[data-zb-stack-gallery="1"] .zb-stack-button {
    width: var(--zb-stack-button-size);
    height: var(--zb-stack-button-size);
    position: absolute;
    z-index: 500;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /*
     * overflow:visible 必须在这里声明。
     * JS 注入的 style 也有此声明，但 border-radius+overflow:hidden
     * 默认会裁切 ::before 脉冲圆圈，提前在 CSS 层保证安全。
     */
    overflow: visible;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform .25s ease, opacity .25s ease;
}

[data-zb-stack-gallery="1"] .zb-stack-button-prev {
    left: var(--zb-stack-button-outside);
}

[data-zb-stack-gallery="1"] .zb-stack-button-next {
    right: var(--zb-stack-button-outside);
}

[data-zb-stack-gallery="1"] .zb-stack-button > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(.94) saturate(.96);
    transform: scale(1);
    transition: filter .25s ease, transform .25s ease;
    -webkit-user-drag: none;
}

[data-zb-stack-gallery="1"] .zb-stack-button:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.08);
}

[data-zb-stack-gallery="1"] .zb-stack-button:hover:not(:disabled) > img {
    filter: brightness(1.62) saturate(1.25);
    transform: scale(1.04);
}

[data-zb-stack-gallery="1"] .zb-stack-button:active:not(:disabled) {
    transform: translateY(-50%) scale(.96);
}

[data-zb-stack-gallery="1"] .zb-stack-button:disabled {
    opacity: .26;
    cursor: default;
}

/* -------------------------- 动画 -------------------------- */
@keyframes zb-stack-light-sweep {
    0% { opacity: 0; transform: translateX(-120%); }
    30% { opacity: .75; }
    100% { opacity: 0; transform: translateX(120%); }
}

/* ------------------------- 响应式 ------------------------- */
@media (max-width: 900px) {
    [data-zb-stack-gallery="1"] {
        --zb-stack-button-size: 66px;
        --zb-stack-button-outside: -78px;
    }

    [data-zb-stack-gallery="1"] .zb-stack-button-prev {
        left: var(--zb-stack-button-outside);
    }

    [data-zb-stack-gallery="1"] .zb-stack-button-next {
        right: var(--zb-stack-button-outside);
    }

    [data-zb-stack-gallery="1"] .zb-stack-loader {
        font-size: 10px;
    }

    [data-zb-stack-gallery="1"] .zb-stack-load-ring {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-zb-stack-gallery="1"] .zb-stack-card,
    [data-zb-stack-gallery="1"] .zb-stack-card > img,
    [data-zb-stack-gallery="1"] .zb-stack-button {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}