/* ══ 工艺 3D 展示（工地直击页栏目）══
   栏目外壳沿用站点浅色（标题/引言/说明）；3D viewer 保持独立的深色工程图纸风格。
   依赖 site.css 的 :root 变量。
   2026-10-06 重做：影棚渐变背景（画布透明）+ HUD 容器 + 标签圆环/双层引线 + 品牌金强调色。 */

.craft-sec{padding:84px 0 40px;border-top:1px solid var(--line);margin-top:26px;scroll-margin-top:104px}
.craft-sec-head{max-width:760px;margin-bottom:30px}
.craft-sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,40px);margin-top:16px}
.craft-sec-sub{font-family:var(--serif);font-size:clamp(15px,1.7vw,19px);color:var(--muted);margin-top:10px;letter-spacing:.03em}
.craft-sec-intro{margin-top:18px;font-size:15px;color:#3a3a3a;line-height:1.85}
.craft-sec-note{margin-top:22px;font-size:12.5px;color:var(--muted-2);line-height:1.8}

/* —— 工艺切换标签（浅色，属站点）—— */
.craft-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.craft-tabs button{border:1px solid var(--line);background:transparent;color:#6a6a6a;
  font-family:var(--sans);font-size:13px;letter-spacing:.02em;padding:9px 20px;border-radius:30px;
  cursor:pointer;transition:.25s cubic-bezier(.22,.61,.36,1)}
.craft-tabs button:hover{border-color:var(--gold);color:var(--ink)}
.craft-tabs button.on{background:#141414;border-color:#141414;color:#fff}

/* ══ 3D viewer ══ */
.craft-viz{position:relative}
.craft-viz-stage{position:relative;border:1px solid #202834;border-radius:6px;overflow:hidden;
  aspect-ratio:16/10;
  /* 影棚渐变：顶部冷光 + 底部地台辉光，模型不再「浮在纯黑虚空里」。
     画布是 alpha 透明的，这层渐变直接透上去。 */
  background:
    radial-gradient(78% 52% at 50% -6%, rgba(126,166,224,.20), rgba(126,166,224,0) 72%),
    radial-gradient(135% 92% at 50% 116%, #2c3846 0%, #1b232e 34%, #111823 64%, #090c11 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.craft-viz-img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.craft-viz-play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px solid #c5a468;background:rgba(11,14,19,.80);color:#f0e6d2;
  font-family:var(--serif);font-size:15px;letter-spacing:.08em;padding:14px 32px;border-radius:40px;
  cursor:pointer;transition:.28s cubic-bezier(.22,.61,.36,1);backdrop-filter:blur(6px)}
.craft-viz-play:hover{background:#c5a468;color:#141414;border-color:#c5a468}
.craft-viz.is-loading .craft-viz-play{opacity:.5;pointer-events:none}
.craft-viz.is-live .craft-viz-img,.craft-viz.is-live .craft-viz-play{display:none}
.craft-viz-cap{margin-top:12px;font-size:12.5px;color:var(--muted-2);text-align:center}

/* —— HUD（结论 + 参数/KPI）：独立容器，桌面左右分布、窄屏上下堆叠 —— */
.craft-viz-hud{position:absolute;z-index:4;left:14px;right:14px;top:14px;display:flex;
  justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;visibility:hidden}
.craft-viz.is-live .craft-viz-hud{visibility:visible}

/* 结论浮层（左上） */
.craft-viz-verdict{max-width:min(340px,52%);padding:11px 14px;border-radius:9px;
  font-size:12.5px;line-height:1.62;background:rgba(16,21,29,.88);
  border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(12px);pointer-events:none}
.craft-viz-verdict b{display:block;margin-bottom:3px;color:#e8ecf2;font-weight:600}
.craft-viz-verdict.good{color:#7ee0b0;border-color:rgba(35,168,110,.42)}
.craft-viz-verdict.good b{color:#7ee0b0}
.craft-viz-verdict.bad{color:#ff9b88;border-color:rgba(224,85,63,.48)}
.craft-viz-verdict.bad b{color:#ff9b88}

/* 参数面板（右上）：参数表 + KPI */
.craft-viz-data{width:216px;flex:none;background:rgba(16,21,29,.88);
  border:1px solid rgba(255,255,255,.10);border-radius:9px;
  padding:11px 13px;backdrop-filter:blur(12px);pointer-events:none}
.craft-viz-table{width:100%;border-collapse:collapse;font-size:11.5px}
.craft-viz-table td{padding:4.5px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#8b98a9}
.craft-viz-table td:last-child{text-align:right;color:#eef2f7;font-weight:600;font-variant-numeric:tabular-nums}
.craft-viz-table tr:last-child td{border-bottom:none}
.craft-viz-kpi{display:flex;gap:6px;margin-top:10px}
.craft-viz-kpi div{flex:1;background:rgba(255,255,255,.05);border-radius:7px;padding:7px 4px;text-align:center}
.craft-viz-kpi b{display:block;font-size:14px;color:#e3c88f;line-height:1.2;font-variant-numeric:tabular-nums}
.craft-viz-kpi span{font-size:9.5px;color:#7a879a;display:block;margin-top:3px}

/* —— 底部控制条 —— */
.craft-viz-ui{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:15px 16px 13px;
  background:linear-gradient(to top,rgba(9,12,17,.97),rgba(9,12,17,.86) 62%,rgba(9,12,17,0));
  display:none;gap:14px;align-items:center;flex-wrap:wrap}
.craft-viz.is-live .craft-viz-ui{display:flex}
.craft-viz-ui .seg{display:flex;gap:6px;flex:none}
.craft-viz-ui .seg button{border:1px solid rgba(255,255,255,.16);background:transparent;color:#9aa7b8;
  font-family:var(--sans);font-size:12px;padding:7px 15px;border-radius:22px;cursor:pointer;transition:.2s}
.craft-viz-ui .seg button:hover{border-color:rgba(255,255,255,.34);color:#d5deea}
.craft-viz-ui .seg button.on{background:#c5a468;border-color:#c5a468;color:#141414;font-weight:600}
.craft-viz-ui .ctl{flex:1;min-width:180px}
.craft-viz-ui .ctl .lb{display:flex;justify-content:space-between;font-size:11.5px;color:#8b98a9;margin-bottom:5px}
.craft-viz-ui .ctl .lb b{color:#eef2f7;font-variant-numeric:tabular-nums}
.craft-viz-ui input[type=range]{width:100%;-webkit-appearance:none;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#3ecf8e,#41506a,#e0553f);outline:none}
.craft-viz-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.55)}
.craft-viz-ui .acts{display:flex;gap:6px;flex:none}
.craft-viz-ui .acts button{border:1px solid rgba(255,255,255,.16);background:transparent;color:#9aa7b8;
  font-family:var(--sans);font-size:11.5px;padding:7px 11px;border-radius:8px;cursor:pointer;transition:.2s}
.craft-viz-ui .acts button:hover{border-color:rgba(255,255,255,.34);color:#d5deea}
.craft-viz-ui .acts button.on{background:rgba(197,164,104,.20);border-color:rgba(197,164,104,.75);color:#e6cf9a}

/* —— 3D 标注：圆环锚点 + 深色衬线的彩色引线 —— */
.craft-lb-layer{position:absolute;z-index:5;inset:0;pointer-events:none;overflow:hidden}
.craft-lb-svg{position:absolute;z-index:5;inset:0;pointer-events:none;overflow:visible}
.craft-lb{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:11.5px;
  color:#ccd7e6;background:rgba(11,15,21,.87);border:1px solid rgba(255,255,255,.14);
  padding:4px 9px;border-radius:6px;pointer-events:none;transition:opacity .18s;
  box-shadow:0 2px 10px rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.craft-lb.hi{color:#a8c9ff;border-color:rgba(91,157,255,.5);background:rgba(14,24,40,.9)}
.craft-lb.warn{color:#ffb3a1;border-color:rgba(224,85,63,.52);background:rgba(38,18,16,.9)}
.craft-lb.ok{color:#8ce8bd;border-color:rgba(62,207,142,.5);background:rgba(10,32,25,.92)}
.craft-lb.dim{color:#7ee0b0;border-color:rgba(62,207,142,.62);background:rgba(10,30,23,.92);font-weight:600}

@media(max-width:980px){
  .craft-viz-data{width:186px;padding:9px 11px}
  .craft-viz-table{font-size:10.5px}
  .craft-viz-kpi b{font-size:12.5px}
}
@media(max-width:760px){
  .craft-sec{padding:58px 0 24px;scroll-margin-top:88px}
  .craft-tabs button{font-size:12px;padding:8px 15px}
  /* 窄屏给足高度：控制条 + HUD 会吃掉大量垂直空间，太矮的话模型被压成一条 */
  .craft-viz-stage{aspect-ratio:auto;height:min(74vh,560px);min-height:380px}
  /* HUD 改为上下堆叠：结论一行 + KPI 一行（不再用固定 top 叠在一起） */
  .craft-viz-hud{left:8px;right:8px;top:8px;flex-direction:column;gap:7px}
  .craft-viz-verdict{max-width:none;font-size:11px;padding:8px 10px;line-height:1.5}
  .craft-viz-verdict b{display:inline;margin:0 4px 0 0}
  .craft-viz-data{width:auto;padding:8px 10px}
  .craft-viz-table{display:none}
  .craft-viz-kpi{margin-top:0}
  .craft-viz-ui{gap:8px;padding:10px 11px}
  .craft-viz-ui .seg{width:100%}
  .craft-viz-ui .seg button{flex:1;padding:8px 5px;font-size:11.5px}
  .craft-viz-ui .ctl{flex:1 1 100%;min-width:0}
  .craft-viz-ui .acts{width:100%}
  .craft-viz-ui .acts button{flex:1;padding:8px 5px}
  .craft-lb{font-size:9.5px;padding:2px 5px}
}

/* ══ 视图切换：实景模拟 ⇄ 3D 构造剖面 ══
   两行 pill 会显得重，所以工艺 tab 用黑底、视图切换用品牌金，一眼分得开。 */
.craft-viz-switch{display:inline-flex;gap:2px;padding:3px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:30px;background:#faf8f3}
.craft-viz-switch button{border:0;background:transparent;color:#6a6a6a;font-family:var(--sans);
  font-size:13px;letter-spacing:.02em;padding:8px 20px;border-radius:24px;
  cursor:pointer;transition:.24s cubic-bezier(.22,.61,.36,1)}
.craft-viz-switch button:hover{color:var(--ink)}
.craft-viz-switch button.on{background:var(--gold);color:#141414;font-weight:600}
.craft-viz[data-view="sim"] .craft-sec-view{display:none}
.craft-viz[data-view="sec"] .craft-sim{display:none}

/* ══ 实景模拟：同机位一对图，拖把手左右擦除对比 ══
   两张图的机位由出图时锁定（图生图，参考图＝另一张），所以只有「做法」在变。 */
.craft-sim{position:relative}
.craft-wipe{position:relative;aspect-ratio:16/10;border:1px solid #202834;border-radius:6px;overflow:hidden;
  background:#0b0e13;cursor:ew-resize;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.craft-wipe-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none}
.craft-wipe-img.top{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.craft-wipe-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;
  background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.30),0 0 22px rgba(0,0,0,.5);
  outline:none;cursor:ew-resize}
.craft-wipe-handle:before{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(10,13,18,.72);
  border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(6px)}
.craft-wipe-handle:after{content:"\2194";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);color:#fff;font-size:16px;line-height:1}
.craft-wipe-handle:focus-visible{box-shadow:0 0 0 3px rgba(197,164,104,.95),0 0 22px rgba(0,0,0,.5)}
.craft-wipe-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap;
  font-size:12px;color:#eaeff5;background:rgba(10,13,18,.62);border:1px solid rgba(255,255,255,.16);
  padding:6px 14px;border-radius:20px;backdrop-filter:blur(8px);pointer-events:none;transition:opacity .35s}
.craft-wipe.moved .craft-wipe-hint{opacity:0}
.craft-wipe-ai{position:absolute;left:12px;top:12px;font-size:11px;letter-spacing:.02em;color:#f2e8d4;
  background:rgba(10,13,18,.55);border:1px solid rgba(197,164,104,.55);padding:4px 9px;border-radius:5px;
  backdrop-filter:blur(8px);pointer-events:none}
/* 图下两条对照说明：把手偏哪边，哪边亮 */
.craft-sim-info{display:flex;gap:10px;margin-top:12px}
.craft-sim-info .item{flex:1;border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  background:#fbfaf7;transition:.28s cubic-bezier(.22,.61,.36,1)}
.craft-sim-info .item b{display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--ink);margin-bottom:3px}
.craft-sim-info .item span{font-size:12.5px;color:var(--muted);line-height:1.6}
.craft-sim-info:not(.gsc-on) .item.old{border-color:#b9b9b9;background:#fff;
  box-shadow:0 8px 24px -18px rgba(0,0,0,.9)}
.craft-sim-info.gsc-on .item.gsc{border-color:var(--gold);background:#fffdf6;
  box-shadow:0 8px 26px -16px rgba(197,164,104,.85)}

@media(max-width:760px){
  .craft-viz-switch{width:100%}
  .craft-viz-switch button{flex:1;padding:8px 10px;font-size:12.5px}
  /* 窄屏 16:10 只有 244px 高，对比图看不出细节 → 4:3（两侧各裁掉约 12%，主体在中间） */
  .craft-wipe{aspect-ratio:4/3}
  .craft-wipe-handle:before{width:38px;height:38px}
  .craft-wipe-hint{font-size:11px;bottom:10px;padding:5px 11px}
  .craft-wipe-ai{left:8px;top:8px;font-size:10px;padding:3px 7px}
  .craft-sim-info{flex-direction:column;gap:8px}
  .craft-sim-info .item{padding:9px 12px}
}