/* ============================================================ connect.css — 连接页布局与动效 结构参考 ATK HUB / IPI 网页驱动：产品居中在上、超大标题在下、 全页只有一个实心强调色按钮，其余全是留白与细线。 主视觉是 models/hero-mouse-ml.png —— 一张银白鼠标位图，放在暖棕黑舞台里。 它是 models/ML.png 去掉烤进画面的按键编号得到的，脚本见 gen/work/atk-capture/inpaint-digits.cjs。三张素材里只有 ML 没把品牌 logo 烤进 画面，偏偏它的编号紧贴着黑色侧键和滚轮，所以去编号只能用像素级遮罩，不能用 矩形框 —— 那套踩坑过程全写在脚本注释里，改图前先读它。 为什么必须配深底：银白机身放在近白底上会糊成一片、没有轮廓。深底加一小圈琥珀 柔光，机身才立得住 —— 和配置页那块 .device-view 是同一套语汇。 舞台的深色是【暖棕黑】（--stage #1a1613），和上一版的冷蓝黑不同： 浅色页配暖底才是一个色温，配冷底会像两块拼贴。 曾经试过内联手绘 SVG 鼠标（好处是能逐部件上色、逐部件做动画），但矢量画不出 产品渲染的质感，效果很差，已废弃。现在改回位图，动画全靠外面套的 HTML 元素做。 ============================================================ */ .device-gate{position:fixed;z-index:18;inset:72px 0 0;overflow:hidden} .cinematic-stage{ position:relative;display:flex;flex-direction:column; align-items:center;justify-content:center; height:100%;padding:24px 24px 92px; opacity:1; /* 默认可见：动效只做叠加，GSAP 挂了也不黑屏 */ } /* ---------- 产品主视觉：银鼠位图 + 暖棕黑圆角舞台 ---------- */ .stage-media{ position:relative;overflow:hidden; /* 给 .stage-sheen 当裁剪框 */ display:grid;place-items:center; flex:0 1 auto;min-height:0; padding:clamp(12px,3vh,32px) clamp(18px,4vw,48px); border-radius:var(--r-stage); background:linear-gradient(158deg,var(--stage-2) 0%,var(--stage) 62%); /* Double-Bezel：外圈一道发丝描边（0 0 0 1px）+ 顶部内高光（inset 0 1px 0）， 让深色面板像「嵌在托里的一块玻璃」，而不是一块平贴的色板。 */ box-shadow:0 0 0 1px rgba(255,246,235,.06),inset 0 1px 0 rgba(255,246,235,.08),var(--sh-stage); margin-bottom:clamp(8px,2.4vh,28px); } /* 舞台内的琥珀柔光：让鼠标「落」在光里，而不是浮在黑上。 ::before 也是子元素，按 DOM 顺序排在 .mouse-enter 之前 —— 自动在鼠标背后。 加了一层极缓的呼吸：静止画面上有东西在慢慢变，页面才不「死」。 */ .stage-media::before{ content:"";position:absolute;left:50%;top:50%; width:min(560px,58vw);height:min(560px,58vw); transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(circle,rgba(201,122,43,.22) 0%,rgba(201,122,43,.07) 42%,transparent 70%); } .mouse-enter{display:block;will-change:transform} .mouse-float{position:relative;display:block} .hero-mouse{ display:block;height:clamp(190px,33vh,330px);width:auto; /* 位图是去背后的 RGBA，边缘自带一圈半透明抗锯齿像素，配深底正好柔和过渡。 只要一点点投影把它从舞台上「抬」起来 —— 深底上给重了会显脏。 投影带暖棕色相，不用纯黑：纯黑阴影压在暖棕底上会发灰。 */ filter:drop-shadow(0 16px 22px rgba(30,20,12,.55)); } /* 鼠标跟随产生的倾斜容器。和 .mouse-enter / .mouse-float 分开三层， 各管一个 transform，互不覆盖： .mouse-enter 飞入 .mouse-float 常驻浮动 .mouse-tilt 光标视差 如果都写在一个元素上，后一条动画会整个吃掉前一条的 transform。 */ .mouse-tilt{display:block;will-change:transform} /* 扫过舞台的高光带。挂在舞台上而不是鼠标上：一是裁剪由舞台的 overflow:hidden 负责，不用自己算边界；二是位图内部没法逐部件做动画。 */ .stage-sheen{ position:absolute;top:-20%;left:0;width:34%;height:140%; pointer-events:none;transform:translateX(-120%); background:linear-gradient(100deg,transparent 0%,rgba(255,246,235,.06) 45%, rgba(255,246,235,.11) 50%,rgba(255,246,235,.06) 55%,transparent 100%); } /* 首屏就绪前先把要入场的元素藏起来。body 上的 booting 由 index.html 末尾 一段【内联】脚本摘掉 —— 内联、不依赖任何网络资源，所以不会出现 「外链 JS 没加载出来 → 永远白屏」。禁用 JS 时由