/* ============================================================
   ESEC 窗幕遮阳效果互动演示（Shading Simulator）
   交互：按住窗幕（或下轨）上下拖拽 → 展开/收起；松手停留
   背景图：北京 CBD · 中国尊（图源 Pexels，免费商用）
   ============================================================ */
.ss-scene{
  position:relative;overflow:hidden;border-radius:var(--r-lg,18px);
  aspect-ratio:16/9;max-height:560px;width:100%;
  background:#0c1420;box-shadow:0 18px 50px rgba(8,18,30,.25);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ss-bg{
  position:absolute;inset:0;
  background:url(../img/citic-sun.jpg) center 38%/cover no-repeat;
}
/* 太阳光晕：窗幕放下时同步减弱（JS 控制 opacity） */
.ss-glare{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 12%, rgba(255,250,225,.92), rgba(255,244,200,.35) 55%, transparent 78%),
    radial-gradient(60% 70% at 18% 12%, rgba(255,236,170,.28), transparent 70%);
  mix-blend-mode:screen;
}
/* 窗幕本体：银灰色金属化织物（半透 → 透景） */
.ss-fabric{
  position:absolute;left:0;right:0;top:0;height:0%;
  cursor:-webkit-grab;cursor:grab;touch-action:none;overflow:visible;
}
.ss-dim{ /* 织物后的减光层：背景透出但变暗 */
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(22,32,44,.52), rgba(28,40,54,.44));
}
.ss-weave{ /* 织纹：细密经纬 + 金属光泽 */
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(196,205,214,.30), rgba(160,172,184,.38)),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(64,76,90,.20)  0 1px, transparent 1px 4px);
  background-blend-mode:normal;
}
.ss-weave::after{ /* 底部微阴影，增强垂坠感 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(180deg, transparent, rgba(10,18,28,.22));
}
/* 下轨 = 拖拽把手 */
.ss-rail{
  position:absolute;left:-2px;right:-2px;bottom:-24px;height:48px;
  border-radius:10px;
  background:linear-gradient(180deg,#e8edf2,#b9c3cd 45%,#8d99a6);
  box-shadow:0 8px 22px rgba(8,18,30,.45), inset 0 1px 0 rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:600 13px/1 var(--font-sans,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif);
  color:#22303e;letter-spacing:.06em;
  outline:none;
}
.ss-rail:focus-visible{box-shadow:0 0 0 3px rgba(38,208,124,.65),0 8px 22px rgba(8,18,30,.45)}
.ss-rail .ss-grip{display:inline-flex;flex-direction:column;line-height:7px;font-size:15px;font-weight:700;color:#4a5a6a}
.ss-rail .ss-grip i{font-style:normal}
/* 品牌标识：手柄左侧中科能控 logo（深色文字版，浅色金属条上清晰；左置避开右上状态角标，2026-09-27） */
.ss-rail .ss-logo{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  height:28px;width:auto;pointer-events:none;
  opacity:.92;filter:drop-shadow(0 1px 1px rgba(8,18,30,.18));
}
/* 顶部卷轴（放下后可见） */
.ss-cassette{
  position:absolute;left:-2px;right:-2px;top:0;height:14px;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#2a3644,#141d28);
  box-shadow:0 4px 10px rgba(8,18,30,.4);
  opacity:0;transition:opacity .3s;
  pointer-events:none; /* 关键：不挡拖拽 */
}
/* 室内侧窗框：明确"从室内看出去"视角——窗幕装于玻璃室内侧，非外挂（2026-09-27） */
.ss-frame{
  position:absolute;inset:0;pointer-events:none;border-radius:var(--r-lg,18px);
  border:12px solid #17222e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.10), inset 0 12px 30px rgba(8,18,30,.30);
}
@media (max-width:720px){ .ss-frame{border-width:9px} }
/* 状态角标（top 下移避开收起态导轨上的品牌 logo，2026-09-27） */
.ss-chip{
  position:absolute;top:34px;right:14px;z-index:3;pointer-events:none;
  background:rgba(10,20,30,.66);color:#fff;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:8px 16px;font:600 13px/1 var(--font-sans,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif);
  letter-spacing:.04em;backdrop-filter:blur(4px);
  transition:background .4s;
}
.ss-chip.is-cool{background:rgba(16,92,58,.72);border-color:rgba(120,240,180,.4)}
/* 提示 */
.ss-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  background:rgba(10,20,30,.6);color:#fff;border-radius:999px;padding:9px 18px;
  font:500 13px/1 var(--font-sans,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif);
  white-space:nowrap;pointer-events:none;
  animation:ssFloat 2.2s ease-in-out infinite;transition:opacity .5s;
}
.ss-hint.off{opacity:0;animation:none}
@keyframes ssFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.ss-note{
  margin-top:14px;text-align:center;color:var(--ink-2,#5a6b7d);
  font-size:12.5px;letter-spacing:.02em;
}
@media (max-width:720px){
  .ss-scene{aspect-ratio:4/3;max-height:440px}
  .ss-rail{height:42px;bottom:-21px;font-size:12px}
  .ss-rail .ss-logo{height:20px;left:10px}
  .ss-chip{font-size:12px;padding:7px 12px;top:30px;right:10px}
  .ss-hint{font-size:12px;padding:8px 14px}
}

/* ============================================================
   变体：复合薄膜窗幕（data-fabric="bands"）
   严格按实拍参考图（微信图片_20260910213551）还原：
   - 薄膜条间距 ≈ 窗高 1/17（场景 560px → 32px/条）
   - 膜面平整高透（复合薄膜质感）：斜向光泽 + 1px 亮反光缝 + 微暗叠缝
   - 背景 = 蓝天大太阳 CBD 实景（AI 生成），放下后天空依然湛蓝
   ============================================================ */
.ss-scene[data-fabric="bands"] .ss-bg{
  background-image:url(../img/cbd-sunsoft.jpg);
  background-position:center 40%;
}
/* 遮蔽层增强：更明显的减光 + 漫射（blur 让太阳变柔光、画面均匀不刺眼） */
.ss-scene[data-fabric="bands"] .ss-dim{
  background:linear-gradient(180deg, rgba(44,64,86,.36), rgba(38,58,80,.28));
  backdrop-filter:blur(2.5px) saturate(.92) brightness(.95);
  -webkit-backdrop-filter:blur(2.5px) saturate(.92) brightness(.95);
}
.ss-scene[data-fabric="bands"] .ss-weave{
  background:
    /* 复合薄膜斜向光泽（弱化，避免叠加反光） */
    linear-gradient(115deg,
      rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 28%,
      rgba(255,255,255,.09) 50%, rgba(255,255,255,.02) 74%,
      rgba(255,255,255,.05) 100%),
    /* 薄膜条：平整膜面 29px + 1px 亮反光缝 + 2px 微暗叠缝（按参考图比例） */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.05) 0 29px,
      rgba(255,255,255,.14) 29px 30px,
      rgba(118,148,172,.10) 30px 32px);
}
.ss-scene[data-fabric="bands"] .ss-weave::after{
  background:linear-gradient(180deg, transparent, rgba(120,150,175,.08));
}
/* 背景图自带真实太阳光晕，CSS 光晕关闭避免叠加发白 */
.ss-scene[data-fabric="bands"] .ss-glare{
  background:none;
}
.ss-scene[data-fabric="bands"] .ss-rail{
  background:linear-gradient(180deg,#f4f7fa,#ccd6df 45%,#9dabba);
}


/* ============================================================
   拖拽光标：手掌反馈（2026-09-24）
   - 默认 grab（张开手掌）：整个模拟场景都是拖拽热区，光标反馈与可操作范围一致
   - 拖拽中 grabbing（握拳）：按下即锁定，指针移出场景也不变形
   - 触屏/触控笔无光标语义，降级为默认，避免部分安卓 WebView 出现怪异指针
   ============================================================ */
.ss-scene{cursor:-webkit-grab;cursor:grab}
.ss-scene .ss-fabric,.ss-scene .ss-rail{cursor:inherit}
.ss-scene.is-dragging,
.ss-scene.is-dragging .ss-fabric,
.ss-scene.is-dragging .ss-rail,
.ss-scene .ss-fabric:active,
.ss-scene .ss-rail:active{cursor:-webkit-grabbing;cursor:grabbing}
/* 拖拽过程中的全局光标锁：保证指针离开场景/经过任何子元素时反馈完全一致 */
html.zk-grabbing,
html.zk-grabbing *{cursor:-webkit-grabbing !important;cursor:grabbing !important}
@media (hover:none),(pointer:coarse){
  .ss-scene,.ss-scene .ss-fabric,.ss-scene .ss-rail{cursor:default}
  html.zk-grabbing,html.zk-grabbing *{cursor:default !important}
}