/* ===== 觅见：品牌页 → 百人成声（2026-10-13 用户确认的分镜） =====
   钉住，滚动进度 q 推进：品牌名/文案/链接 → 文案退场 → 照片里的人亮起、冒出访谈对话 → 光点变成访谈小窗墙
   → 小窗缩成方块、按主题排成横条（一格＝两场访谈）→ 停住，悬停横条看原话。可倒放。 */
.mjb{position:relative;height:760vh;background:#F6F7F9}
.mjb-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#F6F7F9}
/* 叠化到下面的五步演示：报告这一页变淡、变模糊、略后退（--x 由 JS 按五步演示升上来的进度写） */
.mjb.xfade .mjb-pin{opacity:calc(1 - var(--x,0));filter:blur(calc(var(--x,0) * 10px))}
.mjb-stage,.mjb-rep{transform:scale(calc(1 - var(--x,0) * .04));transform-origin:50% 45%}
/* 五步演示往上叠：开头这一屏和报告重叠，背景从透明渐变到实色，内容逐渐清楚 */
.mjb + .mj-flow{position:relative;z-index:2;margin-top:-100vh;background:linear-gradient(180deg,rgba(246,246,244,0) 0,#F6F6F4 70vh)}
.mjb + .mj-flow .ss-pin{opacity:var(--enter,1);filter:blur(calc((1 - var(--enter,1)) * 6px))}
.mjb-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:var(--pf,1);filter:saturate(calc(1 - (1 - var(--pf,1)) * .8))}
.mjb-dim{position:absolute;inset:0;background:rgba(246,247,249,.55);opacity:var(--dim,0)}
.mjb-shade{position:absolute;inset:0;opacity:var(--v,1);background:linear-gradient(90deg,rgba(248,248,246,.95) 0%,rgba(248,248,246,.88) 44%,rgba(248,248,246,.4) 62%,rgba(248,248,246,0) 78%)}
.mjb-brand{position:absolute;top:calc(69px + clamp(22px,4.6vh,52px));right:var(--gutter);display:flex;align-items:center;gap:10px;z-index:6;
  padding:8px 16px 8px 9px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(15px,1.1vw,19px);letter-spacing:.06em;color:#142235;
  opacity:var(--b,1);filter:blur(calc((1 - var(--b,1)) * 8px))}
.mjb-mark{width:28px;height:28px;border-radius:50%;border:5px solid #0E9F8E;position:relative;flex:none}
.mjb-mark::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#0E9F8E;left:5.5px;top:5.5px}
.mjb-brand small{font-weight:500;font-size:.78em;color:#0E9F8E;letter-spacing:.04em;margin-left:2px}
.mjb-copy{position:absolute;left:var(--gutter);top:52%;max-width:min(1500px,calc(100% - 2 * var(--gutter)));z-index:6;
  transform:translateY(calc(-50% + (1 - var(--t,1)) * 20vh - (1 - var(--o,1)) * 8vh));opacity:calc(var(--t,1) * var(--o,1));filter:blur(calc((1 - var(--t,1)) * 8px))}
.mjb-lead{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(20px,1.7vw,32px);color:#142235}
.mjb-h{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(26px,2.5vw,48px);line-height:1.38;letter-spacing:.02em;color:#142235;margin-top:clamp(18px,2.6vh,32px)}
.mjb-link{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(28px,4.4vh,52px);font-size:clamp(16px,1.15vw,20px);font-weight:500;color:#0B7F72;text-decoration:none;
  opacity:var(--l,1);transform:translateY(calc((1 - var(--l,1)) * 24px));border-bottom:1px solid transparent;padding-bottom:2px}
.mjb-copy{pointer-events:none}   /* 文案淡出后不能挡住下面报告的悬停；只有链接本身可点 */
.mjb-link{pointer-events:auto}
.mjb.link-off .mjb-link{visibility:hidden}
.mjb-link span{transition:transform .25s ease}
.mjb-link:hover,.mjb-link:focus-visible{border-bottom-color:currentColor}
.mjb-link:hover span{transform:translateX(5px)}

/* 舞台：光点 / 访谈小窗 / 方块共用一个元素，JS 每帧写 transform、圆角和内容透明度 */
.mjb-stage{position:absolute;inset:0;z-index:4;pointer-events:none}
.tk{position:absolute;left:0;top:0;width:144px;height:60px;transform-origin:0 0;background:#fff;will-change:transform,opacity;
  box-shadow:0 6px 18px -8px rgba(20,34,53,.28),0 0 0 1px rgba(20,34,53,.06);overflow:hidden}
.tk-in{position:absolute;inset:0;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-content:center;padding:0 11px;opacity:var(--c,0)}
.tk-av{grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;font-family:"CL Sans",var(--sys)}
.tk-wv{display:flex;gap:2px;align-items:center;height:12px}
.tk-wv i{width:2px;border-radius:1px;background:#9AA7B8}
.tk-q{font-size:11.5px;line-height:1.35;color:#2B3445;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.tk-dot{position:absolute;inset:0;border-radius:inherit;background:#0E9F8E;opacity:var(--d,1)}
.tk-glow{position:absolute;left:0;top:0;width:44px;height:44px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle,rgba(14,159,142,.45),rgba(14,159,142,0) 70%);transform-origin:center;pointer-events:none;will-change:transform,opacity}

.bub{position:absolute;left:0;top:0;max-width:300px;padding:9px 14px;border-radius:14px;font-size:14px;line-height:1.45;color:#142235;background:rgba(255,255,255,.94);
  box-shadow:0 10px 26px -12px rgba(20,34,53,.45);transform-origin:0 100%;white-space:nowrap;z-index:5;pointer-events:none}
.bub.ai{background:#0E9F8E;color:#fff}
.bub b{font-weight:700;margin-right:4px}

.mjb-wall{position:absolute;left:0;right:0;z-index:5;text-align:center;opacity:var(--w,0);pointer-events:none}
.mjb-wall p{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(22px,1.9vw,34px);color:#142235}
.mjb-wall small{display:block;margin-top:8px;font-size:15px;color:#6B7486;font-weight:400}
.mjb-wall .n{color:#0B7F72;font-variant-numeric:tabular-nums}

/* 报告 */
.mjb-rep{position:absolute;z-index:5;opacity:var(--r,0)}
.mjb-rep h3{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(26px,2.2vw,40px);color:#142235;letter-spacing:.02em}
.mjb-rep .meta{margin-top:8px;font-size:15px;color:#6B7486}
.mjb-rep .meta em{font-style:normal;color:#0B7F72}
.rw{position:absolute;left:0;display:flex;align-items:center;pointer-events:auto;cursor:default}
.rw-lab{position:absolute;right:calc(100% + 22px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:18px;font-weight:500;color:#142235;opacity:var(--k,0);text-align:right}
.rw-pct{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:20px;font-weight:700;color:#142235;font-variant-numeric:tabular-nums;opacity:var(--k,0)}
.rw-hit{position:absolute;left:-260px;top:-14px;bottom:-14px;border-radius:10px}
.rw.on .rw-hit{background:rgba(14,159,142,.07)}
.qt{position:absolute;z-index:7;width:440px;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 24px 50px -20px rgba(20,34,53,.45),0 0 0 1px rgba(20,34,53,.06);
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.qt.on{opacity:1;transform:none}
.qt h4{font-size:13px;color:#6B7486;font-weight:500;margin-bottom:10px}
.qt li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.55;color:#142235;padding:8px 0;border-top:1px solid #EEF0F3}
.qt li:first-child{border-top:0}
.qt .pl{flex:none;width:22px;height:22px;border-radius:50%;background:#0E9F8E;position:relative;margin-top:1px}
.qt .pl::after{content:"";position:absolute;left:8.5px;top:6px;border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.qt em{font-style:normal;color:#6B7486;font-size:12.5px;margin-left:auto;white-space:nowrap;padding-left:8px}
.mjb-note{position:absolute;right:16px;bottom:14px;font-size:12px;color:#6B7486;z-index:6}
@media (prefers-reduced-motion:reduce){.mjb{height:auto}.mjb-pin{position:relative}}