.HomePage {
  background: #111;
  overflow-x: hidden;
}

.HomeHeader {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  background: transparent;
  color: #fff;
}

.HomeHeader .menuToggle,
.HomeHeader .languageToggle {
  color: #fff !important;
}

.HomeHeader .menuToggle:hover,
.HomeHeader .menuToggle:focus-visible,
.HomeHeader .languageToggle:hover,
.HomeHeader .languageToggle:focus-visible {
  color: #fff !important;
  opacity: 0.72;
}

.HomeProjects {
  position: relative;
}
/* 全局悬浮标题 */
.globalProjectIntro{
  position: fixed;
  z-index: 45;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.HomeProject {
  position: relative;
  isolation: isolate;
  background: #111;
}

.projectStage {
  position: sticky;
  z-index: 0;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #222;
  contain: layout paint;
}

.projectStage::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image:
    linear-gradient(
      180deg,
      rgb(0 0 0 / 0.18),
      transparent 40%,
      rgb(0 0 0 / 0.28)
    ),
    var(--project-background);
  background-position: center;
  background-size: cover;
  content: "";
}

.projectBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.stageShade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-color: #6d665c !important;
  opacity: 0.5 !important;
  pointer-events: none;
  transition: opacity 0.28s ease-out;
}
.projectIntro {
  display: grid;
  justify-items: center;
  width: min(86vw, 900px);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.24);
  transition: none;
}

.projectIntroLogo {
  width: clamp(220px, 28vw, 520px);
  transform-origin: center;
  animation: introLogoReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
  width: 350px;
}

.projectIntroEyebrow,
.projectIntroMeta {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 2px;
}

.projectIntroTitle {
  margin: 15px 0 17px;
  font-size:78px;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  white-space: nowrap;
}

.projectFrames {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.contentScreen {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.tailScreen {
  position: relative;
  height: calc(var(--tail-screens, 0) * 100svh);
}

.screenText {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  color: #fff;
  font-size: clamp(16px, 1.5vw, 30px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.35);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  will-change: opacity;
}

.screenImage {
  --shift-x: 0px;
  --image-y: -50%;
  position: absolute;
  z-index: 3;
  top: 50%;
  width: clamp(280px, 40vw, 760px);
  max-height: 55svh;
  aspect-ratio: 0.82;
  object-fit: cover;
  box-shadow: 0 18px 45px rgb(0 0 0 / 0.22);
  opacity: 0;
  transform: translate3d(var(--shift-x), var(--image-y), 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.screenImage[data-side="left"] {
  left: 6%;
}

.screenImage[data-side="right"] {
  right: 6%;
}

.screenImage[data-size="wide"] {
  width: clamp(360px, 55vw, 1050px);
  aspect-ratio: 1.55;
}

.screenImage[data-position="top"] {
  --image-y: 0px;
  top: 10%;
}

.screenImage[data-position="bottom"] {
  --image-y: 0px;
  top: auto;
  bottom: 10%;
}

@keyframes introLogoReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  55% {
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media only screen and (max-width: 767px) {
  .HomeHeader .menuIcon {
    display: none;
  }

  .HomeHeader .menuToggle .menuText {
    display: inline;
  }

  .projectIntroLogo {
    width: min(70vw, 270px);
  }

  .projectIntroTitle {
    font-size: clamp(34px, 11vw, 52px);
  }

  .screenText {
    font-size: 20px;
  }

  .screenImage {
    width: 42vw;
    max-height: 42svh;
  }

  .screenImage[data-side="left"] {
    left: 5%;
  }

  .screenImage[data-side="right"] {
    right: 5%;
  }

  .screenImage[data-size="wide"] {
    width: 70vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projectIntroLogo {
    animation: none;
  }

  .screenImage,
  .screenText {
    will-change: auto;
  }
}