/*
 * zb-show-01 装备环绕展示
 * HTML / DIV 结构不需要修改：第一项为中间大图，其余项自动成为环绕小图。
 * 轨道位置、缩略图尺寸、自动旋转和 3D 跟随由 zb-show-01.js 计算。
 */
.zb-show-01-container {
    --zb-center-width: 520px;
    --zb-center-height: 580px;
    --zb-thumb-size: 160px;

    width: min(1360px, 100%);
    height: 1080px;
    margin: 0 auto;
    position: relative;
    display: block;
    overflow: visible;
    isolation: isolate;
    perspective: 1600px;
    transform-style: preserve-3d;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.zb-show-01-item {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform, opacity;
    outline: none;
}

.zb-show-01-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    transform: translateZ(0);
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform, filter, opacity;
    transition:
        transform .18s ease-out,
        filter .28s ease,
        opacity .22s ease;
    -webkit-user-drag: none;
}

/* JS 尚未完成初始化时，让第一张先稳定显示在中间，避免页面闪动。 */
.zb-show-01-container:not(.zb-orbit-ready) .zb-show-01-item:first-child {
    width: var(--zb-center-width);
    height: var(--zb-center-height);
    z-index: 20;
    transform: translate3d(-50%, -50%, 0);
}

.zb-show-01-container:not(.zb-orbit-ready) .zb-show-01-item:not(:first-child) {
    opacity: 0;
}

/* 中间大图：桌面端默认 520 × 580，JS 会在窄屏上等比缩小。 */
.zb-show-01-item.zb-orbit-center {
    width: var(--zb-center-width);
    height: var(--zb-center-height);
    z-index: 50;
    transform: translate3d(-50%, -50%, 80px);
}

.zb-show-01-item.zb-orbit-center img {
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .35));
}

/* 环绕小图的位置和景深由 JS 写入 transform。 */
.zb-show-01-item.zb-orbit-thumb {
    width: var(--zb-thumb-size);
    height: var(--zb-thumb-size);
    opacity: 0;
    transition:
        width .40s ease,
        height .40s ease,
        opacity .40s ease,
        filter .28s ease;
}

/* 深度透明度范围：JS 写入 0.42 ~ 1.0 */
.zb-show-01-container.zb-orbit-ready .zb-show-01-item.zb-orbit-thumb {
    opacity: var(--zb-depth-opacity, 1);
}

.zb-show-01-item.zb-orbit-thumb img {
    filter: drop-shadow(0 12px 17px rgba(0, 0, 0, .30));
}

.zb-show-01-item.zb-orbit-thumb:hover img,
.zb-show-01-item.zb-orbit-thumb:focus-visible img,
.zb-show-01-item.zb-orbit-thumb.is-active img {
    filter:
        drop-shadow(0 15px 21px rgba(0, 0, 0, .42))
        brightness(1.12);
}

.zb-show-01-item.zb-orbit-thumb.is-active::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -8px;
    height: 2px;
    border-radius: 50%;
    background: rgba(92, 205, 255, .92);
    box-shadow: 0 0 10px rgba(92, 205, 255, .55);
    pointer-events: none;
}

/* 小图切换到中间时，给大图一个短促的 3D 翻入反馈。 */
.zb-show-01-item.zb-orbit-center.zb-orbit-pop {
    animation: zb-show-01-center-pop .48s cubic-bezier(.2, .75, .25, 1);
}

.zb-show-01-container.is-switching .zb-orbit-center img {
    opacity: .32;
    transform: translateZ(-35px) rotateY(-7deg) scale(.96);
}

@keyframes zb-show-01-center-pop {
    0% {
        transform: translate3d(-50%, -50%, 20px) rotateX(7deg) rotateY(-10deg) scale(.94);
    }
    60% {
        transform: translate3d(-50%, -50%, 105px) rotateX(-2deg) rotateY(3deg) scale(1.025);
    }
    100% {
        transform: translate3d(-50%, -50%, 80px) rotateX(0) rotateY(0) scale(1);
    }
}

/*
 * 自动切换前预告：目标小图轻弹 + 发光。
 * JS 在切换前 400ms 添加此 class，切换后移除。
 */
.zb-show-01-item.zb-orbit-thumb.zb-thumb-preview img {
    animation: zb-show-01-thumb-preview .42s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes zb-show-01-thumb-preview {
    0%   { transform: scale(1); filter: drop-shadow(0 12px 17px rgba(0,0,0,.30)) brightness(1); }
    45%  { transform: scale(1.18) translateZ(12px); filter: drop-shadow(0 0 22px rgba(72,210,255,.80)) brightness(1.30) saturate(1.2); }
    100% { transform: scale(1); filter: drop-shadow(0 12px 17px rgba(0,0,0,.30)) brightness(1); }
}

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

    .zb-show-01-item.zb-orbit-center.zb-orbit-pop {
        animation: none;
    }

    .zb-show-01-item.zb-orbit-thumb.zb-thumb-preview img {
        animation: none;
    }
}