/* ==========================================================================
   素材栏「三端样机」网页渲染组件（老齐 2026-10-23）
   --------------------------------------------------------------------------
   样机不再由 Python 生成静态图，改成纯 HTML/CSS 实时渲染：
   以后加素材只要导入原图，样机自动出现，永远同步。

   画布比例沿用旧静态图的 1440×1546，设备位置按百分比锁定，
   内部尺寸一律用 cqw（容器查询单位）—— 容器多大，样机就等比缩到多大。
   ========================================================================== */

.vkc-mock {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1546;
  overflow: hidden;
  container-type: size;
  background-color: #1f2024;
  /* 深灰底 + 中心柔和提亮（对齐旧静态图的径向光） */
  background-image:
    radial-gradient(ellipse 74% 70% at 55% 37%, rgba(88, 92, 104, 0.55), rgba(31, 32, 36, 0) 70%);
}

/* ---- 设备通用 ---- */
.vkc-mock .vkc-mock-device {
  position: absolute;
  /* 机身：深黑 + 金属描边 */
  background-color: #121214;
  box-shadow:
    0 1.6cqw 2.6cqw rgba(0, 0, 0, 0.55),
    0 0 0 0.14cqw #3a3b40,
    0 0 0 0.3cqw #1f2024;
}

/* 屏幕区：壁纸图裁切填充 */
.vkc-mock .vkc-mock-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* LQIP 模糊占位层（老齐 2026-10-24）
   真图是 loading="lazy" 异步到达，落地前设备屏只露出机身底色 #121214（死黑一片）。
   这里用 150px 缩略图铺底 + 轻微模糊 + 放大，图片到位后由 JS 加 .vkc-mock-img-ready
   让真图淡入覆盖 —— 观感从「闪黑」变成「由糊变清」。

   ⚠️ 必须用 <img> 元素而不是 CSS background-image：
      CSS 背景图属于低优先级资源，浏览器要等主体就绪才下载，
      切页瞬间根本来不及显示 —— 实测仍是一片死黑。改成 <img loading="eager"> 才抢得到。

   层级（同一 stacking context 内）：
     lqip  z-index 0  占位底图
     img   z-index 1  真图（淡入）
     notch z-index 2  刘海 / 状态条（在图之上）
   */
.vkc-mock .vkc-mock-lqip {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px) saturate(1.1);
  transform: scale(1.06);
  opacity: 0.9;
  transition: opacity .28s ease;
}

/* 真图：默认透明，根节点加 .vkc-mock-img-ready 后淡入
   （width/height/object-fit 与焦点位置合并在此，避免重复定义互相覆盖） */
.vkc-mock .vkc-mock-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .28s ease;
}

/* 焦点位置：与旧静态图一致（笔记本偏上、平板居中、手机偏上） */
.vkc-mock .vkc-mock-laptop .vkc-mock-img { object-position: 50% 40%; }
.vkc-mock .vkc-mock-tablet .vkc-mock-img { object-position: 50% 45%; }
.vkc-mock .vkc-mock-phone  .vkc-mock-img { object-position: 50% 30%; }

/* 真图：根节点加 .vkc-mock-img-ready 后淡入
   ⚠️ ready 类加在 .vkc-mock 根节点上（JS 里 mock.classList.add），
      所以是后代选择器 .vkc-mock-img-ready .vkc-mock-img，不能多套一层 .vkc-mock。 */
.vkc-mock.vkc-mock-img-ready .vkc-mock-img {
  opacity: 1;
}

.vkc-mock.vkc-mock-img-ready .vkc-mock-lqip {
  opacity: 0;
}

/* 壁纸图裁切填充
   ⚠️ 带 .vkc-mock 前缀提高特异性 —— 卡片区
   .vkc-asset-thumb img { width:100%; height:100%; object-fit:cover }
   会覆盖这里的 object-position（裁切焦点），导致三端取景全一样。 */
.vkc-mock .vkc-mock-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- 笔记本 ---- */
.vkc-mock-laptop {
  left: 11.11%;
  top: 4.53%;
  width: 77.08%;
  height: 49.16%;
  border-radius: 1.8cqw;
}

/* 笔记本底座：银色楔形 */
.vkc-mock-base {
  position: absolute;
  left: -2.4%;
  right: -2.4%;
  top: 100%;
  height: 1.9cqw;
  background: linear-gradient(180deg, #f5f6fa 0%, #c4c7ce 62%, #787b82 100%);
  clip-path: polygon(2.4% 0, 97.6% 0, 100% 100%, 0 100%);
  box-shadow: 0 0.5cqw 1.1cqw rgba(0, 0, 0, 0.45);
}

/* 屏幕顶部刘海条 */
.vkc-mock-notch {
  position: absolute;
  z-index: 2;   /* 在真图之上（老齐 2026-10-24 LQIP 改造） */
  background-color: #08080a;
  pointer-events: none;
}
.vkc-mock-notch-laptop {
  top: 0.2cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 13.2cqw;
  height: 1.1cqw;
  border-radius: 0.6cqw;
}

/* ---- 平板 ---- */
.vkc-mock-tablet {
  left: 4.03%;
  top: 45.21%;
  width: 55.97%;
  height: 38.87%;
  border-radius: 1.8cqw;
  z-index: 2;
}

/* 平板 Home 键：老齐 2026-10-24 要求去掉（样机底部徽标行上方那个突兀的圆圈），
   对应 DOM 已一并移除，此处只保留注释占位说明。 */

/* ---- 手机 ---- */
.vkc-mock-phone {
  left: 75.83%;
  top: 57.83%;
  width: 17.43%;
  height: 32.73%;
  border-radius: 2.4cqw;
  z-index: 3;
}

/* 手机刘海 */
.vkc-mock-notch-phone {
  top: 0.35cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 7.5cqw;
  height: 2.1cqw;
  border-radius: 1.05cqw;
}
/* 前摄 */
.vkc-mock-notch-phone::after {
  content: '';
  position: absolute;
  right: 0.5cqw;
  top: 50%;
  transform: translateY(-50%);
  width: 0.85cqw;
  height: 0.85cqw;
  border-radius: 50%;
  background-color: #1c1e24;
}

/* ---- 顶部状态栏（笔记本 / 平板）---- */
.vkc-mock-status {
  position: absolute;
  z-index: 2;   /* 在真图之上 */
  top: 0.7cqw;
  left: 1.5cqw;
  right: 1.5cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  color: #ffffff;
  font-family: 'Agency FB', Arial, 'Microsoft YaHei', sans-serif;
  pointer-events: none;
  text-shadow: 0 0.1cqw 0.3cqw rgba(0, 0, 0, 0.5);
}
.vkc-mock-status .vkc-mock-time {
  font-size: 1.5cqw;
  font-weight: 700;
  line-height: 1;
}
.vkc-mock-status .vkc-mock-date {
  font-size: 1.15cqw;
  font-style: normal;
  font-weight: 400;
  opacity: 0.9;
  line-height: 1;
}
/* 右侧一排小图标 */
.vkc-mock-tray {
  margin-left: auto;
  position: relative;
  width: 8.4cqw;
  height: 1.1cqw;
  background-image:
    radial-gradient(circle at 0.6cqw 0.55cqw, rgba(255,255,255,0.85) 0 0.5cqw, transparent 0.52cqw),
    radial-gradient(circle at 2.4cqw 0.55cqw, rgba(255,255,255,0.85) 0 0.5cqw, transparent 0.52cqw),
    radial-gradient(circle at 4.2cqw 0.55cqw, rgba(255,255,255,0.85) 0 0.5cqw, transparent 0.52cqw),
    radial-gradient(circle at 6cqw 0.55cqw, rgba(255,255,255,0.85) 0 0.5cqw, transparent 0.52cqw);
}
/* 电池 */
.vkc-mock-tray::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0.05cqw;
  width: 1.5cqw;
  height: 1cqw;
  border: 0.16cqw solid rgba(255, 255, 255, 0.85);
  border-radius: 0.16cqw;
}
.vkc-mock-status-tablet .vkc-mock-time { font-size: 1.4cqw; }
.vkc-mock-status-tablet .vkc-mock-date { font-size: 1.05cqw; }

/* ---- 手机锁屏（日期 + 大号时钟）---- */
.vkc-mock-lock {
  position: absolute;
  z-index: 2;   /* 在真图之上 */
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  font-family: 'Agency FB', Arial, 'Microsoft YaHei', sans-serif;
  text-shadow: 0 0.15cqw 0.4cqw rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.vkc-mock-lock-date {
  margin-top: 8.4cqw;
  font-size: 1.2cqw;
  font-style: normal;
  opacity: 0.9;
}
.vkc-mock-lock-time {
  margin-top: 0.5cqw;
  font-size: 4.4cqw;
  font-weight: 700;
  line-height: 1;
}

/* 手机底部快捷图标（手电筒 / 相机） */
.vkc-mock-quick {
  position: absolute;
  z-index: 2;   /* 在真图之上 */
  bottom: 2.6cqw;
  width: 2.4cqw;
  height: 2.4cqw;
  color: #ffffff;
  opacity: 0.92;
  filter: drop-shadow(0 0.1cqw 0.25cqw rgba(0, 0, 0, 0.5));
}
.vkc-mock-quick svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
}
.vkc-mock-quick-left  { left: 4.6cqw; }
.vkc-mock-quick-right { right: 4.6cqw; }

/* ---- 底部徽标行 ----
   布局对齐旧静态图：左「4K ULTRA HD」牌（x 3%~16%），
   右侧三系统图标紧跟其后（x 18%~38%），不是靠右对齐。 */
.vkc-mock .vkc-mock-badges {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.6%;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2.4cqw;
  padding: 0 3%;
  pointer-events: none;
}

/* 左：分辨率圆角牌（黑底白框） */
.vkc-mock .vkc-mock-res {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 13%;
  aspect-ratio: 188 / 122;
  padding: 0.4cqw 1cqw;
  border-radius: 1.25cqw;
  border: 0.34cqw solid #ffffff;
  background-color: rgba(20, 20, 22, 0.95);
  color: #ffffff;
  font-family: 'Agency FB', Arial, sans-serif;
  line-height: 1;
}
.vkc-mock .vkc-mock-res b {
  font-size: 4cqw;
  font-weight: 700;
}
.vkc-mock .vkc-mock-res i {
  margin-top: 0.35cqw;
  font-size: 1.6cqw;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 右：三系统徽标
   ⚠️ 选择器必须带 .vkc-mock 前缀提高特异性 —— 卡片区
   .vkc-asset-thumb img { width:100%; height:100% } 会把这里的图标撑满整格。 */
.vkc-mock .vkc-mock-os {
  display: inline-flex;
  align-items: center;
  gap: 2.4cqw;
}
.vkc-mock .vkc-mock-os img {
  width: auto;
  height: 6.4cqw;
  max-width: none;
  display: block;
  object-fit: contain;
}

/* ---- 详情页大样机：允许点开 ---- */
.vkc-asset-stage .vkc-mock {
  cursor: zoom-in;
}

/* ---- 移动端微调 ---- */
@media screen and (max-width: 680px) {
  .vkc-mock .vkc-mock-os { gap: 2.2cqw; }
  .vkc-mock .vkc-mock-os img { height: 6cqw; }
}