/* F 天安精灵品牌：页面专属。二改为图片优先（docs/PLAN-F页图片优先改版-2026-10-20.md）：
   每节一个标题、正文不超过 2 行，图片整张展示不裁切；版式不套前几个 case。
   自有类一律 bd- 前缀：case-kit 已占用 .stack、.dir 等短名，site.css 已占用 .card。
   --edge：满宽横向条带的左缘，和版心对齐；≥1240px 时版心让出左侧目录栏，条带在左缘处裁掉，不从目录下面穿过 */

.bd-mat,.bd-scene,.bd-ip{--edge:max(var(--g),calc((100% - var(--w)) / 2))}
@media (min-width:1240px){.bd-mat,.bd-scene,.bd-ip{--edge:calc((100% - min(var(--w),100% - 480px)) / 2)}}

/* ---------- 通用：节标题 ---------- */
.bd-k{display:flex;align-items:baseline;gap:10px;font-family:var(--sans);font-weight:200;font-size:var(--fs-kicker);line-height:1;color:var(--c2)}
.bd-k span{color:var(--red)}
.cx-sec[data-tone="dark"] .bd-k span{color:var(--red-hi)}
.bd-t{margin-top:18px;font-size:var(--fs-h2);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.bd-d{margin-top:18px;font-size:var(--fs-body);line-height:1.9;color:var(--c2)}
.bd-lab{display:block;margin-top:14px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--c3)}
.bd-nw{white-space:nowrap}   /* 标题里不该拆开的短语，窄屏整段换行 */
:where(.cx-sec) figure{margin:0}   /* 零权重：不能盖掉 .bd-full 的 margin:auto 居中 */

/* ---------- 封面：30 秒片铺满首屏，静音循环 ----------
   深色段（data-tone="dark"）：往下滚时 case-kit.js 把整页底色由黑混到白，brand.js 让视频按同一进度淡出，
   与「外观 → 场景」同一种转场，没有分界线，也不在视频上做固定渐隐。
   视口比 16:10 宽时铺满（cover）；更高的视口（竖屏手机、4:3 平板）整片居中（contain），上下露出深色底，片内左侧大字不被切。
   导航压在视频上时按身后画面亮度换色（brand.js 查亮度表切 #nav 的 .dark）。
   不加顶部压暗层：片子大半是浅色镜头，压暗会变成一条发灰的脏带。 */
/* 视频层固定在视口上，本节只占一屏高度：转场时视频原地淡出，下一节从它上面滚过来，视频下边缘不会出现在画面里 */
.bd-hero{padding:0;height:100vh;height:100svh}
.bd-hero-m{position:fixed;inset:0;overflow:hidden}
.bd-hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-aspect-ratio:16/10){.bd-hero-v{object-fit:contain}}
.bd-hero-ctl{position:absolute;z-index:2;right:max(var(--g),calc((100% - var(--w)) / 2));bottom:40px;display:flex;gap:10px}
.bd-hero-ctl button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(18,18,20,.64);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s var(--ease)}
.bd-hero-ctl button:hover{background:rgba(18,18,20,.82)}
.bd-hero-ctl button:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px rgba(18,18,20,.7)}
.bd-hero-ctl .i-play,.bd-hero-ctl .i-on,.bd-hero-play.is-paused .i-pause,.bd-hero-snd.is-on .i-off{display:none}
.bd-hero-play.is-paused .i-play,.bd-hero-snd.is-on .i-on{display:block}
.bd-hero-t{display:flex;flex-direction:column}
.bd-hero-t h1{margin-top:20px;font-size:var(--fs-display);line-height:1.05;font-weight:700;letter-spacing:-.02em}
.bd-hero-s{margin-top:16px;font-size:var(--fs-lead);color:var(--c2)}
.bd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 导航压在视频上：未选中项加深一档，文字加一圈与字色相反的柔光，画面细节多时也读得清 */
body.bd-on-hero .nav{--t3:rgba(17,18,20,.74)}
body.bd-on-hero .nav.dark{--t3:rgba(244,242,238,.86)}
body.bd-on-hero .nav .brand,body.bd-on-hero .nav .tab{text-shadow:0 0 3px rgba(255,255,255,.55),0 0 14px rgba(255,255,255,.75)}
body.bd-on-hero .nav.dark .brand,body.bd-on-hero .nav.dark .tab{text-shadow:0 0 3px rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.55)}
/* LUDI 按左侧画面单独换色（brand.js 加 .bd-w 白字 / .bd-k 黑字） */
body.bd-on-hero .nav .brand.bd-w{color:#F4F2EE;text-shadow:0 0 3px rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.55)}
body.bd-on-hero .nav .brand.bd-k{color:#111214;text-shadow:0 0 3px rgba(255,255,255,.55),0 0 14px rgba(255,255,255,.75)}
/* 视频压在目录下面时先藏起目录（键盘聚焦进去仍会显示） */
.toc{transition:opacity .35s var(--ease)}
body.bd-on-hero .toc:not(:focus-within){opacity:0;pointer-events:none}

/* ---------- 概况：标题 + 一段话（标题从封面挪下来） ---------- */
/* 顶部留 38vh：标题在转场后半段才滚进画面，不压在还没淡掉的视频字幕上；透明度由 brand.js 跟转场进度走 */
.bd-intro{padding:38vh 0 160px}
.bd-intro .bd-say{margin-top:120px}
.bd-say{font-size:clamp(24px,2.9vw,40px);line-height:1.6;font-weight:500;letter-spacing:-.005em}

/* ---------- 01 字标 ---------- */
.bd-word{margin:96px auto 0;width:min(760px,86%);text-align:center}
.bd-word img{width:100%;height:auto}
.bd-word figcaption{justify-content:center;margin-top:28px;color:rgba(255,230,194,.75)}
.bd-dirs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:110px}
.bd-dirs img{width:calc(25% - 11px);height:auto;border-radius:14px}
/* App 图标：三块同尺寸浅底，图按各自比例居中；环特写的白色边角是云朵内描边，用胶囊圆角藏掉 */
.bd-t3{margin-top:140px;font-size:clamp(24px,2.4vw,32px);line-height:1.3;font-weight:700}
.bd-ic3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.bd-ic-tile{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:20px;background:#efeae2}
.bd-ic-tile img{width:46%;height:auto}
.bd-ic-tile img.bd-pill{width:72%;border-radius:999px}
.bd-ic-tile img.ic{width:52%}
.bd-ic3 figcaption{margin-top:14px;font-size:var(--fs-card);line-height:1.7;color:var(--c2)}

/* ---------- 02 外观 ---------- */
.bd-full{width:min(var(--w),100% - var(--g) * 2);margin:64px auto 0}
@media (min-width:1240px){.bd-full{width:min(var(--w),100% - 480px)}}
.bd-full img,.bd-g3 img,.bd-g4 img,.bd-plan img{width:100%;height:auto;border-radius:20px}
.bd-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}

/* 拆解：外层 260vh，里面一屏 sticky，滚动进度换帧 */
.bd-x{height:260vh;padding:0}
.bd-x-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.bd-x-frames{position:relative;width:min(1100px,100% - var(--g) * 2,(100vh - 200px) * 1.6);aspect-ratio:1200/750;border-radius:24px;overflow:hidden;background:#e4dfd4}
.bd-x-frames img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.bd-x-frames img.on{opacity:1}
.bd-x-cap{text-align:center;font-size:var(--fs-body);color:var(--c2)}
.bd-plan{padding-top:40px}
.bd-plan figure{text-align:center}

/* ---------- 03 场景：横向拖拽。容器本身从 --edge 起步，左侧靠盒子边界裁切，右侧出血到屏幕边；
   不用 clip-path（滚动时每帧重绘，会卡） ---------- */
.bd-drag{display:flex;gap:20px;margin:56px 0 0 var(--edge);padding-right:var(--g);overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.bd-drag::-webkit-scrollbar{display:none}
.bd-drag.down{cursor:grabbing}
.bd-drag figure{flex:none}
.bd-drag img{display:block;height:min(62vh,580px);width:auto;max-width:none;border-radius:20px;pointer-events:none}

/* ---------- 04 物料 ---------- */
.bd-band{margin:64px 0 0 var(--edge);overflow:hidden}
.bd-band-in{display:flex;gap:16px;width:max-content;animation:bd-run var(--dur,60s) linear infinite}
.bd-band.bd-rev .bd-band-in{animation-direction:reverse}
.bd-band:hover .bd-band-in{animation-play-state:paused}
.bd-band img{flex:none;height:300px;width:auto;max-width:none;border-radius:16px}
.bd-band.bd-rev img{height:340px}
@keyframes bd-run{to{transform:translateX(calc(-50% - 8px))}}
.bd-band + .bd-lab{margin-top:14px}

.bd-pair{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;margin-top:100px;--ph:min(78vh,760px)}
.bd-long-in{height:var(--ph);overflow-y:auto;border-radius:24px;background:#f1ede6;scrollbar-width:none}
.bd-long-in::-webkit-scrollbar{display:none}
.bd-long-in img{display:block;width:100%;height:auto}
.bd-phone-in{position:relative;height:var(--ph);aspect-ratio:600/1298;border-radius:44px;border:10px solid #141516;overflow:hidden;background:#141516}
.bd-phone-in img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s var(--ease)}
.bd-phone-in img.on{opacity:1}
.bd-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:100px}

/* ---------- 05 短片 ---------- */
.bd-v{margin-top:56px}
.bd-v video{display:block;width:100%;height:auto;border-radius:20px;background:#0f1012}
.bd-v + .bd-v{margin-top:40px}

/* ---------- 06 IP：Masonry ---------- */
.bd-ip-roles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.bd-ip-roles > div{border-radius:24px;padding:26px 24px;border:1px solid var(--card-line)}
.bd-ip-roles .tt{background:linear-gradient(160deg,#fff1e6,#fde0cd)}
.bd-ip-roles .aa{background:linear-gradient(160deg,#eaf6f2,#d4ece5)}
.bd-ip-roles b{font-size:var(--fs-lead)}
.bd-ip-roles span{display:block;margin-top:8px;font-size:var(--fs-card);line-height:1.8;color:var(--c2)}
/* 推导链：复用 .bd-drag 拖动，每步一张同高浅底卡；图片吃掉卡内剩余高度、按比例缩放不裁切。宽卡放原型三选一 */
.bd-kch{margin-top:56px;align-items:flex-start}
.bd-kc{width:380px;height:min(64vh,560px);display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:24px;background:#faf5ef;border:1px solid var(--card-line)}
.bd-kc.wide{width:600px}
.bd-kch .bd-kc img{flex:1 1 0;min-height:0;width:100%;height:auto;object-fit:contain;border-radius:0}
.bd-kn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;line-height:1.6;color:var(--c3)}
.bd-kc figcaption{margin-top:auto;font-size:var(--fs-card);line-height:1.8;color:var(--c2)}
.bd-kw{flex:1;display:flex;align-items:center;font-size:34px;line-height:1.5;font-weight:700;letter-spacing:.02em;color:#b06248}
.bd-sw{list-style:none;margin:0;padding:0;display:grid;gap:12px;flex:1;align-content:center}
.bd-sw li{display:flex;align-items:center;gap:14px}
.bd-sw li::before{content:"";flex:none;width:56px;height:56px;border-radius:14px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.bd-sw b{font-size:var(--fs-card)}
.bd-sw span{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--c2)}
.bd-sw-vs{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:var(--fs-card);color:var(--c3)}
.bd-sw-vs i{width:18px;height:18px;border-radius:5px;background:var(--c)}
.bd-sw-vs i:last-of-type{margin-right:6px}
.bd-pr{margin:0;padding:16px;border-radius:14px;background:#1a1b1d;color:#e9e4dc;font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.bd-who{margin-top:28px}
/* 配网引导短片：复用 .bd-drag 拖动，视频高度比场景图矮一档 */
.bd-ipv{margin-top:48px}
.bd-ipv video{display:block;height:min(44vh,400px);width:auto;max-width:none;border-radius:20px;background:#f3e6da;pointer-events:none}
.bd-ipv figcaption{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;line-height:1.6;color:var(--c3)}
.bd-mas{display:grid;grid-template-columns:1fr 1.18fr;gap:16px;margin-top:40px}
/* 手册板留 3 张：竖图（姿态库）占左栏两行，两张横图叠在右栏；列宽 1 : 1.18 让两栏等高 */
.bd-mas figure:nth-child(2){grid-column:1;grid-row:1 / 3}
.bd-mas figure:not(:nth-child(2)){grid-column:2}
/* 线下一行：横图 + 竖图，列宽按宽高比 1.333 : 0.563 分，两张等高 */
.bd-mas2{grid-template-columns:1.333fr .563fr;margin-top:16px}
.bd-mas2 figure:nth-child(n){grid-column:auto;grid-row:auto}
.bd-mas figure{margin:0;border-radius:20px;overflow:hidden;position:relative;background:#fbeee4;
  transition:transform .5s var(--ease)}
.bd-mas figure:hover{transform:translateY(-4px)}
.bd-mas img{width:100%;height:auto}
.bd-mas figcaption{position:absolute;left:12px;bottom:12px;font-size:12px;line-height:1;color:var(--ink);background:rgba(255,255,255,.92);padding:6px 10px;border-radius:99px}

/* ---------- 收尾：夜景满屏 ---------- */
/* 不写死黑底：底色交给 case-kit 的整屏换色。顶部先留半屏空白让底色在空白处混到黑（同中间几次黑白场），
   夜景放在空白下面一整屏，透明度由 brand.js 跟同一转场进度淡入；顶部再留 25% 渐隐，和黑底接缝 */
.bd-end{--pre:50vh;height:calc(var(--pre) + 100vh);height:calc(var(--pre) + 100svh);min-height:calc(var(--pre) + 520px);padding:0;overflow:hidden}
.bd-end-i{position:absolute;left:0;right:0;bottom:0;top:var(--pre);width:100%;height:calc(100% - var(--pre));object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 25%);mask-image:linear-gradient(180deg,transparent 0,#000 25%)}
.bd-end::after{content:"";position:absolute;inset:auto 0 0;height:calc((100% - var(--pre)) / 2);background:linear-gradient(180deg,rgba(13,13,14,0),rgba(13,13,14,.7));pointer-events:none}
.bd-end-t{position:absolute;left:0;right:0;bottom:16vh;z-index:1;text-align:center;color:#fff;font-size:clamp(32px,4vw,56px);font-weight:700;letter-spacing:.04em}

/* ---------- 窄屏 ---------- */
@media (max-width:900px){
  .bd-hero-ctl{bottom:96px}
  .bd-hero-t h1{font-size:44px}
  .bd-hero-s{font-size:18px}
  .bd-intro{padding:34vh 0 90px}
  .bd-intro .bd-say{margin-top:72px}
  .bd-say{font-size:22px}
  .bd-say br{display:none}
  .bd-end-t{font-size:30px}
  .bd-dirs{margin-top:64px;gap:10px}
  .bd-dirs img{width:calc(50% - 5px)}
  .bd-word{margin-top:56px}
  .bd-g3{grid-template-columns:1fr}
  .bd-g4{grid-template-columns:1fr 1fr;margin-top:64px}
  .bd-x{height:200vh}
  .bd-drag img{height:52vw}
  .bd-ipv video{height:56vw}
  .bd-band img{height:200px}
  .bd-band.bd-rev img{height:180px}
  .bd-pair{grid-template-columns:1fr;gap:48px;margin-top:64px;--ph:70vh}
  .bd-phone{justify-self:center}
  .bd-ip-roles{grid-template-columns:1fr}
  .bd-t3{margin-top:88px}
  .bd-ic3{grid-template-columns:1fr;gap:28px}
  .bd-kch{align-items:stretch}
  .bd-kc{width:78vw;height:auto;min-height:420px}
  .bd-kch .bd-kc img{flex:none}
  .bd-kc.wide{width:86vw}
  .bd-kw{font-size:28px}
  .bd-who br{display:none}
  .bd-mas{grid-template-columns:1fr}
  .bd-mas figure:nth-child(n){grid-column:auto;grid-row:auto}
}

/* ---------- 减弱动效：不自动播放、不滚动换帧 ---------- */
@media (prefers-reduced-motion:reduce){
  .bd-band{overflow-x:auto}
  .bd-band-in{animation:none}
  .bd-x{height:auto;padding:80px 0}
  .bd-x-stage{position:relative;height:auto}
  .bd-phone-in img{transition:none}
}