/* ===== 公共样式 ===== */
#screen-1 .slideshow-container {
      height: 100vh;
      width: 100vw;
      position: relative;
      overflow: hidden;
    }

#screen-1 .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
      z-index: -2;
    }

#screen-1 .slide.active {
      opacity: 1;
    }

#screen-1 .gradient-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
      z-index: -1;
    }

#screen-1 .text-content {
      opacity: 0;
      animation: fadeIn 1.5s ease-in-out forwards;
    }

#screen-1 .text-content.hide {
      animation: fadeOut 1.5s ease-in-out forwards;
    }

.bg-parallax-1 {
      background-image: url('/static/img/1-1.jpg') !important;
    }

    .bg-parallax-2 {
      background-image: url('/static/img/1-2.jpg') !important;
    }

    .bg-parallax-3 {
      background-image: url('/static/img/1-3.png') !important;
    }

@keyframes slide-in-left {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slide-in-right {
      from {
        transform: translateX(100%);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes fade-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .animate-slide-in-left {
      animation: slide-in-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    .animate-slide-in-right {
      animation: slide-in-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    .animate-fade-in {
      animation: fade-in 1.5s ease-out 0.5s both;
    }

@keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes slideInLeft {
      from {
        transform: translateX(-2rem);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideInRight {
      from {
        transform: translateX(2rem);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .animate-fadeIn {
      animation: fadeIn 1s ease-out forwards;
    }

    .animate-slideInLeft {
      animation: slideInLeft 1s ease-out forwards;
    }

    .animate-slideInRight {
      animation: slideInRight 1s ease-out forwards;
    }

.text-reveal-child {
      /* 默认仅隐藏，不自动播放动画，进入第4屏时再触发 */
      opacity: 0;
    }
/* 进入第4屏才启动文字显隐动画 */
#screen-4.reveal-active .text-reveal-child { animation: text-reveal 1s ease-out forwards; }

/* ===== 第四屏 动画样式修复 ===== */
@keyframes ken-burns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-2%, 2%); }
}
@keyframes float-in {
  0% { opacity: 0; transform: translateY(20px) rotate(5deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes text-reveal {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-ken-burns { animation: ken-burns 20s ease-in-out infinite alternate-reverse; }
/* 第4屏图片卡片的浮入动画：进入第4屏时才开始 */
#screen-4.reveal-active .animate-float-in-1 { animation: float-in 1.2s ease-out forwards; }
#screen-4.reveal-active .animate-float-in-2 { animation: float-in 1.4s ease-out forwards; }
#screen-4.reveal-active .animate-float-in-3 { animation: float-in 1.6s ease-out forwards; }

@keyframes slide-in-left {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slide-in-right {
      from {
        transform: translateX(100%);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .animate-slide-in-left {
      animation: slide-in-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .animate-slide-in-right {
      animation: slide-in-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

@keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes floatUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in-up {
      animation: floatUp 1.2s ease-out forwards;
      opacity: 0;
    }

#screen-7 .slideshow-container {
      position: relative;
      width: 100%;
      height: auto;
    }

#screen-7 .slide {
      display: none;
      animation: fadeIn 1.5s ease-in-out;
    }

#screen-7 .slide.active {
      display: block;
    }

#screen-7 .dots-container {
      position: absolute;
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }

#screen-7 .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #6b7280;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

.dark #screen-7 .dot {
      background-color: #9ca3af;
    }

#screen-7 .dot.active {
      background-color: #bd830f;
    }

.dark #screen-7 .dot.active {
      background-color: #bd830f;
    }

.form-input::placeholder {
      color: #9ca3af;
    }

    .dark .form-input::placeholder {
      color: #6b7280;
    }

#nav-links-desktop a.active,
#mobile-menu a.active {
  background-color: rgba(255, 255, 255, 0.2);
}

      #screen-1>header {
        display: none !important;
      }

/* ===== 第九屏 样式 ===== */
@keyframes fade-in-up {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
        }
        }
/* ===== 第二屏 背景修正 ===== */
#screen-2 { background-color: #101922; }

/* ===== 第三屏 背景修正 ===== */
#screen-3 { background-color: #221c10; }
#screen-3, #screen-3 * { color: #ffffff !important; }

/* ===== 第六屏 背景修正 ===== */
#screen-6 { background-color: #221c10; }
#screen-6, #screen-6 * { color: #ffffff !important; }


/* ===== 第七屏 背景修正 ===== */
#screen-7 { background-color: rgb(34 28 16); }
#screen-7, #screen-7 * { color: #ffffff !important; }

/* ===== 第八屏 背景修正 ===== */
#screen-8 { background-color: #221c10; }
#screen-8, #screen-8 * { color: #ffffff !important; }

/* ===== 第九屏 背景修正 ===== */
#screen-9 { background-color: rgb(34 28 16 / 0.9); }
#screen-9, #screen-9 * { color: #ffffff !important; }

/* ===== 第五屏 表格移动端优化 ===== */
@media (max-width: 640px) {
  .responsive-table thead { display: none; }
  .responsive-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .responsive-table tbody { display: block; }
  .responsive-table tbody tr { display: block; padding: 12px 8px; border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
  .responsive-table tbody tr:last-child { border-bottom: 0; }
  .responsive-table tbody td { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; line-height: 1.6; word-break: break-word; }
  .responsive-table tbody td:first-child { font-weight: 700; color: #fff; padding-top: 2px; }
  .responsive-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 6em;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
  }
}
/* ===== 全局布局修复（防止横向滚动条） ===== */
html, body { overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }

/* 移动端隐藏第2-8屏的下滑箭头，仅保留首屏 */
@media (max-width: 640px) {
  #screen-2 .scroll-next,
  #screen-3 .scroll-next,
  #screen-4 .scroll-next,
  #screen-5 .scroll-next,
  #screen-6 .scroll-next,
  #screen-7 .scroll-next,
  #screen-8 .scroll-next { display: none !important; }
}