/* ===== Home页面整体布局 - header + main + footer = 100vh ===== */
body:has(.home-hero) {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body:has(.home-hero) main {
  flex: 1; /* main占据剩余空间 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===== Home hero base ===== */
.home-hero{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%; /* 占满main的100%高度 */
  flex: 1;
  background: #000;
  /* 为轮播准备 - 默认隐藏，JavaScript控制显示 */
  display: none;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

/* 第一张默认显示 */
.home-hero:first-of-type {
  display: flex; /* 使用flex以配合父容器 */
  opacity: 1;
}

.home-hero .bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 115%; /* 增加空间，为放大效果留空间 */
  top: -7.5%;
  left: -7.5%;
  width: 115%;
  object-fit: cover;
  z-index: 0;
}

/* 画面入场动画 - 对焦 + 放大（只播放一次） */
@keyframes heroEntrance {
  0% {
    filter: blur(20px); /* 开始时严重模糊 */
    transform: scale(1.05);
  }
  30% {
    filter: blur(0px); /* 快速对焦清晰 */
    transform: scale(1);
  }
  100% {
    filter: blur(0px); /* 保持清晰 */
    transform: scale(1.15); /* 缓慢放大到最终状态 */
  }
}

/* 所有画面都应用入场动画（轮播时会重新触发） */
.home-hero .bg {
  animation: heroEntrance 8s ease-out 0s 1 normal forwards;
}

/* desktop vs mobile bg 切换 */
.home-hero .home-bg-mobile{ display:none; }
@media (max-width: 768px){
  .home-hero{
    height: 100%; /* 移动端也占满main的100%高度 */
  }
  .home-hero .home-bg-desktop{ display:none; }
  .home-hero .home-bg-mobile{ display:block; }
}

/* overlay 全覆盖 */
.home-overlay{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: clamp(28px, 6vw, 70px);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===== Section 1: Niche Sheet ===== */

.home-niche .niche-overlay{
  justify-content: flex-start;
  padding-top: clamp(40px, 8vh, 90px); /* 恢复原来的高度 */
}

.home-logo-top img{
  width: clamp(140px, 16vw, 240px);
  height: auto;
  opacity: .95;
  margin-bottom: clamp(18px, 3vh, 30px); /* 恢复原来的间距 */
  /* Logo入场动画 - 从上方飘入 */
  animation: fadeInDown 1.2s ease-out 0.3s both;
}

.home-title{
  font-weight: 300;               /* 原图很细的字重 */
  letter-spacing: .12em;
  font-size: clamp(44px, 9vw, 140px);
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  /* 标题入场动画 - 从下方滑入 */
  animation: fadeInUp 1.4s ease-out 0.6s both;
}

/* Logo从上方飘入动画 */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 0.95;
    transform: translateY(0);
  }
}

/* 标题从下方滑入动画 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Section 2: Evolution in Action ===== */

.home-evolution .evolution-overlay{
  justify-content: flex-start;
  padding-top: clamp(40px, 8vh, 90px); /* 与第一张保持一致的padding-top */
}

/* 中间文字块 */
.evo-center-text{
  margin-top: clamp(158px, 19vh, 270px); /* 调整到与第一张标题同样的高度位置 */
  /* 约等于第一张的 logo高度(140-240) + margin-bottom(18-30) */
  /* 文字块整体淡入 */
  animation: fadeInScale 1.6s ease-out 0.5s both;
}

.home-title-2{
  font-weight: 300;
  font-size: clamp(28px, 6.5vw, 84px);
  margin: 0 0 clamp(6px, 1vh, 12px);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.home-title-3{
  font-weight: 300;
  font-size: clamp(18px, 4.6vw, 46px);
  opacity: .9;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* 文字块淡入+缩放动画 */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 左下 logo */
.home-logo-bottom{
  position: absolute;
  left: clamp(18px, 4vw, 60px);
  bottom: clamp(18px, 4vw, 55px);
}
.home-logo-bottom img{
  width: clamp(110px, 14vw, 220px);
  height: auto;
  opacity: .95;
  /* Logo从左下角滑入 */
  animation: slideInFromLeft 1.3s ease-out 0.8s both;
}

/* 从左侧滑入动画 */
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }
  100% {
    opacity: 0.95;
    transform: translateX(0);
  }
}

/* 右下脚注：避免覆盖正文 */
.home-footnote{
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  bottom: clamp(10px, 2.5vw, 28px);
  font-size: clamp(9px, 1.2vw, 12px);
  line-height: 1.35;
  max-width: min(520px, 60vw);
  opacity: .9;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  /* 脚注从右侧淡入 */
  animation: fadeInRight 1.5s ease-out 1.2s both;
}

/* 从右侧淡入动画 */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 0.9;
    transform: translateX(0);
  }
}

/* 小屏脚注更紧凑 */
@media (max-width: 768px){
  .home-footnote{
    max-width: 88vw;
    font-size: 9px;
    text-align: left;
    right: 50%;
    transform: translateX(50%);
  }
}

.home-evolution .home-overlay{
  position: absolute !important;
  inset: 0 !important;
}

/* ===== 交互增强效果 ===== */

/* 鼠标视差 - 为需要视差的元素添加类 */
.parallax-element {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* 滚动视差 - 背景层 */
.home-hero .bg.parallax-bg {
  will-change: transform;
}

/* 提升性能 - GPU加速 */
.home-hero .bg,
.home-logo-top img,
.home-title,
.evo-center-text,
.home-logo-bottom img,
.home-footnote {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 移动端优化 - 减少动画强度 */
@media (max-width: 768px) {
  /* 移动端减少缩放幅度 */
  .home-hero .bg {
    height: 110%; /* 减少到110% */
    width: 110%;
    top: -5%;
    left: -5%;
  }

  /* 移动端简化入场动画（更快完成） */
  .home-hero .bg {
    animation: heroEntranceMobile 6s ease-out 0s 1 normal forwards;
  }

  /* 移动端入场动画 - 缩放幅度更小 */
  @keyframes heroEntranceMobile {
    0% {
      filter: blur(15px); /* 模糊程度降低 */
      transform: scale(1.05);
    }
    30% {
      filter: blur(0px);
      transform: scale(1);
    }
    100% {
      filter: blur(0px);
      transform: scale(1.10); /* 放大幅度降低 */
    }
  }

  /* 移动端简化其他入场动画 */
  .home-logo-top img,
  .home-title,
  .evo-center-text,
  .home-logo-bottom img,
  .home-footnote {
    animation-duration: 0.8s;
  }
}

/* 尊重用户偏好 - 减少动画 */
@media (prefers-reduced-motion: reduce) {
  .home-hero .bg {
    animation: none;
  }

  .home-logo-top img,
  .home-title,
  .evo-center-text,
  .home-logo-bottom img,
  .home-footnote {
    animation: none;
    opacity: 1;
    transform: none;
  }
}