/* ----------------------------------------
   基础 Reset 样式
---------------------------------------- */
div.container-ml200px-buffer > .container {
  padding: 0;
}
#page-content {
  padding: 0;
}
body {
  overflow: hidden;
}

/* 欢迎动画 */
#welcome-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, 
    #9b6f9d 0%, 
    #8b4a88 24%, 
    #2c0f35 38%, 
    #1a1d3d 100%
  );
  background-size: 200% 200%;
  animation: moveBackground 17s linear infinite;
  z-index: 99;
  pointer-events: auto;
  height: 100vh; /* 确保容器的高度是全屏 */
  width: 100vw;  /* 确保容器的宽度是全屏 */
  transition: opacity 2s ease-out;
}

/* Background animation */
@keyframes moveBackground {
  0% { background-position: 100% 100%; }
  25% { background-position: 0% 100%; }
  50% { background-position: 100% 0%; }
  75% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* 图像适应容器大小 */
#welcome-img {
  max-width: 90vw;   /* 限制最大宽度 */
  max-height: 90vh;   /* 限制最大高度 */
  pointer-events: none; /* 防止图像阻止其他点击事件 */
  object-fit: contain; /* 确保图像按比例缩放 */
  opacity: 0;          /* 默认隐藏 */
  transition: opacity 3s ease-in;  /* 图像的渐显效果 */
}

/* 只有当 #welcome-container 添加了 "loaded" 类后，图像才显示 */
#welcome-container.loaded #welcome-img {
  opacity: 1;  /* 图像显示 */
}
#welcome-hint {
  bottom: 10%;
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}
#welcome-hint::after {
  display: inline-block;
  font-size: 1rem;
  color: white;
  opacity: 0.8;
  animation: fadeBlink 3s infinite;
  font-family: inherit;
}
html[lang="en"] #welcome-hint::after {
  content: "Click to Enter";
}

html[lang="zh"] #welcome-hint::after {
  content: "点击进入";
}
@keyframes fadeBlink {
  0%   { opacity: 0.2; }
  50%  { opacity: 1; }
  100% { opacity: 0.2; }
}

/* ----------------------------------------
   Film Container 容器高度
---------------------------------------- */
.carousel-container.film-container {
  position: relative;
  overflow: hidden;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}


.scroll-hint {
  font-size: 1.5rem;
  position: fixed;
  bottom: 30px;
  left: calc(50% + 100px);
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  color: #fff;
  pointer-events: none;
  user-select: none;
  animation: hintFade 1.5s ease-in-out infinite alternate;
}
@keyframes hintFade {
  0%   { opacity: 0.3; }
  100% { opacity: 1; }
}
.arrow {
  animation: arrowBounce 1.5s ease-in-out infinite alternate;
}

@keyframes arrowBounce {
  0%   { transform: translateX(0); }
  100% { transform: translateX(1.25rem); }
}
.hint-text {
  margin-left: 1.5rem;
}
.arrow-left {
  animation-direction: alternate-reverse;
}
html[lang="en"] .hint-text::before {
  content: "Scroll to explore";
}

/* 中文提示 */
html[lang="zh"] .hint-text::before {
  content: "滚动鼠标了解更多内容";
}
/* ----------------------------------------
   Film 背景轨道（桌面端用）
---------------------------------------- */
.film-track-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.bg-frame {
  height: 100vh;
  width: 100vw;
}
.bg-1 {
  background: linear-gradient(to bottom,
    #0a1c3f 0%, #2a5298 70%, #b24592 100%);
}
.bg-2 {
  background: linear-gradient(to bottom,
    #b24592 0%,#cc5f7f 40%,#d88f6a 70%,#f29c6b 100%);
}
.bg-3 {
  background: linear-gradient(to bottom,
    #f29c6b 0%,#f4c542 30%,#d2dc4d 60%,#7ec850 100%);
}

.bg-4 {
  background: linear-gradient(to bottom,
    #7ec850 0%,#3da98b 30%,#4cb0b0 60%,#c77ba4 100%);
}

.bg-5 {
  background: linear-gradient(to bottom,
    #c77ba4 0%,#cda2b7 70%,#cda2b7 100%);
}




/* ----------------------------------------
   Film 内容轨道（前景内容）
---------------------------------------- */
.film-track-content {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  z-index: 1;
  will-change: transform;
  pointer-events: none;
  height: 100vh;
  width: auto; /* 宽度由 JS 动态设置 */
}

/* ----------------------------------------
   内容帧（每一页）
---------------------------------------- */
.content-frame {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%; /* 每帧宽度由 JS 设置为 px 值 */
  position: relative;
}

/* 合成背景层（移动端使用） */
.mobile-bg-layer {
  display: none; /* 默认关闭，移动端再启用 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ----------------------------------------
   内容区域样式（文本）
---------------------------------------- */
.slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: calc(100vw - 200px);
  padding: 60px 20px;
  color: #fff;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.text-block {
  width: 62%;
}

.animated-title {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.animated-text {
  font-size: 1.25rem;
  line-height: 1.6;
  opacity: 0.85;
}
/*Slide 1*/
.brandmark-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.brandmark {
  height: clamp(20dvh, 62dvh, 80dvh);
  width: auto;
  display: block;
  transform-origin: center;
  transition: transform 0.2s ease-out;
  will-change: transform;
}
html[lang="zh"] #silde-1-textblock {
  width: auto;
}

/*Slide 2*/
.index-visual-img-wrapper {
  position: relative;
  width: auto;
  height: clamp(20dvh, 62dvh, 80dvh);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}
.index-visual-img-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity 0.5s,
    -webkit-mask-image 0.5s,
    mask-image 0.5s,
    transform 0.3s;

  /* 默认羽化遮罩（边缘 30% 虚化）*/
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.index-visual-img-wrapper img.active {
  opacity: 1;
  z-index: 1;
}

/* ✅ hover 时，羽化区域缩小 → 图片边缘变清晰 */
.index-visual-img-wrapper:hover img.active {
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 95%,   /* 缩紧羽化区域 */
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 95%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: scale(1.02);
}

.index-visual-img-wrapper img.active {
  opacity: 1;
  z-index: 1;
}

.img-carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 8px;
}
.img-carousel-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.3s;
  cursor: pointer;
}
.img-carousel-dots .dot.active {
  background: #fff;
}
/*Slide 5*/
#html-index-dir-text > a {
  color: #82cfff;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease;
}
#html-index-dir-text > a:hover {
  color: #82cfff;
  text-decoration-color: #82cfff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.sidebar a.show-icon {
  text-decoration: underline;
  text-decoration-color: currentColor; /* 自动适配主题色 */
  text-underline-offset: 2px;
}
#silde-5-textblock {
  width: 100%;
}

/* ----------------------------------------
   移动端响应样式（<=768px）
---------------------------------------- */
@media (max-width: 768px) {
  div.container-ml200px-buffer > .container {
  margin: 0;
  }
  /* 欢迎动画*/
  #welcome-container {
  background-size: 200% 200%;
  }
  #welcome-img {
  max-width: 100vw;
  max-height: 100dvh;
  transform: translateY(-64px);
  }
  #welcome-hint::after {
    font-size: 1rem;
  }
  html[lang="en"] #welcome-hint::after {
    content: "Tap to Enter";
  }
  /* 隐藏桌面背景轨道 */
  .film-track-bg {
    display: none;
  }

  /* 显示合成背景层 */
  .mobile-bg-layer {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .bg-1 {
    background: linear-gradient(to right,
      #0f2027 0%,
      #203a43 20%,
      #2c5364 80%,
      #3e2f5b 100%
    );
  }

  .bg-2 {
    background: linear-gradient(to right,
      #3e2f5b 0%,
      #5f4b8b 20%,
      #7a5195 80%,
      #9b59b6 100%
    );
  }

  .bg-3 {
    background: linear-gradient(to right,
      #9b59b6 0%,
      #a569bd 20%,
      #c26c9c 80%,
      #d38ab3 100%
    );
  }

  .bg-4 {
    background: linear-gradient(to right,
      #d38ab3 0%,
      #eec0c6 20%,
      #e9a6af 80%,
      #bd83b8 100%
    );
  }

  .bg-5 {
    background: linear-gradient(to right,
      #bd83b8 0%,
      #8e7caf 20%,
      #614385 80%,
      #614385 100%
    );
  }

  /* 横向滑动轨道 */
  .film-track-content {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100vw;
    height: 100dvh;
    pointer-events: auto;
  }

  /* 每一帧占满一屏 */
  .content-frame {
    flex: 0 0 100%;
    position: relative;
    scroll-snap-align: start;
  }

  .slide-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 90%;
    margin: auto;
    color: white;
    padding: 40px 20px;
  }
  .text-block {
    width: auto;
  }
  html[lang="en"] .hint-text::before {
    content: "Swipe to explore";
  }

  html[lang="zh"] .hint-text::before {
    content: "滑动浏览";
  }
  .scroll-hint {
    font-size: 1rem;
    bottom: 1rem;
    left: calc(50% - 0.5rem);
  }
  .animated-title {
    font-size: 2rem;
  }

  .animated-text {
    font-size: 1rem;
  }
  /*Slide 1*/
  .brandmark {
    height: 40dvh;
  }
  html[lang="zh"] #index-h1 {
    font-size: 1.5rem;
  }
  /*Slide 2*/
  .index-visual-img-wrapper {
    height: 40dvh;
  }
  /*Slide 5*/
    #html-index-dir-text > a {
    color: #82cfff;
  }
  #html-index-dir-text > a:hover {
    color: #82cfff;
    text-decoration-color: #82cfff;
  }
}