/* ===== 第二屏（Planet + Deer）===== */
.planet-hero {
  min-height: clamp(560px, 92svh, 900px);
  display: grid;
  place-items: center;
  background: transparent !important;
  /* 让出全局连续背景 */
  isolation: isolate;
  /* 抗 1px 接缝：微负 margin 压住容器交界 */
  margin-top: -100vh;
  /* 让第二屏叠加在第一屏上方，实现重叠过渡 */
  backface-visibility: hidden;
  transform: translateZ(0);
  position: relative;
  z-index: 10;
  /* 确保第二屏在第一屏之上 */
  pointer-events: none;
  /* 初始时不拦截鼠标事件 */
}

/* 两列：左文案 + 右视觉 */
.ph-wrap {
  --page-max: 1400px;
  --side-pad: clamp(16px, 4vw, 48px);
  --col-gap: clamp(24px, 5vw, 64px);

  width: min(var(--page-max), 100%);
  padding-inline: var(--side-pad);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  column-gap: var(--col-gap);
}

/* 标题（与先前一致的调性） */
.ph-title {
  margin: 0;
  line-height: 1.25;
  font-weight: 800;
  font-size: clamp(10px, 3.2vw, 42px);
  color: #226c59;
  margin-top: 200px;
  /* 上抬 */
  margin-left: 16px;
  /* 右移 */
}

/* 右侧视觉容器：为地球/鹿提供定位上下文 */
.ph-visual {
  position: relative;
  height: clamp(720px, 88vh, 1200px);
  min-height: 720px;

  /* 桌面默认：鹿的独立控制变量（与地球解耦） */
  --deer-w: clamp(360px, 48vw, 88px);
  --deer-right: clamp(-500px, 2.8vw, -80px);
  --deer-bottom: clamp(-120px, 2.5vw, -90px);
}

.ph-visual img {
  max-width: none;
  display: block;
}

/* 地球（绝对定位，不影响鹿） */
.ph-globe {
  position: absolute;
  bottom: clamp(-50px, 4vw, -16px);
  right: clamp(-80px, 1vw, -100px);
  width: clamp(680px, 58vw, 200px);
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .18));
  animation: globeFloat 7s ease-in-out infinite;
}

/* 鹿（使用变量控制，完全解耦于地球） */
.ph-deer {
  position: absolute;
  width: var(--deer-w);
  right: var(--deer-right);
  bottom: var(--deer-bottom);
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .12));
  animation: deerFloat 6.5s ease-in-out infinite;
}

/* 浮动动画 */
@keyframes globeFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

@keyframes deerFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-6px)
  }
}

/* 动效可访问性：系统开启“减少动效”则关闭动画 */
@media (prefers-reduced-motion: reduce) {

  .ph-globe,
  .ph-deer {
    animation: none;
  }
}

/* 性能提示： */
.ph-globe,
.ph-deer {
  will-change: transform, opacity;
}

/* 第二屏初始状态：完全透明，准备被JS控制入场 */
.planet-hero .ph-wrap {
  opacity: 0;
  pointer-events: auto;
  /* 内容区域恢复鼠标事件 */
}

/* 当第二屏激活后，恢复鼠标事件 */
.planet-hero.is-active {
  pointer-events: auto;
}


/* 让“弹性挤压”更自然：以视觉重心（偏下）作为变形原点 */
.ph-globe,
.ph-deer {
  transform-origin: 50% 80%;
  will-change: transform, opacity;
}

/* 动效可访问性：系统偏好“减少动效”则关闭入场动画抖动 */
@media (prefers-reduced-motion: reduce) {

  .ph-globe,
  .ph-deer {
    animation: none !important;
  }
}