/* dragon-boat 第五屏：Protopie 5 层视差 + 内嵌素材静态布局 */

/* 第五屏滚动容器底色（.dragon-boat-root 同域 maroon 圆角卡，圆角等继承 .deck-slide） */
.deck-slide[data-slide-id="dragon-boat"].deck-slide--theme-maroon-art {
  background: #742220;
}

.deck-slide[data-slide-id="dragon-boat"] .deck-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.deck-media-layout--dragon-boat-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  isolation: isolate;
}

.dragon-boat-root {
  position: absolute;
  width: 1920px;
  height: 1350px;
  left: 0;
  top: 2px;
  overflow: hidden;
  perspective: 1500px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  pointer-events: auto;
}

/* 顶层文案：固定 XY，不随视差层 3D 位移 */
.db__copy-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  transform: none;
  transform-style: flat;
}

.deck-slide[data-slide-id="dragon-boat"] .db__copy-title {
  position: absolute;
  left: 175px;
  top: 77.63px;
  width: 305px;
  height: 40px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: normal;
  line-height: 40px;
  letter-spacing: 0;
  color: #ecf0f5;
  white-space: nowrap;
  overflow: hidden;
}

.deck-slide[data-slide-id="dragon-boat"] .db__copy-body {
  position: absolute;
  left: 175px;
  top: 126.63px;
  width: 370px;
  height: 24px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: normal;
  line-height: 24px;
  letter-spacing: 2px;
  color: #e1cccc;
  white-space: nowrap;
  overflow: hidden;
}

.parallax-layer-dragon-top-lotus,
.parallax-layer-dragon-mid-human,
.parallax-layer-dragon-mid-tree,
.parallax-layer-dragon-low-cloud,
.parallax-layer-dragon-bg {
  position: absolute;
  width: 1006px;
  height: 1006px;
  left: 457px;
  top: 187px;
  border-radius: 0 !important;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
  isolation: isolate;
}

.parallax-layer-dragon-top-lotus {
  z-index: 5;
  transform: translateZ(8px);
}

.parallax-layer-dragon-mid-human {
  z-index: 4;
  transform: translateZ(4px);
}

.parallax-layer-dragon-mid-tree {
  z-index: 3;
  transform: translateZ(-4px);
}

.parallax-layer-dragon-low-cloud {
  z-index: 2;
  transform: translateZ(-8px);
}

.parallax-layer-dragon-bg {
  z-index: 1;
  transform: translateZ(-12px);
}

/* 镂空颜色遮罩：参与根透视 3D，禁止 flat */
img.db__asset.db__lotus-color-mask {
  transform-style: preserve-3d;
  transform-origin: 0 0;
}

/* 层内堆叠根：preserve-3d 向下穿透 */
.db__layer-stack,
.db__lotus-stage,
.db__title-anim {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: 0 0;
  pointer-events: none;
}

.db__layer-stack {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.db__lotus-stage {
  left: 0;
  top: 0;
  width: 1006px;
  height: 1006px;
  overflow: visible;
}

.db__title-anim {
  left: 620px;
  top: 154.02px;
  width: 116px;
  height: 206.28px;
  overflow: visible;
}

.db__asset {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.db__asset.db__lottie {
  overflow: hidden;
}

img.db__asset {
  object-fit: fill;
  object-position: left top;
}

/*
 * 中层二树 · 云中间：316→699 匀速 35s + 终点等待 2s（周期 37s）
 * 位移 t=0 即起；透明度延时 1s 后 1s 渐显；X680–699 淡出；100%→0% 硬切复位
 */
@keyframes db-tree-cloud-mid-drift {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  2.702703% {
    transform: translateX(10.942857px);
    opacity: 0;
  }
  5.405405% {
    transform: translateX(21.885714px);
    opacity: 1;
  }
  89.904735% {
    transform: translateX(364px);
    opacity: 1;
  }
  94.594595% {
    transform: translateX(383px);
    opacity: 0;
  }
  100% {
    transform: translateX(383px);
    opacity: 0;
  }
}

.deck-slide[data-slide-id="dragon-boat"] img.db__tree-cloud-mid {
  opacity: 0;
  animation: db-tree-cloud-mid-drift 37s linear infinite;
  animation-play-state: paused;
}

/*
 * 下层云 · 云二运动：448→870 匀速 45s + 终点等待 2s（周期 47s）
 * 位移 t=0 即起；透明度延时 1s 后 1s 渐显；X850–870 淡出；100%→0% 硬切复位
 */
@keyframes db-low-cloud-2-drift {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  2.12766% {
    transform: translateX(9.377778px);
    opacity: 0;
  }
  4.255319% {
    transform: translateX(18.755556px);
    opacity: 1;
  }
  91.207019% {
    transform: translateX(402px);
    opacity: 1;
  }
  95.744681% {
    transform: translateX(422px);
    opacity: 0;
  }
  100% {
    transform: translateX(422px);
    opacity: 0;
  }
}

.deck-slide[data-slide-id="dragon-boat"] img.db__cloud-2 {
  opacity: 0;
  animation: db-low-cloud-2-drift 47s linear infinite;
  animation-play-state: paused;
}

/* WebM 透明视频：覆盖全局 video.deck-managed-video 圆角，图片不受影响 */
.deck-slide[data-slide-id="dragon-boat"] video {
  border-radius: 0 !important;
  overflow: visible !important;
}

.deck-slide[data-slide-id="dragon-boat"] video.db__lotus-vid,
.deck-slide[data-slide-id="dragon-boat"] video.db__human-calligraphy,
.deck-slide[data-slide-id="dragon-boat"] video.db__human-girl,
.deck-slide[data-slide-id="dragon-boat"] video.db__tree-left-vid {
  border-radius: 0 !important;
}

video.db__asset.deck-managed-video {
  object-fit: fill;
  object-position: left top;
  background: transparent;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* 书法 WebM：播完定格 → 3s → 1.2s 淡出 → 6s 隐藏 → 硬切重播（仅此类） */
.deck-slide[data-slide-id="dragon-boat"] video.db__human-calligraphy {
  opacity: 1;
  transition: none;
}

.deck-slide[data-slide-id="dragon-boat"] video.db__human-calligraphy.db__human-calligraphy--fade-out {
  transition: opacity 1.2s ease;
  opacity: 0;
}