/* ==========================================================================
   适宇科技 · Guguke 移动端自适应补丁
   修复 scene1/scene2 中设备模型框（iPhone/Mac）使用 transform:scale() 导致
   布局宽度不缩、在 ≤768px 视口被 overflow:hidden 裁切丢失内容的问题。
   策略：移动端改用 zoom（影响布局尺寸）替代 transform:scale，让模型框真正缩小。
   ========================================================================== */

@media (max-width: 768px) {
  /* —— scene1：iPhone 模型框（393px, scale 0.8） —— */
  .s1-iphone-frame {
    /* transform:scale(0.8) 视觉 314px 但布局仍 393px；改 zoom 让布局也缩小 */
    transform: none;
    zoom: 0.78;
    /* zoom 后宽度 ~306px，适配 375px 视口 */
  }
  .s2-phone-frame {
    transform: none;
    zoom: 0.78;
  }

  /* —— scene2：iPhone 框 + Mac 框 —— */
  .s2-iphone {
    transform: none;
    zoom: 0.78;
  }
  .s2-mac {
    /* 840px 原始，scale 0.88 视觉 739px；移动端需更小 */
    transform: none;
    zoom: 0.42;
    /* 840 * 0.42 ≈ 353px，适配 375px 视口 */
  }

  /* —— 容器允许内容居中，避免 zoom 后留白偏移 —— */
  .s1-iphone-wrapper,
  .s2-phone-wrapper,
  .scene-row {
    justify-content: center;
  }

  /* —— 背景装饰光球：移动端缩小避免溢出 —— */
  .bg-orb {
    transform: scale(0.6);
  }
}

/* Firefox 不支持 zoom，回退用 transform + 负 margin（仅 Firefox 识别） */
@supports not (zoom: 1) {
  @media (max-width: 768px) {
    .s1-iphone-frame,
    .s2-phone-frame,
    .s2-iphone {
      transform: scale(0.78);
      transform-origin: top center;
      margin: 0 -11%;   /* 393*0.22/2 ≈ 43px → ~11% 补偿布局宽度 */
    }
    .s2-mac {
      transform: scale(0.42);
      transform-origin: top center;
      margin: 0 -29%;
    }
  }
}

/* 超窄屏（≤360px，如 320px 设备）：进一步缩小，避免两侧被裁 */
@media (max-width: 360px) {
  .s1-iphone-frame { zoom: 0.7; }
  .s2-phone-frame,
  .s2-iphone { zoom: 0.7; }
  .s2-mac { zoom: 0.35; }
}
@supports not (zoom: 1) {
  @media (max-width: 360px) {
    .s1-iphone-frame,
    .s2-phone-frame,
    .s2-iphone {
      transform: scale(0.7);
      margin: 0 -15%;
    }
    .s2-mac {
      transform: scale(0.35);
      margin: 0 -32.5%;
    }
  }
}

/* ===== 2026-07-22 场景二紧凑化：纵排堆叠导致区块过长(1536px) =====
   桌面端 iPhone/Mac 是并排叠放构图；移动端原方案简单纵排，
   两个设备模型全高相加把区块拉到约 1.8 屏。
   改为移动端也叠放：iPhone 在前居左，Mac 在后居右露出右半，
   高度从 1536px 压到约 1144px，终端演示仍可见可点。 */
@media (max-width: 768px) {
  #scene2-demo .s2-wrapper {
    position: relative;
    display: block;
    height: 580px;
    min-height: 0;
  }
  .s2-iphone {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -185px;
    transform: none;
    zoom: 0.60;
    z-index: 2;
  }
  .s2-mac {
    position: absolute;
    left: 50%;
    top: 255px;
    margin-left: -30px;
    transform: none;
    zoom: 0.33;
    z-index: 1;
  }
  .s2-demo-btn {
    bottom: 16px;
    z-index: 3;
    white-space: nowrap;
    width: auto;
  }
}