/* ============================================================================
   04 展厅 —— 二版：复刻 uemo 参考单元 id/402 的结构 + 站内 ⑥「我们的设计」的标题排版
   2026-09-17 用户四点指令（含截图）：
     ① 「蓝色背景去掉」→ 去掉整幅品牌色底，走站点星空/黑底（标题区就成 ⑥ 那种黑底大白字）
     ② 「图二的文字排版参考图三」→ 标题区改抄站内 .ab179-awards-head：巨字 800 + 灰说明 + 药丸按钮（居中）
     ③ 「样板放图片用最新生成的」→ 三张卡配图换成最新那套展厅实拍（sq-2 / sq-4 / sq-5）
     ④ 「这里的白色背景要连接」（图五红框=白带与下一屏之间的黑缝）→ 白带从块底再往下探 240px 把缝盖白

   保留下来的参考单元（id/402）规格：4 张白卡（每张 (1200-3×19)/4 ≈ 285.75 宽、radius 20、padding 40、gap 19，卡内 =
   图标 26 左 + 编号 14/700 品牌色右 → 39px → 标题 24/700 #14151a → 16px → 说明 14/1.8 60%黑 → 1:1 配图贴卡底；
   第 2 张卡镜像=图在上）+ 两枚同心圆环装饰（1270/740，滚动 1→1.5，居中于块的 50%/50%）。

   ⚠️ 两处与参考单元的偏离（用户指令所致，见上 ①④）：
      · 底色：参考是整幅品牌色（#3452FF）→ 现在无底（星空），卡片与巨字直接落在黑底上
      · 白带：参考是 1920×800 的图层锚在 top 713px → 现在锚块底（bottom:-240px、高 41.667vw），
        为的是把屏级转场给下一屏 +7%（≈57px）位移露出的黑缝盖成白色，让白带与下一屏白底连成一片
   ⚠️ 标题/小标题选择器必须带 .scene-showroom 前缀：
      brand-about.css 的 `.scene-philosophy h2{font-size:clamp(44px,5vw,86px)}` 是 (0,1,1)，会压掉标题字号。
   ============================================================================ */

/* ⚠️ overflow 必须写成 (0,3,1)：prototype.css 的 `main>.proto-scene:not(.scene-hero){overflow:hidden}`
   是 (0,2,1)，裸类名压不动 —— 白带要靠 overflow:visible 才能探出块底盖住屏间黑缝。
   ⚠️ 同时本块已加 data-no-scene-transition（不进屏级转场）：转场会把整块（含白带）淡到 0.3、
   上移 8%，缝隙里就成灰的而不是白的。 */
main > .proto-scene.scene-showroom:not(.scene-hero){display:block;background:transparent;padding:0;
  min-height:0;position:relative;overflow:visible}

/* 白带：挂在卡片行内部（参考单元里卡片是「跨」在色带上的：带顶 = 卡片行 53% 处），
   并向下探出块底（-320px 相对卡片行 = 块底再下 240px）把屏间黑缝盖成白色。
   z-index:-1 → 落在 .swd-inner 这个 z-index:2 的栈内负层：压在卡片之下、块背景与圆环之上。 */
.swd-band{position:absolute;left:50%;top:53%;bottom:-320px;width:100vw;transform:translateX(-50%);
  background:#fff;z-index:-1;pointer-events:none}

/* 装饰同心圆环：浅色渐变洗 + 白描边。
   2026-09-17 用户「背后的圆圈要显示完整，然后透明度降低」→
     · 不裁（overflow:visible），且尺寸由 js 按块高算（外环 0.94×块高、内环 = 外环/1.716 保持参考比例），
       滚动缩放也收在 1→1.05 内 → 任何滚动状态圆形都在块内完整可见、不越到邻屏；
     · 描边 .1→.055、渐变洗 .16→.07（原来那圈灰雾就是渐变洗）。 */
.swd-decor{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.swd-ring{position:absolute;left:50%;top:50%;border-radius:50%;
  border:2px solid rgba(255,255,255,.055);
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 62%);
  transform:translate(-50%,-50%);will-change:transform}
.swd-ring--a{width:1270px;height:1270px}   /* 初值，js 会按块高改写 */
.swd-ring--b{width:740px;height:740px}

/* 2026-09-17 用户「展示图片的区域扩大，参考图一红框」：
   实测红框 = 页面内宽 1978px（页面 2488）→ 内容列从 min(1200px,…) 放到 min(1980px, 100%-12vw)。
   标题区不受影响（巨字/说明都是定宽居中文本）。 */
.swd-inner{position:relative;z-index:2;width:min(1980px,calc(100% - 12vw));margin:0 auto;padding:80px 0}

/* ---- 标题区：照抄 ⑥「我们的设计」的 .ab179-awards-head（巨字 6.3vw/800 + 说明 1.1vw #999 + 按钮 34px）---- */
.swd-head{position:relative;z-index:3;padding:0 6vw;text-align:center}
.scene-showroom .swd-title{margin:0;color:#fff;
  font-size:clamp(72px,6.3vw,190px);line-height:1.04;letter-spacing:-.02em;font-weight:800}
.swd-lead{margin:18px 0 0;color:#999;font-family:'Microsoft YaHei','微软雅黑',Arial,sans-serif;
  font-size:clamp(15px,1.1vw,26px);line-height:1.6}
.swd-head .action{margin-top:34px}

/* ---- 卡片（参考单元规格）---- */
.swd-cards{position:relative;margin-top:99px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px}
/* 2026-09-17 用户：「这里增加动画，然后四个展示展厅的框，下面增加一个阴影」
   → 卡片默认带底部投影（2026-09-17 二轮：用户「阴影太重，减少50%」→ 偏移/模糊/透明度整体减半）；
   悬停上浮 + 投影加深 + 配图轻微放大（入场阶梯由 js 做，不用 transition-delay 免得拖慢悬停）。 */
.swd-card{margin:0;padding:40px;background:#fff;border-radius:20px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(8,10,24,.03),0 14px 26px -14px rgba(8,10,24,.30);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1)}
.swd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.swd-ico{display:block;flex:0 0 auto;width:26px;height:26px;color:#14151a}
.swd-ico svg{display:block;width:100%;height:100%}
.swd-no{font-size:14px;line-height:1.6;font-weight:700;color:#584cd6;text-align:right}
.scene-showroom .swd-h{margin:39px 0 0;font-size:24px;line-height:1.4;font-weight:700;color:#14151a}
.swd-p{margin:16px 0 0;font-size:14px;line-height:1.8;color:rgba(20,21,26,.6)}
.swd-fig{margin:auto 0 0;width:100%;aspect-ratio:1/1;overflow:hidden;background:#f4f4f6}
.swd-fig img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.swd-card:hover .swd-fig img{transform:scale(1.045)}
/* 第 2 张卡：图在上、文字在下（参考单元同款镜像）；文字块吸底
   ⚠️ 用 order:-1 把图提到最前，不要用 column-reverse —— reverse 会把文字内部顺序也翻成 说明→标题→图标。 */
.swd-card--flip .swd-fig{order:-1;margin:0 0 54px}
.swd-card--flip .swd-top{margin-top:auto}

/* ---- 入场（JS 加 .swd-anim 后才预隐，无 JS 直接可见） ---- */
.swd-anim .swd-head,.swd-anim .swd-card{opacity:0;transform:translateY(38px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.swd-anim .swd-head.is-in,.swd-anim .swd-card.is-in{opacity:1;transform:none}
/* 悬停上浮（放在 .is-in 之后：同权重靠后生效，压得住入场动画写下的 transform:none） */
.swd-card:hover,
.swd-anim .swd-card:hover{transform:translateY(-8px)}
.swd-card:hover,
.swd-anim .swd-card:hover{box-shadow:0 3px 6px rgba(8,10,24,.06),0 24px 38px -18px rgba(8,10,24,.34)}

@media (max-width:900px){
  .swd-inner{width:calc(100% - 12vw);padding:60px 0}
  .scene-showroom .swd-title{font-size:15vw}
  .swd-head{padding:0 8vw}
  .swd-lead{font-size:14px;margin-top:14px}
  .swd-cards{margin-top:56px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}   /* 2026-09-11 用户「展示产品改成2行2列」：4 张卡 2×2 */
  .swd-card{padding:40px 30px}
  .swd-card--flip .swd-fig{margin-bottom:34px}
  .swd-band{bottom:-200px}
}
@media (prefers-reduced-motion:reduce){
  .swd-anim .swd-head,.swd-anim .swd-card{opacity:1;transform:none;transition:none}
  .swd-ring{transform:translate(-50%,-50%)!important}
}

/* 2026-09-17 用户「上下预留多点白色空间，现在很挤」：05 屏本体加高 + 内容区上下留白
   ⚠️ 选择器要写 (0,3,1)，压得过 index.html 内联 style 里那条 (0,2,1) 的 main>.proto-scene:not(.scene-hero) */
main > .proto-scene.scene-partners:not(.scene-hero){height:auto;min-height:calc(var(--scene-h,64svh) + 240px)}
.scene-partners .partners-inner{padding:120px 0}


/* ---------- 2026-09-11 用户手机端第六条：「上下间距太大，合作客户 LOGO 排列改成 4 行」 ----------
   原来 .partners-inner padding 120px 0 + 区块 min-height 顶高（64svh+240px）→ 手机上大片空白；
   手机上收窄内边距、高度交给内容，并多出两行跑马灯（.pw-row--extra，见 04-demo.html / index.html）。 */
@media (max-width: 900px) {
  main > .proto-scene.scene-partners:not(.scene-hero) { min-height: auto; }
  /* 2026-09-12 用户「红色框的部分要加间距」：标题↔logowall 之间、说明↔下一屏之间都再放开
     （原来 40/44 + 墙 margin-top 24，实测标题底到墙顶只有 -10px、说明底到区块底 56px）。 */
  .scene-partners .partners-inner { padding: 40px 0 132px; }
  .scene-partners h2 { font-size: clamp(26px, 6.6vw, 40px); }
  .partners-note { margin-top: 34px; }
}