/* 基础样式 - 防止滚动条 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 防止滚动条出现 */
  background: #f5efe8 !important; /* 整个页面背景颜色始终为 #F5EFE8 */
  position: fixed; /* 防止移动端滚动 */
  top: 0;
  left: 0;
}

/* 背景视频（模糊层） */
#cameraBackground {
  display: none; /* 不需要背景视频层 */
}

/* 夜宴图背景（入画前使用） */
.night-banquet-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 3;
  display: none; /* 隐藏夜宴图背景，使用固定背景颜色 */
}

.night-banquet-bg-image {
  width: auto;
  height: 100%;
  object-fit: cover;
  /* 背景模糊效果 */
  filter: blur(15px) brightness(0.7);
  transform: scale(1.1); /* 避免模糊边缘 */
  animation: scrollLeftRight 180s ease-in-out infinite;
}

/* 介绍阶段专用背景（半透明+慢速滚动） */
.intro-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0; /* 在底部长卷(z-index:1)下方 */
  display: none; /* 默认隐藏 */
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.intro-background.active {
  display: block;
  opacity: 1;
}

.intro-bg-image {
  width: auto;
  height: 100%;
  object-fit: cover;
  /* 去掉模糊效果，只保留亮度调整 */
  filter: brightness(1);
  transform: scale(1.1); /* 避免边缘 */
  opacity: 1; /* 不透明 */
  animation: scrollLeftRight 540s ease-in-out infinite; /* 180s * 3 = 540s，速度减慢为原来的1/3 */
}

/* 前景视频（清晰主体） */
#camera {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg); /* 横向居中并旋转90度 */
  width: 83vh; /* 旋转后，宽度对应高度 */
  height: 80vw; /* 旋转后，高度对应宽度 */
  object-fit: cover;
  z-index: 2;
  /* 边框和圆角 */
  border-radius: 60px; /* 圆角 60px，和入画前一样 */
  border: 2px solid #8f7258; /* 边框宽度 2px，颜色 #8F7258 */
  /* iOS 优化圆角 - 使用平滑圆角效果 */
  -webkit-border-radius: 60px;
  /* 确保圆角平滑渲染 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.9vh; /* 固定高度 */
  z-index: 2000; /* 确保在最上层 */
  display: flex;
  justify-content: center; /* 居中 */
  align-items: center;
  gap: 2vw; /* 两个按钮之间的间距 */
  padding: 0;
}
/* Header 按钮样式 */
.header-button {
  height: 100%; /* 高度自适应父容器 */
  width: auto; /* 宽度自适应 */
  background: transparent; /* 背景透明 */
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-button img {
  height: 100%; /* 图片高度填满按钮 */
  width: auto; /* 宽度自适应保持比例 */
  object-fit: contain;
  background: transparent; /* 确保图片背景透明 */
}

.logo {
  width: 29vw;
  height: auto;
  margin: 0 auto;
  margin-left: 3vw;
  margin-right: auto;
}
.slogan {
  width: 34vw;
  height: auto;
  margin: 0 auto;
  margin-left: auto;
  margin-right: 3vw;
}
footer {
  position: fixed;
  bottom: 3.2vh;
  left: 50%;
  transform: translateX(-50%);
  width: 37.9vw;
  height: auto;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

footer img {
  width: 37.9vw;
  height: auto;
  object-fit: contain;
}

/* 夜宴图滚动展示区域 */
.night-banquet-container {
  position: absolute;
  top: 8.2vh; /* 距顶部 8.2vh */
  left: 50%;
  transform: translateX(-50%); /* 横向居中 */
  width: 80vw; /* 宽度 80vw */
  height: 79vh; /* 高度 79vh */
  overflow: hidden;
  z-index: 4;
  border-radius: 60px; /* 边框圆角 60px */
  border: 2px solid #8f7258; /* 边框宽度 2px，颜色 #8F7258 */
  /* iOS 优化圆角 - 使用平滑圆角效果 */
  -webkit-border-radius: 60px;
  /* 确保圆角平滑渲染 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.night-banquet-image {
  width: auto;
  height: 100%;
  object-fit: cover;
  animation: scrollLeftRight 180s ease-in-out infinite;
  /* 轻微模糊 + 对比度增强 */
}

/* 页面切换动画 */
@keyframes slideOutLeft {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(calc(-50% - 100vw));
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(calc(-50% + 100vw));
  }
  100% {
    transform: translateX(-50%);
  }
}

.night-banquet-container.slide-out {
  animation: slideOutLeft 0.6s ease-in-out forwards;
  /* 暂时禁用滚动动画，避免冲突 */
}

.night-banquet-container.slide-in {
  animation: slideInRight 0.6s ease-in-out forwards !important;
  /* 暂时禁用滚动动画，避免冲突 */
}

/* 确保动画期间图片的滚动动画也被暂停 */
.night-banquet-container.slide-out .night-banquet-image,
.night-banquet-container.slide-in .night-banquet-image {
  animation-play-state: paused;
}

/* 夜宴图左右滚动动画 */
@keyframes scrollLeftRight {
  0% {
    transform: translateX(0);
  }
  12.5% {
    transform: translateX(-22.5%);
  }
  25% {
    transform: translateX(-45%);
  }
  37.5% {
    transform: translateX(-67.5%);
  }
  50% {
    transform: translateX(-90%);
  }
  62.5% {
    transform: translateX(-67.5%);
  }
  75% {
    transform: translateX(-45%);
  }
  87.5% {
    transform: translateX(-22.5%);
  }
  100% {
    transform: translateX(0);
  }
}

/* 提示框样式 */
.prompt-container {
  position: absolute;
  bottom: 6.8vh; /* 距离底部 6.6vh */
  left: 50%;
  transform: translateX(-50%); /* 横向居中 */
  z-index: 2001; /* 确保始终覆盖场景图与卡片 */
  display: none; /* 入画前隐藏提示词框 */
}

.prompt-box {
  display: inline-flex;
  padding: 0 1.5vw;
  height: 3.4vh; /* 自身高度 3.4vh */
  justify-content: center;
  align-items: center;

  border-radius: 60px; /* 圆角 60px，与悬浮框统一 */
  border: 2px solid #8f7258; /* 边框宽度 2px，颜色 #8F7258，与悬浮框统一 */
  background: #f5efe8; /* #F5EFE8 不透明 */
  /* iOS 优化圆角 */
  -webkit-border-radius: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.prompt-text {
  color: #8f7258; /* 字体颜色 #8F7258 */
  font-size: clamp(16px, 4vw, 32px);
  font-family: "FZZuoZYXTJW-B", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", serif;
  font-weight: normal;
  word-wrap: break-word;
  white-space: nowrap;
}

/* 倒计时样式 */
.countdown-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5000; /* 确保在视频元素之上 */
  display: none; /* 默认隐藏 */
  pointer-events: none; /* 不拦截点击事件，让按钮可以点击 */
}

.countdown-text {
  font-size: clamp(100px, 25vw, 200px);
  font-family: "FZHanWZKJW", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", serif;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

/* 上传图片按钮容器 */
.upload-image-container {
  position: absolute;
  top: calc(50% + 120px); /* 倒计时下方 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5001; /* 确保在视频元素和倒计时之上 */
  display: none; /* 默认隐藏 */
  pointer-events: auto; /* 允许点击 */
}

.upload-image-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 1.5vw;
  height: 3.4vh; /* 与提示框一致 */
  min-width: 120px; /* 固定最小宽度 */
  width: auto; /* 宽度自适应内容，但不少于最小宽度 */
  font-size: clamp(16px, 4vw, 32px); /* 与提示框字体大小一致 */
  font-family: "FZZuoZYXTJW-B", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", serif; /* 与提示框字体一致 */
  font-weight: normal;
  color: #8f7258; /* 与提示框文字颜色一致 */
  background: #f5efe8; /* 浅色底，与提示框一致 */
  border: 2px solid #8f7258; /* 深色边框，与提示框一致 */
  border-radius: 60px; /* 圆角，与提示框一致 */
  /* iOS 优化圆角 */
  -webkit-border-radius: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  white-space: nowrap; /* 防止文字换行 */
}

.upload-image-button:hover {
  background: rgba(245, 239, 232, 0.9); /* 稍微变暗 */
  transform: scale(1.02);
}

.upload-image-button:active {
  transform: scale(0.98);
}

@keyframes countdownPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 提示语样式 */
.instruction-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5000; /* 确保在视频元素之上 */
  display: none; /* 默认隐藏 */
  pointer-events: none; /* 不拦截点击事件 */
}

.instruction-text {
  font-size: clamp(24px, 6vw, 48px);
  font-family: "FZHanWZKJW", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", serif;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
  text-align: center;
  animation: instructionFade 4s ease-in-out;
}

@keyframes instructionFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* 拍照效果样式 */
.camera-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease-out;
}

.camera-flash.active {
  opacity: 1;
}

/* 粒子转场效果样式 */
.particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; /* 覆盖入宴淡入层(z-index:9)与背景 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background: transparent; /* 确保 canvas 背景透明，显示 body 的背景色 */
}

.particle-canvas.active {
  opacity: 1;
}

/* 入画按钮样式 */
.center-button-container {
  position: absolute;
  bottom: 7.7vh; /* 距离底部 7.7vh */
  left: 50%;
  transform: translateX(-50%); /* 横向居中 */
  z-index: 200;
}

.enter-button {
  position: relative;
  width: 80vw; /* 宽度 80vw */
  height: auto; /* 高度自适应 */
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease;
}

.button-image {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: filter 0.18s ease;
}

.button-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}
.enter-button.press {
  transform: scale(0.97);
}

.button-image.press {
  filter: brightness(1.06);
}

.enter-button.clicked .button-ripple {
  width: 300px;
  height: 300px;
}

/* 点击动画效果 */
@keyframes buttonPulse {
  0% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
      0 0 0 20px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }
}

.enter-button.pulse {
  animation: buttonPulse 0.6s ease-out;
}

/* 展示阶段底部容器 */
.display-bottom-container {
  position: fixed;
  bottom: 7.7vh; /* 距离底部 7.7vh */
  left: 50%;
  transform: translateX(-50%); /* 横向居中 */
  width: 80vw; /* 宽度 80vw */
  height: auto; /* 高度由内容决定 */
  display: flex;
  align-items: flex-end; /* 底部对齐 */
  justify-content: space-between; /* 左右分布 */
  z-index: 200;
  gap: 0; /* 无间距 */
}

/* 入宴阶段：按钮容器要高于卡片显示 */
#banquetBottomContainer {
  z-index: 1002 !important; /* 高于卡片容器（z-index: 1001），确保显示在卡片上方 */
}

/* 展示阶段左侧预留容器 */
.display-left-container {
  position: relative; /* 为子元素提供定位参考 */
  width: 19.5vw; /* 宽度 19.5vw */
  height: 3.93vh; /* 高度 3.93vh */
  display: flex;
  align-items: flex-end; /* 底边对齐 */
  justify-content: flex-start;
}

/* 入宴阶段：返回首页按钮在display-left-container中，宽度28.4vw */
#banquetBottomContainer .display-left-container:first-child {
  width: 28.4vw;
  height: auto;
}

/* 入宴阶段：滑块容器在第二个display-left-container中 */
#banquetBottomContainer .display-left-container:nth-child(2) {
  width: 19.5vw;
  height: 3.9vh;
}

/* 入宴阶段：返回首页按钮样式 */
#banquetBottomContainer .banquet-return-home-button {
  width: 28.4vw;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#banquetBottomContainer .banquet-return-home-button:hover {
  opacity: 0.8;
}

/* 三选项滑块 */
.option-slider {
  position: relative;
  width: 19.5vw;
  height: 3.9vh;
  background: #f5efe8;
  border: 2px solid #8f7258;
  border-radius: 60px;
  -webkit-border-radius: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden; /* 隐藏超出容器的内容 */
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
  box-sizing: border-box; /* 确保边框包含在宽度内 */
}

/* 滑块背景圆形（选中指示器） */
.slider-background {
  position: absolute;
  width: 5.6vw;
  height: 5.6vw;
  background: #8f7258;
  border-radius: 50%;
  transition: transform 0.3s ease;
  z-index: 1;
  pointer-events: none; /* 背景圆形不拦截点击事件 */
  top: 50%;
  left: 0;
  /* 初始位置：第三个选项（形似），居中 */
  /* 每个选项宽度 = 19.5vw / 3 = 6.5vw */
  /* 第三个选项中心位置 = 6.5vw * 2 + 6.5vw / 2 = 16.25vw */
  /* 圆形中心位置 = 16.25vw - 5.6vw / 2 = 13.45vw */
  /* 但需要确保圆形右边缘不超出容器，留出0.2vw间隔 */
  /* 最大位置 = 19.5vw - 5.6vw / 2 - 0.2vw = 16.5vw，但13.45vw < 16.5vw，所以使用13.45vw */
  /* 计算：19.5/3*2 + 19.5/3/2 - 5.6/2 = 13 + 3.25 - 2.8 = 13.45vw */
  transform: translate(calc(19.5vw / 3 * 2 + 19.5vw / 3 / 2 - 5.6vw / 2), -50%);
}

/* 滑块选项容器 */
.slider-options {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 2;
}

/* 入宴阶段：两选项滑块，选项位置对应原来三个选项时的第一个和第三个位置 */
#banquetBottomContainer .slider-options {
  justify-content: space-between;
  padding: 0;
  /* 不使用gap，让两个选项分别在左右两端，对应原来三个选项时的第一个和第三个位置 */
}

/* 单个选项 */
.slider-option {
  position: relative;
  width: calc(19.5vw / 3);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

/* 入宴阶段：两选项滑块的选项宽度，对应原来三个选项时的第一个和第三个位置 */
#banquetBottomContainer .slider-option {
  width: calc(19.5vw / 3); /* 与原来三个选项时每个选项的宽度相同 */
  flex: 0 0 calc(19.5vw / 3); /* 不拉伸，保持固定宽度 */
}

/* 入宴阶段：第二个选项（入宴）靠右，对应原来第三个选项的位置 */
#banquetBottomContainer .slider-option:last-child {
  margin-left: auto; /* 推到最后，对应原来第三个选项的位置 */
}

/* 入宴卡片日期显示 */
.banquet-card-date {
  position: absolute;
  bottom: 2.3vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: "FZZuoZYXTJW-B", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", serif;
  font-size: 16px;
  color: #8f7258;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  /* 添加白边效果，让文字更清晰 */
  text-shadow: -1px -1px 0 #fcf8f4, 1px -1px 0 #fcf8f4, -1px 1px 0 #fcf8f4,
    1px 1px 0 #fcf8f4;
}

/* 选项文字 */
.option-text {
  font-family: "FZZuoZYXTJW-B", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", serif;
  font-size: clamp(14px, 3vh, 32px);
  line-height: 120%;
  color: #8f7258;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0;
  transition: color 0.3s ease;
  user-select: none;
  display: inline-block;
  white-space: nowrap;
}

/* 选中状态的选项文字 */
.slider-option.active .option-text {
  color: #f5efe8;
}

/* 更喜欢这个按钮 */
.prefer-workflow-button {
  position: absolute;
  bottom: calc(7.7vh + 3.9vh + 1vh); /* 在滑块上方1vh */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.8vh 2.5vw;
  background: rgba(245, 239, 232, 0.8);
  border: 2px solid #8f7258;
  border-radius: 60px;
  font-family: "FZZuoZYXTJW-B", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", serif;
  font-size: clamp(14px, 2.5vh, 24px);
  color: #8f7258;
  cursor: pointer;
  z-index: 201;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(143, 114, 88, 0.2);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.prefer-workflow-button:hover {
  background: #8f7258;
  color: #f5efe8;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 4px 12px rgba(143, 114, 88, 0.3);
}

.prefer-workflow-button:hover .heart-icon {
  fill: #f5efe8;
}

.heart-icon {
  flex-shrink: 0;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* 百分比文字（按钮上方） */
.prefer-percentage-text {
  position: absolute;
  bottom: calc(7.7vh + 3.9vh + 1vh + 0.8vh + 0.5vh + 2.5vh); /* 在按钮顶部上方2.5vh，避免重合 */
  left: 50%;
  transform: translateX(-50%);
  font-family: "FZZuoZYXTJW-B", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", serif;
  font-size: clamp(12px, 2vh, 20px);
  color: #8f7258;
  white-space: nowrap;
  z-index: 202;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  text-align: center;
}

.prefer-workflow-button:active {
  transform: translateX(-50%) translateY(0);
  box-shadow: 0 2px 6px rgba(143, 114, 88, 0.2);
}

/* 入宴按钮容器 */
.banquet-button-container {
  width: 59vw; /* 宽度 59vw */
  height: 3.9vh; /* 与滑块等高 */
  display: flex;
  justify-content: flex-end; /* 按钮靠右 */
  align-items: flex-end; /* 底边对齐 */
}

/* 入宴阶段：新按钮容器宽度为28.4vw */
#banquetBottomContainer .banquet-button-container {
  width: 28.4vw;
  height: auto;
}

/* 入宴按钮 */
.banquet-button {
  position: relative;
  width: 100%; /* 填满容器 */
  height: 100%; /* 填满容器高度 */
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease;
  display: flex;
  align-items: flex-end; /* 底边对齐 */
  justify-content: flex-end; /* 右对齐 */
}

.banquet-button .button-image {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto; /* 自适应高度，保持图片宽高比 */
  object-fit: contain;
  object-position: bottom right; /* 图片底部右对齐 */
  border-radius: 12px;
  transition: filter 0.18s ease;
  align-self: flex-end; /* 确保图片底边与按钮底边对齐 */
}

/* 介绍内容样式 */
.introduction-container {
  display: none; /* 默认隐藏 */
}

.introduction-container.active {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  pointer-events: none; /* 让背景可以穿透 */
}

.introduction-container.active .introduction-text-wrapper {
  pointer-events: auto; /* 悬浮框本身可以交互 */
}

/* 悬浮框容器 */
.introduction-text-wrapper {
  position: fixed;
  bottom: 8.8vh; /* 距离底部 7vh，考虑margin后与摄像头画面底边对齐（8.2vh + 83vh = 91.2vh，100vh - 91.2vh = 8.8vh，减去margin-bottom 1.8vh = 7vh） */
  left: 50%;
  transform: translateX(-50%); /* 横向居中 */
  width: 80vw; /* 宽度 80vw */
  background: rgba(245, 239, 232, 0.7); /* #F5EFE8 透明度70% */
  border: 2px solid #8f7258; /* 边框，颜色 #8F7258，宽度 2px */
  box-sizing: border-box; /* 确保边框在内部 */
  border-radius: 60px; /* 圆角 60px */
  /* iOS 优化圆角 */
  -webkit-border-radius: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* 轻微的 background blur 效果 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 内边距 - 进一步减少顶部和底部内边距 */
  padding: 0.4vh 4vw 2.2vh 4vw;
  /* 居中 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  /* 阴影 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  /* 高度自适应内容 */
  height: auto;
  max-height: calc(100vh - 8.1vh - 20vh); /* 最大高度，避免超出屏幕 */
  overflow-y: auto;
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 和 Edge */
  z-index: 1001; /* 确保在背景之上 */
}

/* 隐藏 WebKit 浏览器的滚动条 */
.introduction-text-wrapper::-webkit-scrollbar {
  display: none;
}

.introduction-text {
  width: 100%;
  color: #8f7258; /* 文字颜色与边框一致 */
  font-size: clamp(
    1.4vh,
    1.4vh,
    28px
  ); /* 字体大小自适应在1.4vh左右，最大为28px */
  font-family: "FZYanSJW", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "微软雅黑", "SimSun", "宋体", serif;
  font-weight: normal;
  line-height: 1.6;
  word-wrap: break-word;
  /* 段落缩进 - 段落之间的间距 */
  margin: 0;
  margin-top: 2vh; /* 顶部间距 */
  margin-bottom: 1em; /* 段落之间的间距，缩进值1em */
  /* 打字效果相关 */
  white-space: pre-wrap; /* 保持换行和空格 */
  text-align: justify; /* 文本两端对齐 */
  /* 去除开头和结尾的空白 */
  text-indent: 0;
  /* 去除开头的空白字符 - 使用 ::first-line 伪元素 */
  padding-top: 0;
  overflow: hidden; /* 隐藏未打出的文字 */
  opacity: 0;
  transition: opacity 1s ease-in;
}

/* 处理段落之间的间距 */
.introduction-text p {
  margin: 0 0 1.2em 0; /* 段落间距 */
  text-indent: 0; /* 去除首行缩进 */
}

.introduction-text br + br {
  margin-top: 1.2em; /* br 标签之间的间距 */
}

.introduction-container.active .introduction-text {
  opacity: 1;
}

/* 入宴介绍样式（与入画相似，使用独立容器与类） */
.banquet-introduction-container {
  display: none;
}

.banquet-introduction-container.active {
  display: block;
}

.banquet-introduction-title {
  position: fixed;
  top: 48vh;
  right: 8.5vw;
  z-index: 1002;
  opacity: 0;
  transition: opacity 1s ease-in;
}

.banquet-introduction-title img {
  width: 6.5vw;
  height: auto;
  object-fit: contain;
}

.banquet-introduction-text {
  position: fixed;
  left: 11vw;
  top: 49vh;
  width: 69vw;
  z-index: 1002;
  opacity: 0;
  transition: opacity 1s ease-in;
  color: white;
  font-size: 32px;
  font-family: FZHanWenZhengKaiS, serif;
  font-weight: 400;
  line-height: 48px;
  word-wrap: break-word;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  white-space: pre-wrap;
  overflow: hidden;
}

.banquet-introduction-container.active .banquet-introduction-title,
.banquet-introduction-container.active .banquet-introduction-text {
  opacity: 1;
}

/* 夜宴图长卷滚动展示（底部） */
.scrolling-scroll-container {
  position: fixed;
  left: 0;
  bottom: 11vh;
  width: 100vw;
  height: 29.5vh; /* 底部占比高度 */
  z-index: 1; /* 在介绍文字下方 */
  overflow: hidden;
  display: none; /* 默认隐藏，出现时与介绍一起显示 */
}

.scrolling-scroll-container.active {
  display: block;
}

.scrolling-scroll-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  animation: longScroll 60s linear infinite; /* 单张图片滚动 */
}

.scrolling-scroll-inner img {
  height: 100%;
  width: auto;
  object-fit: cover;
  min-width: 100%; /* 确保图片至少填满容器 */
}

@keyframes longScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 单张图片完全移出 */
  }
}

/* 形同提示图片 */
.xingtong-hint-image {
  position: absolute;
  height: 5.8vh;
  width: auto;
  bottom: calc(3.9vh - 0.5vh); /* 滑块高度 - 间距，稍微靠近滑块 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 201;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* 形同提示图片抖动动画 */
.xingtong-hint-image.shake {
  animation: xingtongShake 2s ease-in-out infinite;
}

@keyframes xingtongShake {
  0%,
  100% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  10% {
    transform: translateX(-50%) scale(1.08) rotate(-3deg);
  }
  20% {
    transform: translateX(-50%) scale(1.12) rotate(3deg);
  }
  30% {
    transform: translateX(-50%) scale(1.08) rotate(-2deg);
  }
  40% {
    transform: translateX(-50%) scale(1.05) rotate(2deg);
  }
  50% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  /* 后50%保持静止，避免过度抖动 */
}

/* 形同加载动画 */
.xingtong-loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 80px;
  height: 80px;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.xingtong-loading.visible {
  display: block;
  opacity: 1;
}

.xingtong-loading::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 5px solid rgba(139, 69, 19, 0.2);
  border-top-color: #8b4513;
  border-radius: 50%;
  animation: xingtongSpin 1s linear infinite;
}

@keyframes xingtongSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}