/* hand-ui 第二十八屏：纯色底 + 双层视差 + 内嵌素材，仅 [data-slide-id="hand-ui"] */

.deck-slide[data-slide-id="hand-ui"] .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-slide[data-slide-id="hand-ui"].deck-slide--theme-hand-navy {
  background: #050b28;
  background-image: none;
}

.deck-slide[data-slide-id="hand-ui"] .deck-slide__layer .deck-body {
  pointer-events: none !important;
}

.deck-slide[data-slide-id="hand-ui"] .deck-slide__layer {
  pointer-events: none !important;
}

.deck-slide[data-slide-id="hand-ui"] .deck-slide__media {
  pointer-events: auto;
  overflow: visible;
}

.deck-slide[data-slide-id="hand-ui"] .deck-slide__media-inner {
  overflow: visible;
}

.deck-media-layout--hand-ui-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.hand-ui-root {
  position: absolute;
  width: 1920px;
  height: 1350px;
  left: 0;
  top: 2px;
  overflow: visible;
  perspective: 1500px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* thanks上 / thanks下 容器 1632×1157 @154,127；thanks下 z10，thanks上 z30 */
.parallax-layer-hand-mid {
  position: absolute;
  left: 154px;
  top: 127px;
  width: 1632px;
  height: 1157px;
  overflow: visible;
  border-radius: 0 !important;
  z-index: 10;
  transform: translateZ(-4px);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
  box-sizing: border-box;
  perspective: 1580px;
}

.parallax-layer-hand-top {
  position: absolute;
  left: 154px;
  top: 127px;
  width: 1632px;
  height: 1157px;
  overflow: visible;
  border-radius: 0 !important;
  z-index: 30;
  transform: translateZ(8px);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
  box-sizing: border-box;
  isolation: isolate;
}

.hi__layer-stack {
  position: absolute;
  left: 0;
  top: 0;
  width: 1632px;
  height: 1157px;
  overflow: visible;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.parallax-layer-hand-mid .hi__mid-bg {
  z-index: 1;
  transform: translateZ(-24px);
}

.parallax-layer-hand-mid .hi__asaa2 {
  z-index: 2;
}

.parallax-layer-hand-mid .hi__thanks-bottom {
  z-index: 3;
  transform: translateZ(0);
}

.hi__asset {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  border-radius: 0;
  box-sizing: border-box;
}

.hi__reveal-target {
  opacity: 0;
}

/* 个人信息点击：直线 / R1–R3 透明度 + Y 轴联动（终点 top 为设计目标 Y，初始位以 translateY 下移） */
.parallax-layer-hand-top .hi__line.hi__reveal-target {
  opacity: 0;
  transform: translateY(19.38px);
}

.parallax-layer-hand-top .hi__r1.hi__reveal-target,
.parallax-layer-hand-top .hi__r2.hi__reveal-target {
  opacity: 0;
  transform: translateY(27px);
}

.parallax-layer-hand-top .hi__r3.hi__reveal-target {
  opacity: 0;
  transform: translateY(28.95px);
}

.parallax-layer-hand-top.hi__contact-reveal--active .hi__r1.hi__reveal-target {
  animation: hi-reveal-r1 0.8s cubic-bezier(0.39, 0.01, 0.11, 1.01) 0s forwards;
}

.parallax-layer-hand-top.hi__contact-reveal--active .hi__r2.hi__reveal-target {
  animation: hi-reveal-r2 0.8s cubic-bezier(0.39, 0.01, 0.11, 1.01) 0.2s forwards;
}

.parallax-layer-hand-top.hi__contact-reveal--active .hi__r3.hi__reveal-target {
  animation: hi-reveal-r3 0.8s cubic-bezier(0.39, 0.01, 0.11, 1.01) 0.41s forwards;
}

.parallax-layer-hand-top.hi__contact-reveal--active .hi__line.hi__reveal-target {
  animation: hi-reveal-line 0.91s cubic-bezier(0.39, 0.01, 0.11, 1.01) 0.09s forwards;
}

/* 二次点击收起：反向透明度 + Y 回落（延迟 / 时长与入场一致，fill-mode both 保延迟段姿态） */
.parallax-layer-hand-top.hi__contact-reveal--hide .hi__r1.hi__reveal-target {
  animation: hi-hide-r1 0.8s cubic-bezier(0.39, 0.01, 0.11, 1.01) 0s both;
}

.parallax-layer-hand-top.hi__contact-reveal--hide .hi__r2.hi__reveal-target {
  animation: hi-hide-r2 0.8s cubic-bezier(0.39, 0.01, 0.11, 1.01) 0.2s both;
}

.parallax-layer-hand-top.hi__contact-reveal--hide .hi__r3.hi__reveal-target {
  animation: hi-hide-r3 0.8s cubic-bezier(0.39, 0.01, 0.11, 1.01) 0.41s both;
}

.parallax-layer-hand-top.hi__contact-reveal--hide .hi__line.hi__reveal-target {
  animation: hi-hide-line 0.91s cubic-bezier(0.39, 0.01, 0.11, 1.01) 0.09s both;
}

/* 展开完成后的静止态 */
.parallax-layer-hand-top.hi__contact-reveal--expanded .hi__line.hi__reveal-target,
.parallax-layer-hand-top.hi__contact-reveal--expanded .hi__r1.hi__reveal-target,
.parallax-layer-hand-top.hi__contact-reveal--expanded .hi__r2.hi__reveal-target,
.parallax-layer-hand-top.hi__contact-reveal--expanded .hi__r3.hi__reveal-target {
  opacity: 1;
  transform: translateY(0);
}

@keyframes hi-reveal-r1 {
  from {
    opacity: 0;
    transform: translateY(27px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hi-reveal-r2 {
  from {
    opacity: 0;
    transform: translateY(27px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hi-reveal-r3 {
  from {
    opacity: 0;
    transform: translateY(28.95px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hi-reveal-line {
  from {
    opacity: 0;
    transform: translateY(19.38px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hi-hide-r1 {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(27px);
  }
}

@keyframes hi-hide-r2 {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(27px);
  }
}

@keyframes hi-hide-r3 {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(28.95px);
  }
}

@keyframes hi-hide-line {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(19.38px);
  }
}

.clip-mask {
  position: absolute;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  perspective: 1580px;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 20;
  will-change: transform;
}

.hand-ui-root > .clip-mask .hi__ripple-vid {
  transform: none;
}

.parallax-layer-hand-top .hi__layer-stack > .hi__thanks-top {
  opacity: 1;
  z-index: 1;
}

.parallax-layer-hand-top .hi__layer-stack > .hi__line {
  z-index: 2;
}

.parallax-layer-hand-top .hi__layer-stack > .hi__r3 {
  z-index: 3;
}

.parallax-layer-hand-top .hi__layer-stack > .hi__r2 {
  z-index: 4;
}

.parallax-layer-hand-top .hi__layer-stack > .hi__r1 {
  z-index: 5;
}

.parallax-layer-hand-top .hi__layer-stack > .hi__nav-box {
  opacity: 1;
  z-index: 6;
}

.hi__nav-box {
  position: absolute;
  overflow: visible;
  box-sizing: border-box;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.deck-slide[data-slide-id="hand-ui"] .hi__nav-box {
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 50;
}

.hi__lottie {
  position: absolute;
  overflow: visible;
  box-sizing: border-box;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.hi__lottie svg {
  display: block;
  width: 120px;
  height: 120px;
}

/*
 * 覆盖 main.css：
 * - img/video.lazy-media { max-width:100%; height:auto }
 * - .deck-media-layout img/video { width:100%; height:100%; object-fit:cover }
 * - video.deck-managed-video { width:100%; object-fit:contain }
 * 素材尺寸仅由 build-hand-ui.js 内联 width/height 决定，禁止缩放。
 */
.deck-slide[data-slide-id="hand-ui"] .deck-media-layout--hand-ui-stack img.lazy-media,
.deck-slide[data-slide-id="hand-ui"] .deck-media-layout--hand-ui-stack video.lazy-media,
.deck-slide[data-slide-id="hand-ui"] .deck-media-layout--hand-ui-stack video.deck-managed-video {
  max-width: none;
  max-height: none;
  object-fit: unset;
  object-position: left top;
  border-radius: 0;
}

.deck-slide[data-slide-id="hand-ui"] .deck-media-layout--hand-ui-stack .hi__asset {
  max-width: none;
  max-height: none;
  object-fit: unset;
  object-position: left top;
}