/* splash 引导面板 — 内嵌 index.html 全屏叠层，750 稿 vw：px ÷ 7.5 */

body.splash-active {
  overflow: hidden;
}

.btn-reset {
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.sp-root [role="button"]:focus,
.sp-root [tabindex]:not([tabindex="-1"]):focus,
.sp-root .btn-reset:focus {
  outline: none;
}

.sp-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
  overflow: hidden;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Vue 未挂载时 #app 仍是 display:flex，选类型层不要露出来 */
[v-cloak] .sp-root,
[v-cloak] .sp-pop-layer {
  display: none !important;
}

.sp-step {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow-x: hidden;
  box-sizing: border-box;
}

.sp-step.is-on {
  display: block;
}

/* ========== 第一步：欢迎页 ========== */
.sp-step-wel {
  background: #f6ead8;
  overflow-y: hidden;
}

.sp-wel-bg {
  display: block;
  width: 100%;
  height: auto;
}

.sp-wel-btn {
  /* position: absolute — 欢迎页底部按钮 (159.5,1289,430,112) */
  position: absolute;
  left: 21.2667vw;
  top: 144.2667vw;
  z-index: 2;
  line-height: 0;
}

.sp-wel-btn img {
  display: block;
  width: 57.35vw;
  height: auto;
}

/* ========== 第二步：长图页 ========== */
.sp-step-scroll {
  background: #f6ead8;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sp-scroll-body {
  position: relative;
}

.sp-scroll-bg {
  display: block;
  width: 100%;
  height: auto;
}

.sp-scroll-btn {
  /* position: absolute — 长图底部按钮 (142,6617,467,114) 750稿 */
  position: absolute;
  left: 18.9333vw;
  top: 882.2667vw;
  z-index: 2;
  line-height: 0;
  visibility: hidden;
  pointer-events: none;
}

.sp-scroll-btn.is-show {
  visibility: visible;
  pointer-events: auto;
}

.sp-scroll-btn img {
  display: block;
  width: 62.2667vw;
  height: auto;
}

.sp-step-scroll.is-pop-on .sp-scroll-btn {
  visibility: hidden;
  pointer-events: none;
}

.sp-step-scroll.is-pop-on {
  overflow: hidden;
}

.sp-step-scroll.is-pick-only {
  background: transparent;
}

.sp-step-scroll.is-pick-only .sp-scroll-body,
.sp-step-scroll.is-pick-only .sp-scroll-btn {
  display: none;
}

/* ========== 弹窗叠层（第三步叠在第二步上） ========== */
.sp-pop-layer {
  /* position: fixed — 全屏弹窗叠在长图页上 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: none;
  overflow: hidden;
}

.sp-pop-layer.is-on {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ========== 弹窗公共 ========== */
.sp-mask {
  /* position: fixed — 全屏遮罩，不随弹窗滚动 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
}

.sp-pop-track {
  /* position: relative — 滚动占位轨道，撑出弹窗总高度 */
  position: relative;
  z-index: 2;
  height: 197.3333vw;
  pointer-events: none;
}

.sp-pop {
  /* position: absolute — 弹窗壳容器 */
  position: absolute;
  left: 3.0667vw;
  top: 25.0667vw;
  z-index: 2;
  pointer-events: auto;
}

.sp-pop-bg {
  display: block;
  width: 93.8667vw;
  height: auto;
}

.sp-pop-close {
  /* position: absolute — 关闭按钮 */
  position: absolute;
  top: 2.2667vw;
  left: 83.4667vw;
  line-height: 0;
}

.sp-pop-close img {
  display: block;
  width: 8vw;
  height: auto;
}

.sp-pop-act {
  /* position: absolute — 底部主按钮 */
  position: absolute;
  top: 96.8667vw;
  left: 21.0667vw;
  line-height: 0;
}

.sp-pop-act img {
  display: block;
  width: 50.9333vw;
  height: auto;
}

/* ========== 窗户 ========== */
.sp-win {
  /* position: absolute — 单扇窗（框+景+百叶） */
  position: absolute;
  line-height: 0;
  width: 26.6667vw;
  height: 32.2667vw;
}

/* 图层（自下而上）：背景 → ①景+百叶 → ②gif → ③窗框 → ④牌匾 */
.sp-win-scene {
  position: absolute;
  display: block;
  width: 19.7333vw;
  height: auto;
  z-index: 1;
}

.sp-win-shut {
  position: absolute;
  top: 0;
  display: block;
  width: 9.6vw;
  height: auto;
  z-index: 1;
}

.sp-win-shut-l {
  left: 4vw;
}

.sp-win-shut-r {
  left: 13.3333vw;
}

.sp-win-gif {
  /* 第 2 层 — 72px@375，与预览对齐 */
  position: absolute;
  top: calc(8% - 2.6667vw);
  left: 50%;
  transform: translateX(-50%);
  width: 19.2vw;
  height: auto;
  z-index: 2;
  display: none;
  pointer-events: none;
}

.sp-win.is-opening .sp-win-shut,
.sp-win.is-closing .sp-win-shut {
  display: none;
}

.sp-win.is-opening .sp-win-gif,
.sp-win.is-closing .sp-win-gif {
  display: block;
}

.sp-win-frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 26.6667vw;
  height: auto;
  z-index: 3;
}

.sp-win-lbl {
  position: absolute;
  display: block;
  width: 22.1333vw;
  height: auto;
  z-index: 4;
}

/* 窗1：一人安隅 (63,375,200,242) */
.sp-win-1 {
  top: 25.4667vw;
  left: 5.3333vw;
}

.sp-win-1 .sp-win-scene {
  top: 0;
  left: 3.6vw;
}

.sp-win-1 .sp-win-lbl {
  top: -3.2vw;
  left: 2.4vw;
}

/* 窗2：萌宠相伴 (275,375,200,242) */
.sp-win-2 {
  top: 25.4667vw;
  left: 33.6vw;
}

.sp-win-2 .sp-win-scene {
  top: 0;
  left: 3.4667vw;
}

.sp-win-2 .sp-win-lbl {
  top: -3.2vw;
  left: 2.2667vw;
}

/* 窗3：两心相守 (486,375,200,242) */
.sp-win-3 {
  top: 25.4667vw;
  left: 61.7333vw;
}

.sp-win-3 .sp-win-scene {
  top: 0;
  left: 3.7333vw;
}

.sp-win-3 .sp-win-lbl {
  top: -3.2vw;
  left: 2.2667vw;
}

/* 窗4：小家童趣 (147,640,200,242) */
.sp-win-4 {
  top: 60.8vw;
  left: 16.5333vw;
}

.sp-win-4 .sp-win-scene {
  top: 0;
  left: 3.8667vw;
}

.sp-win-4 .sp-win-lbl {
  top: -3.2vw;
  left: 2.2667vw;
}

.sp-win-4 .sp-win-shut {
  top: 0.2667vw;
}

/* 窗5：阖家满堂 (382,639,200,242) */
.sp-win-5 {
  top: 60.6667vw;
  left: 47.8667vw;
}

.sp-win-5 .sp-win-scene {
  top: 0.1333vw;
  left: 3.7333vw;
}

.sp-win-5 .sp-win-lbl {
  top: -3.0667vw;
  left: 2.1333vw;
}

.sp-win-5 .sp-win-shut {
  top: 0.4vw;
}

/* 开窗弹窗：is-pick 一扇隐藏百叶 */
.sp-pop-open .sp-win.is-pick .sp-win-shut {
  display: none;
}

.sp-win.is-pick .sp-win-frame {
  filter: drop-shadow(0 0 1.0667vw rgba(200, 146, 90, 0.65));
}