/* ============================================================================
   wb-polish.css — 局部精修
   原则：不改动原有特效（canvas 苔藓场景、视差、像素揭示、液态金属按钮、
        3D 翻页曲线、动态模糊、放大镜等一律保留），只调整"不好看"的细节。
   目标：
     ① 第一屏：hero 两张白色卡片里的产品截图更清晰、有窗口质感、版面更平衡
     ② 第二屏：3D 翻页更跟手（合成层提升），版式细节更清爽
   ============================================================================ */

/* =========================== ① HERO 卡片 ================================== */

/* 截图容器：换掉原来的深绿底，改为与卡片协调的浅色底；
   加 1px 细边 + 顶部内阴影，让"截图"与"白色卡片"之间有明确边界。
   （与断点无关，移动端同样受益） */
#sylva-theme .card figure{
  background:#e7ebe4;
  box-shadow:
    inset 0 0 0 1px rgba(26,32,24,.16),
    inset 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(26,32,24,.09);
}

/* 图片：去掉原先"压灰"的滤镜，提高通透度与锐度；
   初始不再额外放大 1.08 倍，减少重采样造成的模糊；
   对齐画面顶部（窗口标题与主要内容所在处） */
#sylva-theme .portal-media img{
  transform:scale(1.015);
  object-position:center top;
  filter:saturate(1.05) contrast(1.10) brightness(1.01);
}
#sylva-theme .card:hover .portal-media img{
  transform:scale(1.05);
  filter:saturate(1.08) contrast(1.13) brightness(1.02);
}

/* ---- 桌面端：截图区加高 + 文字随之下移，卡片内"图 : 文"比例更协调 ----
   （移动端卡片是"文字左 / 小图右"的另一套版式，故不改其定位） */
@media (min-width:901px){
  /* 原 122u / 158u —— 图片比例 1080×685≈1.58，加高后不再被压成一条 */
  #sylva-theme .card--about figure{ height:calc(160 * var(--u)); }
  #sylva-theme .card--stove figure{ height:calc(180 * var(--u)); }

  /* 原 152u / 177u */
  #sylva-theme .card--about .label{ top:calc(178 * var(--u)); }
  #sylva-theme .card--about h2{ top:calc(203 * var(--u)); }
}

/* =========================== ② 3D 翻页 ==================================== */

/* 翻页时每帧都在改 transform 的图层，提前提升为合成层，避免逐帧重排/重绘；
   contain 把重绘范围限制在书本身 */
#sketchbook-theme .curl,
#sketchbook-theme .strip,
#sketchbook-theme .face{
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#sketchbook-theme .sb-book{ contain:layout paint; }
#sketchbook-theme .sb-cast{ will-change:opacity; }
/* 放大镜像层是纯副本，隔离其绘制 */
#sketchbook-theme .zoomwrap{ contain:strict; }

/* 顶部说明文字原来太淡，压不住整页留白。
   注意：只在宽屏加大，窄屏沿用原字号，否则会溢出屏幕 */
@media (min-width:641px){
  #sketchbook-theme .hero-kicker{
    font-size:13px;
    letter-spacing:.20em;
    color:rgba(43,39,33,.62);
  }
  #sketchbook-theme .sb-hint{
    font-size:11.5px;
    color:rgba(43,39,33,.46);
  }
}

/* ==================== ③ 窄屏（手机）第一屏卡片 ==========================
   手机版式是"文字在左 / 小图在右"，原图框是 224u×218u（近正方形），
   而截图是 1080×685（1.58）—— 被 cover 裁掉左右 35%，只剩中间一条，
   比桌面端还糊。这里把图框改成接近原图的比例，并把文字宽度收窄让位。 */
@media (max-width:900px){
  #sylva-theme .card--about figure{
    width:calc(300 * var(--u));
    height:calc(190 * var(--u));
  }
  #sylva-theme .card--about h2{
    width:calc(320 * var(--u));
  }
}