/*
样式模块：Hero 双主图滚动交叉渐变

作用：把现有 .hero-device-showcase 扩展为 200vh 滚动区域，内部图片容器固定在视口中。
控制区域：首页顶部现有设备主图，不改变标题、按钮、标签、导航和后续模块。
关键参数：外层 height 控制滚动长度；sticky 的 height 控制主图停留高度。
如何调整：修改 200vh 可改变滚动距离，建议保持在 180vh 至 220vh 之间。
*/
.hero-device-showcase.hero-scroll-section {
  position: relative !important;
  left: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: 200vh !important;
  margin: -453px auto 481px !important;
  overflow: visible !important;
  transform: none !important;
}

.hero-device-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.hero-image-layer {
  position: absolute;
  inset: -48px 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  will-change: opacity, transform;
  transform-origin: 50% 60%;
}

.hero-image-layer img,
.hero-device-showcase.hero-scroll-section .hero-image-layer img {
  display: block !important;
  width: min(1240px, 96vw) !important;
  height: auto !important;
  max-width: none !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  clip-path: none !important;
  animation: none !important;
}

.hero-image-back {
  z-index: 1;
  opacity: 0;
  transform: scale(1);
}

.hero-image-front {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
}

/* 原有首屏文字、按钮、标签及贴图继续位于两张图片上方。 */
.section-header__content,
.support-os,
.hero-stickers {
  z-index: 3 !important;
}

/* Hero 释放 sticky 后预留交接空间，避免“使用场景”模块压住主图底部。 */
.hero-scroll-section + .product-panels,
.section-header + .product-panels {
  position: relative;
  z-index: 2;
  margin-top: 72px !important;
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* 清除原站 sticky 导航遗留的 64px top，避免首屏与“使用场景”发生视觉重叠。 */
  .section-header {
    top: 0 !important;
  }

  .section-header__content {
    width: 100% !important;
    max-width: 390px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
  }

  .section-header__title {
    font-size: clamp(38px, 10.5vw, 42px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
  }

  .section-header__desc {
    font-size: clamp(14px, 3.85vw, 16px) !important;
    line-height: 1.55 !important;
  }

  .section-header__button {
    width: min(176px, 68vw) !important;
  }

  /* 六个入口继续保持单行，但改为等宽网格，避免图标和文字被横向挤压。 */
  .support-os {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px !important;
    width: 100% !important;
    max-width: 390px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .support-os__item {
    width: 100% !important;
    min-width: 0 !important;
    height: 84px !important;
    padding: 10px 2px 8px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .support-os__icon-img {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 6px !important;
  }

  .support-os__icon-img--large {
    width: 35px !important;
    height: 35px !important;
  }

  .hero-stickers {
    width: 100% !important;
    max-width: 390px !important;
  }

  .hero-device-showcase.hero-scroll-section {
    left: auto !important;
    width: 100% !important;
    height: 175vh !important;
    margin: 8px 0 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .hero-image-layer img,
  .hero-device-showcase.hero-scroll-section .hero-image-layer img {
    width: 112vw !important;
    max-width: 460px !important;
    max-height: 100vh !important;
  }

  .hero-image-layer {
    inset: -150px 0 auto;
    align-items: center;
  }

  .hero-scroll-section + .product-panels,
  .section-header + .product-panels {
    margin-top: 40px !important;
  }
}

@media (max-width: 560px) {
  /* 挂绳继续保留在手机端，但缩小并贴向右边，避免压住两行主标题。 */
  .rb-lanyard-3d {
    width: 150px !important;
    height: 224px !important;
    top: 50px !important;
    right: -18px !important;
  }
}

@media (max-width: 370px) {
  .section-header__title {
    font-size: 37px !important;
  }

  .support-os {
    gap: 3px !important;
  }

  .support-os__item {
    height: 80px !important;
    font-size: 10px !important;
  }

  .support-os__icon-img {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image-layer {
    transform: none !important;
    will-change: opacity;
  }
}