/* ========================================================================
   zb-show-01 方案四：立体折叠屏
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. 主容器
   ------------------------------------------------------------------------ */
.zb-show-01-container {
  --zb-stage-width: 1300px;
  --zb-stage-height: 700px;
  --zb-card-width: 425px;
  --zb-card-height: 600px;

  position: relative;
  width: var(--zb-stage-width);
  height: var(--zb-stage-height);
  margin: 0 auto;
  perspective: 1800px;
  perspective-origin: 50% 48%;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.zb-show-01-container * {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------------
   2. 轮播基础结构
   ------------------------------------------------------------------------ */
.zb-show-01-scroll-area,
.zb-show-01-carousel,
.zb-show-01-image-list {
  position: relative;
  width: var(--zb-stage-width);
  height: var(--zb-stage-height);
  margin: 0;
  overflow: visible;
  transform-style: preserve-3d;
}

.zb-show-01-image-list {
  left: auto !important;
  transition: none !important;
}

/* ------------------------------------------------------------------------
   3. 图片卡片
   ------------------------------------------------------------------------ */
.zb-show-01-image-item {
  position: absolute !important;
  top: 0;
  left: 0;
  width: var(--zb-card-width) !important;
  height: var(--zb-card-height) !important;
  margin: 0 !important;
  float: none !important;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform 0.92s cubic-bezier(0.30, 0.02, 0.17, 1),
    opacity 0.55s ease,
    filter 0.72s ease;
  will-change: transform, opacity, filter;
}

.zb-show-01-image-item img {
  display: block;
  width: var(--zb-card-width) !important;
  height: var(--zb-card-height) !important;
  object-fit: cover;
  border: 0;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42);
  user-select: none;
  -webkit-user-drag: none;
}

.zb-show-01-image-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 4px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 145, 145, 0.68) 18%,
    rgba(255, 91, 91, 0.28) 78%,
    transparent
  );
  box-shadow: 0 0 11px rgba(255, 59, 59, 0.28);
}

/* ------------------------------------------------------------------------
   4. 折叠状态
   ------------------------------------------------------------------------ */
.zb-fold-hidden {
  opacity: 0;
  filter: blur(3px) brightness(0.4);
  transform: translate3d(438px, 50px, -380px) rotateY(82deg) scale(0.78);
}

.zb-fold-far-left {
  z-index: 1;
  opacity: 0;
  filter: brightness(0.45);
  transform: translate3d(-320px, 75px, -170px) rotateY(82deg) scale(0.86);
  transform-origin: 100% 50%;
}

.zb-fold-left {
  z-index: 4;
  opacity: 0.86;
  filter: brightness(0.7);
  pointer-events: auto;
  transform: translate3d(18px, 70px, -55px) rotateY(24deg) scale(0.91);
  transform-origin: 100% 50%;
}

.zb-fold-left::before {
  right: 0;
}

.zb-fold-center {
  z-index: 8;
  opacity: 1;
  filter: brightness(1);
  pointer-events: auto;
  transform: translate3d(438px, 50px, 45px) rotateY(0deg) scale(1);
  transform-origin: 50% 50%;
}

.zb-fold-center::before {
  right: -2px;
}

.zb-fold-right {
  z-index: 4;
  opacity: 0.86;
  filter: brightness(0.7);
  pointer-events: auto;
  transform: translate3d(857px, 70px, -55px) rotateY(-24deg) scale(0.91);
  transform-origin: 0 50%;
}

.zb-fold-right::before {
  left: 0;
}

.zb-fold-far-right {
  z-index: 1;
  opacity: 0;
  filter: brightness(0.45);
  transform: translate3d(1195px, 75px, -170px) rotateY(-82deg) scale(0.86);
  transform-origin: 0 50%;
}

.zb-show-01-container.is-zb-folding .zb-show-01-image-item {
  filter: saturate(0.84);
}

/* ------------------------------------------------------------------------
   5. 左右切换按钮
   ------------------------------------------------------------------------ */
.zb-show-01-move-left,
.zb-show-01-move-right {
  position: absolute;
  top: 45%;
  z-index: 30;
  display: grid !important;
  place-items: center;
  width: 50px;
  height: 100px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  color: #fff;
  background: rgba(16, 4, 4, 0.74) !important;
  background-image: none !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    transform 0.22s ease,
    background 0.22s ease;
}

.zb-show-01-move-left {
  left: -10px;
}

.zb-show-01-move-right {
  right: -13px;
}

.zb-show-01-move-left span,
.zb-show-01-move-right span {
  font: 38px/1 Arial, sans-serif;
}

.zb-show-01-move-left:hover,
.zb-show-01-move-right:hover {
  background: rgba(170, 69, 69, 0.9) !important;
  transform: translateY(-50%) scale(1.06);
}

/* ------------------------------------------------------------------------
   6. 分页圆点
   ------------------------------------------------------------------------ */
.zb-show-01-fold-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  z-index: 25;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.zb-show-01-fold-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid #ffb8b8;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transform: rotate(45deg);
  transition:
    transform 0.22s ease,
    background 0.22s ease;
}

.zb-show-01-fold-dots button.active {
  background: #ff7070;
  box-shadow: 0 0 8px #ff5656;
  transform: rotate(45deg) scale(1.45);
}

/* ------------------------------------------------------------------------
   7. 辅助元素
   ------------------------------------------------------------------------ */
.zb-show-01-clear {
  display: none !important;
}