/* =========================================================
 * zb-show-01：3D 折纸搬运
 * 标准尺寸：1300 × 700
 * 单张图片：425 × 600
 * ========================================================= */

/* 1. 主容器
--------------------------------------------------------- */
.zb-show-01-container {
  width: 1300px;
  height: 700px;
  position: relative;
  margin: 0 auto;
  perspective: 1700px;
  perspective-origin: 50% 48%;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  background: radial-gradient(
    ellipse at 50% 90%,
    rgba(58, 118, 151, 0.17),
    transparent 58%
  );
  /* FIX-6：outline 由 focus-visible 控制，不影响鼠标点击 */
  outline: none;
}

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

/* FIX-6：键盘焦点可见指示（仅键盘，鼠标点击不触发） */
.zb-show-01-container:focus-visible {
  outline: 2px solid rgba(233, 130, 24, 0.7);
  outline-offset: 4px;
}

/* 2. 轮播基础结构
--------------------------------------------------------- */
.zb-show-01-scroll-area,
.zb-show-01-carousel {
  width: 1300px;
  height: 700px;
  position: relative;
  margin: 0;
  overflow: visible;
  transform-style: preserve-3d;
}

.zb-show-01-image-list {
  display: none !important;
}

/* 3. 折纸舞台
--------------------------------------------------------- */
.zb-show-01-origami-stage {
  width: 1300px;
  height: 700px;
  position: absolute;
  inset: 0;
  overflow: visible;
  transform-style: preserve-3d;
}

.zb-show-01-origami-stage::before {
  content: "";
  position: absolute;
  left: 45px;
  right: 45px;
  bottom: 22px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(0, 0, 0, 0.52),
    transparent 68%
  );
  filter: blur(8px);
}

/* 4. 图片面板
--------------------------------------------------------- */
.zb-origami-panel {
  width: 425px;
  height: 600px;
  position: absolute;
  top: 50px;
  left: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, filter;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.43);
  /* hover 过渡：仅作用于 box-shadow 和 outline；
     transform/filter 由 JS Web Animations 独立控制，不在此 transition */
  transition: box-shadow 0.32s ease;
  cursor: pointer;
}

/* hover：面板阴影加深，无边框 */
.zb-origami-panel:hover {
  box-shadow: 0 36px 72px rgba(0, 0, 0, 0.62);
}

.zb-origami-panel img {
  width: 425px;
  height: 600px;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  /* hover：图片轻微放大 + 提亮 */
  transition:
    transform 0.38s cubic-bezier(0.22, 0.72, 0.20, 1),
    filter 0.38s ease;
}

.zb-origami-panel:hover img {
  transform: scale(0.94);
  filter: brightness(1.10) saturate(1.08);
}

.zb-origami-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 30px rgba(0, 10, 30, 0.18);
  transition: box-shadow 0.32s ease;
}

.zb-origami-panel:hover::before {
  box-shadow: inset 0 0 40px rgba(63, 180, 255, 0.12);
}

.zb-origami-panel::after {
  content: "";
  width: 7px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(173, 231, 255, 0.55)
  );
  box-shadow: 0 0 10px rgba(63, 204, 255, 0.24);
  transition: opacity 0.32s ease;
}

.zb-origami-panel:hover::after {
  opacity: 1.0;
  box-shadow: 0 0 18px rgba(63, 204, 255, 0.52);
}

/* 动画进行中禁用 hover，避免和折叠动画打架 */
.zb-show-01-container.is-zb-origami-busy .zb-origami-panel {
  cursor: default;
  pointer-events: none;
}

.zb-show-01-container.is-zb-origami-busy .zb-origami-panel:hover img {
  transform: scale(1);
  filter: none;
}

/* 5. 折叠收纳条
--------------------------------------------------------- */
.zb-origami-pack {
  width: 30px;
  height: 600px;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  background: repeating-linear-gradient(
    90deg,
    #122131 0 4px,
    #d7edfa 4px 6px,
    #263e52 6px 10px
  );
  border: 1px solid rgba(198, 239, 255, 0.72);
  box-shadow:
    10px 20px 32px rgba(0, 0, 0, 0.45),
    inset -6px 0 8px rgba(0, 0, 0, 0.32);
  will-change: transform, opacity;
}

.zb-origami-pack::before,
.zb-origami-pack::after {
  content: "";
  height: 3px;
  position: absolute;
  left: -3px;
  right: -3px;
  background: #8fdfff;
  box-shadow: 0 0 8px rgba(74, 220, 255, 0.7);
}

.zb-origami-pack::before {
  top: 24px;
}

.zb-origami-pack::after {
  bottom: 24px;
}

/* 6. 左右切换按钮
--------------------------------------------------------- */
.zb-show-01-move-left,
.zb-show-01-move-right {
  width: 52px;
  height: 88px;
  position: absolute;
  top: 42%;
  z-index: 40;
  display: grid !important;
  place-items: center;
  color: #ffffff;
  border: 1px solid rgba(111, 220, 249, 0.34);
  border-radius: 2px;
  background: rgba(5, 15, 26, 0.82) !important;
  background-image: none !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.38);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    opacity 0.22s ease;
}

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

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

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

.zb-show-01-move-left:hover,
.zb-show-01-move-right:hover {
  background: #e98218 !important;
  transform: translateY(-50%) scale(1.08);
}

/* 7. 图片计数器
--------------------------------------------------------- */
.zb-show-01-origami-counter {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 35;
  padding: 7px 18px;
  color: #c7f5ff;
  border: 1px solid rgba(112, 219, 246, 0.2);
  background: rgba(4, 13, 23, 0.72);
  font: 800 12px/1 Arial, sans-serif;
  letter-spacing: 3px;
  transform: translateX(-50%);
}

/* 8. 动画执行期间禁用按钮
--------------------------------------------------------- */
.zb-show-01-container.is-zb-origami-busy .zb-show-01-move-left,
.zb-show-01-container.is-zb-origami-busy .zb-show-01-move-right {
  opacity: 0.55;
  pointer-events: none;
}

.zb-show-01-clear {
  display: none !important;
}

/* 9. 减少动画偏好
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .zb-origami-panel,
  .zb-origami-pack {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}