/* ==================== 空间海报（2026-10-21 晚） ====================
   一座夜里的灯会。真实灯组抠图后按纵深摆放；滚动时镜头向前推，穿过灯组。
   全站只有这一种运动：镜头前进 + 灯从暗到亮。各页首屏共用 .sp-hero，场景位置写在 .sp-home / .sp-lantern / .sp-dino 里。 */
:root{--lamp-n:#e0262c;--haze:#0f1a33;--P:1000px;--top-h:76px;--mbar-h:0px;--sh:calc(100svh - var(--top-h) - var(--mbar-h))}
@media (max-width:700px){:root{--top-h:64px;--mbar-h:calc(52px + env(safe-area-inset-bottom,0px))}}

/* ---------- 首屏 ---------- */
.sp-hero{position:relative;height:200vh;background:var(--night);color:#fff}
/* 顶栏是 sticky 的，手机底部还有固定的联系栏：舞台只占两者之间的那一段 */
.sp-stage{position:sticky;top:var(--top-h);isolation:isolate;height:calc(100vh - var(--top-h) - var(--mbar-h));height:calc(100svh - var(--top-h) - var(--mbar-h));overflow:hidden;
  background:radial-gradient(120% 80% at 62% 40%,var(--sp-haze,var(--haze)) 0%,var(--night) 62%)}
.sp-scene{position:absolute;inset:0;perspective:var(--P);perspective-origin:50% 45%}
.sp-world{position:absolute;inset:0;transform-style:preserve-3d}
/* --ex / --ey：离场时额外的位移（space.js 按 data-exit 推动），平时是 0 */
/* --g / --o：同一张照片里抠出来的主角以脚下那一点（--o）为中心放大（--g），盖住照片里原来的它（space.js 的 scene） */
.sp-ly{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:translate(-50%,-50%) translate3d(calc(var(--x,0px) + var(--ex,0px)),calc(var(--y,0px) + var(--ey,0px)),var(--z,0px)) scale(var(--g,1)) rotate(var(--r,0deg));transform-origin:var(--o,50% 50%)}   /* --r：飞天往上飞时身子轻轻摆动（10-26） */
.sp-ly img,.sp-ly video{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.sp-ly:not(.sp-title),.hp-depth:not(.card){pointer-events:none}
.sp-lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.sp-title{width:100vw;height:calc(100svh - var(--top-h) - var(--mbar-h));pointer-events:none}
.sp-title .h1{position:absolute;left:var(--gut);top:18vh;margin:0;font-family:var(--poster);font-weight:900;font-size:clamp(44px,6.6vw,112px);
  line-height:1.04;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.55);white-space:nowrap}
.sp-title .h1{pointer-events:auto}
.sp-title .h1 em{font-style:normal;color:var(--lamp-n)}
.sp-title .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 说明和按钮不进 3D，背后垫一层暗色，任何时候都看得清 */
.sp-copy{position:absolute;left:var(--gut);bottom:clamp(28px,7vh,80px);z-index:5;max-width:31em}
.sp-copy::before{content:"";position:absolute;inset:-40px -60px -40px calc(-1 * var(--gut));z-index:-1;background:radial-gradient(closest-side,rgba(7,8,12,.85),rgba(7,8,12,0))}
.sp-copy .crumb{padding:0 0 14px;color:rgba(255,255,255,.65)}
.sp-copy .crumb a,.sp-copy .crumb i,.sp-copy .crumb span{color:rgba(255,255,255,.65)}
.sp-copy p{margin:0 0 24px;color:var(--night-text);font-size:clamp(16px,1.25vw,19px)}
.sp-copy .btns{display:flex;flex-wrap:wrap;gap:12px}
.sp-copy .btn.ghost{background:transparent;border:1px solid rgba(243,241,236,.5);color:#fff;padding:12px 24px;min-height:48px;font-size:15px}   /* inner.css 把 .btn.ghost 做成了下划线链接（内边距 0），这里补回按钮的样子，和左边的红按钮一样高 */
.sp-copy .nw{white-space:nowrap}
.sp-copy .btn.ghost:hover{border-color:#fff}
.sp-copy .btn.lamp{background:var(--lamp-n);border-color:var(--lamp-n)}

/* 首页：灯海（最远）→ 楼阁圆月 → 飞天 → 标题 → 凤凰 → 莲花彩船（近） */
/* 10-25（小样 C）：最远处加一片灯海（layers.mjs 的 fest，自贡灯会宫殿灯组压暗模糊、自带倒影），把左边和上方的黑空填成“远处一片灯会”；
   夜色底部加一层暖色灯光雾，和灯海同一个光源 */
.sp-home .sp-stage{background:radial-gradient(70% 38% at 60% 74%,rgba(150,52,20,.32) 0%,rgba(150,52,20,0) 70%),radial-gradient(120% 80% at 62% 40%,var(--sp-haze,var(--haze)) 0%,var(--night) 62%)}
.sp-home .l-fest{--x:10vw;--y:27vh;--z:-1400px;width:200vw}
.sp-home .l-pavilion{--x:20vw;--y:-9vh;--z:-900px;width:170vw}
.sp-home .l-feitian{--x:21vw;--y:-30vh;--z:-380px;width:58vw}   /* 10-25 往右让、稍放大：彩带不再压“全世界” */
.sp-home .l-phoenix{--x:33vw;--y:4vh;--z:60px;width:min(66vh,40vw)}
/* 三组荷花灯：中间一组、近处两朵（第四轮去掉了远处那朵）；都在水面上，倒影是 .sp-reflect 按图层自己镜像的 */
/* 10-25：荷花组、荷叶右移，让出左下的说明和按钮（原来“从设计、生产”压在粉莲花上） */
.sp-home .l-lotus-group{--x:4vw;--y:19vh;--z:-160px;width:24vw}
.sp-home .l-lotus-white{--x:42vw;--y:31vh;--z:160px;width:14vw}
.sp-home .l-lotus-leaf{--x:7vw;--y:36vh;--z:220px;width:15vw}
.sp-home .sp-copy{max-width:27em}
.sp-home .sp-copy p{font-size:clamp(16px,1.2vw,18px);line-height:1.75}
.sp-home .sp-title .h1{font-size:clamp(40px,5.2vw,88px)}   /* 新口号第二行有十个字，字号比原来小一号 */
/* 口号背后垫一层暗色：第二行变长以后会压到飞天的彩带，“全世界”的红字要看得清。暗色在标题这一层里，只压后面的灯组，前面的凤凰不受影响 */
.sp-home .sp-title .h1 em{text-shadow:0 0 10px rgba(7,8,12,.95),0 0 24px rgba(7,8,12,.9),0 2px 30px rgba(0,0,0,.55)}   /* 红字周围再压暗一圈，压在彩带上也看得清 */
.sp-home .sp-title .h1::before{content:"";position:absolute;inset:-50px -80px -50px calc(-1 * var(--gut));z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(7,8,12,.78),rgba(7,8,12,0))}
.sp-home .l-boat{--x:20vw;--y:23vh;--z:220px;width:31vw}   /* 10-25 上提：整条船身露出来 */
.sp-reflect{position:absolute;left:0;top:94%;width:100%;height:50%;pointer-events:none}
/* 荷花的图片底部就是灯座，倒影从灯座正下方开始，不盖住灯座 */
[class*="l-lotus-"] .sp-reflect{top:99%}
/* 图层边缘渐隐，不露出矩形边界（38 号文档第 3 条）：楼阁底下的钢平台（镜头推进时露出来像一块黑板）、湖面顶边、
   彩船底部左右两边的荷花和水面。只遮图片，彩船的倒影（.sp-reflect）挂在图层外面，不受影响 */
.sp-home .l-pavilion img{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 82%);mask-image:linear-gradient(180deg,#000 50%,transparent 82%)}
.sp-home .l-lake img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
.sp-home .l-boat img{-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 78%),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,#000 58%,transparent 78%),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
/* 首页首屏的龙俯冲（2026-10-22，38 号文档第五节）：在 3D 空间之外，space.js 跟着滚动把它从夜空深处拉到镜头前；
   .sp-dim 是盖在灯会上的夜色，龙冲近时灯会暗下去，最后全黑（灯熄），接下一屏的龙睁眼。减少动态效果、低配设备不显示 */
.sp-home{height:300vh}
.sp-dim{position:absolute;inset:0;z-index:3;background:var(--night);opacity:0;pointer-events:none}
.sp-dive{position:absolute;left:50%;top:50%;z-index:4;width:min(56vw,44vh);opacity:0;pointer-events:none}
.sp-dive img{display:block;width:100%;height:auto}
.sp-cap{position:absolute;left:var(--gut);top:22%;z-index:5;margin:0;opacity:0;pointer-events:none;
  font:900 clamp(30px,3.6vw,56px)/1.25 var(--poster);letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
html:not(.sp-dive-js) .sp-dim,html:not(.sp-dive-js) .sp-dive,html:not(.sp-dive-js) .sp-cap{display:none}
/* 彩灯页：科威特塔（远）→ 新月灯组 → 标题 → 骆驼 → 鹿群（近） */
.sp-lantern{--sp-haze:#1d1630}
.sp-lantern .l-kw-towers{--x:34vw;--y:-16vh;--z:-900px;width:56vw}
.sp-lantern .l-kw-crescent{--x:12vw;--y:4vh;--z:-420px;width:80vw}
.sp-lantern .l-kw-camel{--x:27vw;--y:12vh;--z:140px;width:34vw}
.sp-lantern .l-kw-deer{--x:20vw;--y:41vh;--z:260px;width:74vw}
/* 产品图册（10-26）：三条产品线各一件，从远到近——彩灯龙头（压暗）→ 七彩凤凰 → 标题 → 张嘴的双冠龙；彩灯暖、恐龙冷，中间夹神兽 */
.sp-prod{--sp-haze:#1e1426}
.sp-prod .l-dragon-head26{--x:4vw;--y:-20vh;--z:-760px;width:54vw}
.sp-prod .l-phoenix-rainbow{--x:36vw;--y:-6vh;--z:-300px;width:26vw}
.sp-prod .l-dilo-frill{--x:16vw;--y:22vh;--z:120px;width:26vw}
/* 机模页：恐龙从黑暗里一层层走出来 */
.sp-dino{--sp-haze:#14201a}
.sp-dino .l-video{--x:16vw;--y:-2vh;--z:-700px;width:150vw}
.sp-dino .l-video video,.sp-dino .l-video .still{width:100%;aspect-ratio:16/9;object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)}
.sp-dino .l-video video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.sp-dino .l-video video,.sp-dino .l-video .still{filter:saturate(1.35) brightness(1.3) contrast(1.05)}
.sp-dino .l-video video.on{opacity:1}
.sp-dino .l-trex-purple{--x:-14vw;--y:16vh;--z:-420px;width:70vw}
.sp-dino .l-trex-giant{--x:31vw;--y:13vh;--z:120px;width:72vw}

/* 竖屏（手机、竖放的平板）：纵深变浅，标题在上，按钮在下 */
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  :root{--P:700px}
  .sp-hero{height:210vh}
  .sp-home{height:300vh}
  .sp-cap{top:9%;font-size:clamp(28px,8vw,40px)}
  .sp-title .h1{top:15vh;font-size:clamp(40px,11vw,64px);white-space:normal;right:var(--gut)}
  .sp-copy{right:var(--gut)}
  .sp-copy::before{background:radial-gradient(closest-side,rgba(7,8,12,.9),rgba(7,8,12,0));inset:-60px -40px -50px calc(-1 * var(--gut))}
  .sp-home .l-fest{--x:10vw;--y:6vh;width:420vw}
  .sp-home .l-pavilion{--x:30vw;--y:-14vh;width:300vw}
  .sp-home .l-feitian{--x:12vw;--y:-27vh;width:132vw}
  .sp-home .l-phoenix{--x:26vw;--y:3vh;width:54vw}   /* 在口号下面，不压“全世界” */
  .sp-home .l-lotus-group{--x:-22vw;--y:10vh;width:52vw}
  .sp-home .l-lotus-white{--x:36vw;--y:12vh;width:26vw}
  .sp-home .l-lotus-leaf{--x:-26vw;--y:22vh;width:36vw}
  .sp-home .sp-title .h1{font-size:clamp(28px,8.4vw,60px);white-space:nowrap;right:auto}
  .sp-home .l-boat{--x:10vw;--y:7vh;width:54vw}
  /* 10-25：竖屏的说明和按钮原来压在彩船和莲花上。改成从底部往上、铺满全宽的一层夜色，灯组在它上面露出来 */
  .sp-home .sp-copy{max-width:none}
  .sp-home .sp-copy p{max-width:32em}
  .sp-home .sp-copy::before{inset:-110px calc(-1 * var(--gut)) calc(-1 * clamp(28px,7vh,80px)) calc(-1 * var(--gut));
    background:linear-gradient(0deg,rgba(7,8,12,.94) 0%,rgba(7,8,12,.88) 55%,rgba(7,8,12,0) 100%)}
  .sp-lantern .l-kw-towers{--x:24vw;--y:-16vh;width:120vw}
  .sp-lantern .l-kw-crescent{--x:8vw;--y:-6vh;width:170vw}
  .sp-lantern .l-kw-camel{--x:20vw;--y:2vh;width:70vw}
  .sp-lantern .l-kw-deer{--x:0vw;--y:36vh;width:160vw}
  .sp-prod .l-dragon-head26{--x:-6vw;--y:-10vh;width:120vw}
  .sp-prod .l-phoenix-rainbow{--x:26vw;--y:6vh;width:52vw}
  .sp-prod .l-dilo-frill{--x:-14vw;--y:14vh;width:56vw}
  .sp-dino .l-video{--x:10vw;--y:-6vh;width:320vw}
  .sp-dino .l-trex-purple{--x:-10vw;--y:-6vh;width:150vw}
  .sp-dino .l-trex-giant{--x:30vw;--y:8vh;width:170vw}
  .sp-copy .crumb{display:none}
}

/* ---------- 首页各屏：夜里的海报 ---------- */
.hp{position:relative;background:var(--night);color:var(--night-text);overflow:hidden}
.hp h2{font-family:var(--poster);font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:0;color:#fff;font-size:clamp(36px,5vw,84px)}
.hp h2 em{font-style:normal;color:var(--lamp-n)}
.hp p{color:var(--night-dim);max-width:30em;margin:22px 0 0;font-size:clamp(16px,1.25vw,19px)}
.hp p b{color:#fff;font-weight:600}
.hp .more{display:inline-block;margin-top:28px;color:#fff}
.hp figcaption{font-size:15px;color:var(--night-dim);line-height:1.6}
/* 业务屏的小舞台：有透视，图层按 data-depth 摆在不同纵深，鼠标移动时整体轻微转动（space.js） */
.hp .art{perspective:1100px;transform-style:preserve-3d}
.hp-depth{position:absolute;will-change:transform;transform-style:preserve-3d}
.hp-depth img{display:block;width:100%;height:auto}

/* 一句话 */
.hp-say{padding:clamp(120px,16vh,200px) var(--gut)}
.hp-say blockquote{margin:0 0 0 auto;max-width:21em;font:700 clamp(22px,3vw,44px)/1.5 var(--poster);color:#fff}
.hp-say p{margin-left:auto;margin-right:0;max-width:34em;text-align:left}
.hp-say .in{max-width:62em;margin-left:auto}

/* 两条业务：每条一整屏海报 */
.hp-biz{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);align-items:center;padding:clamp(80px,10vh,140px) var(--gut)}
.hp-biz .tx{position:relative;z-index:3}
.hp-biz .art{position:relative;height:min(78vh,760px)}
.hp-lantern{background:radial-gradient(70% 70% at 70% 50%,#1d1630 0%,var(--night) 70%)}
/* 自贡彩灯：整屏是一片灯会，文字压在左边的暗处 */
.hp-lantern{min-height:110vh}
.hp-lantern .art{position:absolute;inset:4vh 0 0 24%;height:auto}
.hp-lantern .tx{max-width:26em}
.hp-lantern .d1{left:6%;top:0;width:84%}
.hp-lantern .d2{left:4%;top:30%;width:90%}
.hp-lantern .d3{left:-8%;bottom:2%;width:26%}
.hp-lantern .d4{right:-2%;bottom:-2%;width:26%}
.hp-dino{grid-template-columns:minmax(0,60fr) minmax(0,40fr);background:radial-gradient(70% 70% at 30% 50%,#14201a 0%,var(--night) 70%)}
.hp-dino .tx{grid-column:2;grid-row:1}
.hp-dino .art{grid-column:1;grid-row:1}
.hp-dino .art{height:min(80vh,760px)}
.hp-dino .art::before{content:"";position:absolute;inset:10% 0 0 10%;background:radial-gradient(closest-side,rgba(255,150,70,.22),rgba(255,150,70,0))}
.hp-dino .d1{left:-10%;top:14%;width:122%}
.hp-dino .vid{position:absolute;inset:0}
.hp-dino .vid .still,.hp-dino .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);mask-image:radial-gradient(closest-side,#000 50%,transparent 100%)}
.hp-dino .vid video{opacity:0;transition:opacity 1.2s var(--ease)}
.hp-dino .vid video.on{opacity:1}
.hp-dino figcaption{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);white-space:nowrap}

/* 科威特：一个园子里，彩灯和恐龙一起交付 */
.hp-kw{min-height:110vh;padding:clamp(100px,14vh,180px) var(--gut) clamp(80px,10vh,140px);background:radial-gradient(80% 70% at 60% 60%,#1b1a2c 0%,var(--night) 70%)}
.hp-kw .tx{position:relative;z-index:3;max-width:60em}
.hp-kw h2{font-size:clamp(36px,4.6vw,76px)}
.hp-kw .art{position:relative;height:min(82vh,820px);margin-top:-12vh}
.hp-kw .d1{right:0;top:0;width:17%}
.hp-kw .d4{left:8%;top:6%;width:30%}
.hp-kw .d2{left:50%;top:6%;width:30%}
.hp-kw .d3{left:8%;bottom:0;width:88%}
.hp-kw .card{position:absolute;right:var(--gut);top:62%;width:min(300px,22vw);z-index:4;margin:0}
.hp-kw .card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.hp-kw .card figcaption{margin-top:10px}

/* 工序：黑白，只有亮灯那一张是彩色 */
.hp-craft{padding:clamp(120px,14vh,180px) var(--gut)}
.hp-craft .head{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:20px 48px;align-items:end;margin-bottom:56px}
.hp-craft .head p{margin:0}
.hp .h-steps b{color:#fff}
/* 工序照片：全部彩色，统一提亮调色 */
.hp .h-steps img,.lit-ready .hp .h-steps [data-lit].on img{filter:saturate(1.35) contrast(1.08) brightness(1.04)}
.hp .h-steps figure{background:#111}
.hp .h-steps b span,.hp .h-steps small{color:var(--night-dim)}
.hp .h-steps li.on b span{color:#ff4a4f}

/* 委内瑞拉：满版，照片从右边亮进来 */
.hp-ve{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(80px,10vh,140px) var(--gut)}
.hp-ve .bg{position:absolute;inset:-6% -6% -6% 28%;margin:0}
.hp-ve .bg img{width:100%;height:100%;object-fit:cover;object-position:58% 60%;filter:saturate(1.4) contrast(1.1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.hp-ve .tx{position:relative;z-index:3;max-width:46em}
.hp-ve .bg figcaption{position:absolute;right:calc(var(--gut) + 6%);bottom:calc(6% + 20px)}

/* 结尾 */
.hp-end{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:center;padding:clamp(80px,10vh,140px) var(--gut);
  background:radial-gradient(60% 70% at 78% 50%,#14243a 0%,var(--night) 70%)}
.hp-end .tx{position:relative;z-index:3}
/* 第四轮：右边是一张灯会夜景实拍（景区场景），左边渐隐进夜色，文字下面垫一层暗色 */
.hp-end .h-scene{position:absolute;top:0;right:0;bottom:0;width:66%;margin:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hp-end .h-scene img{width:100%;height:100%;object-fit:cover;object-position:55% 30%}
.hp-end .tx::before{content:"";position:absolute;inset:-80px -120px -80px calc(-1 * var(--gut));z-index:-1;background:radial-gradient(closest-side,rgba(7,10,18,.9),rgba(7,10,18,0))}
.hp-end .h-tel{display:inline-block;margin-top:36px;font:700 clamp(40px,5vw,72px)/1 var(--poster);color:#fff;text-decoration:none}
.hp-end .h-tel:hover{color:#ff4a4f}
.hp-end .h-src{margin:18px 0 0;color:var(--night-dim);font-size:15px}
.hp-end .h-src a{color:#fff}
.hp-end .h-acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:32px}
.hp-end .btn.lamp{background:var(--lamp-n);border-color:var(--lamp-n)}
.hp-end button.more{background:none;border:0;border-bottom:2px solid currentColor;padding:0 0 3px;font:600 16px/1.4 var(--sans);color:#fff;cursor:pointer}

/* 全球：沿用原来的点阵地图和资质 */
.hp-world{padding:clamp(120px,14vh,180px) var(--gut)}

@media (max-width:1100px){
  .hp-biz,.hp-dino,.hp-end{grid-template-columns:1fr;gap:32px}
  .hp-dino .tx,.hp-dino .art{grid-column:1;grid-row:auto}
  .hp-biz .art{height:62vw;min-height:300px}
  .hp-lantern .art{position:relative;inset:auto;height:90vw}
  .hp-kw .art{margin-top:0;height:90vw}
  .hp-kw .art{height:auto;aspect-ratio:4/3}
  .hp-kw .d4{left:2%;top:8%;width:28%}
  .hp-kw .d1{right:0;top:0;width:20%}
  .hp-kw .d2{left:40%;top:4%;width:36%}
  .hp-kw .d3{left:4%;bottom:0;width:92%}
  .hp-kw .card{position:relative;right:auto;top:auto;width:62vw;margin:24px 0 0;z-index:4}
  .hp-craft .head{grid-template-columns:1fr}
  .hp-ve{align-items:flex-end;min-height:0;padding-top:72vw}
  .hp-ve .bg{inset:0 0 auto 0;height:80vw}
  .hp-ve .bg img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .hp-ve .bg figcaption{display:none}
  .hp-end .h-scene{position:relative;inset:auto;width:auto;height:min(78vw,52vh);order:-1;margin:0 calc(-1 * var(--gut));-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
}
@media (max-width:700px){
  .hp-say blockquote{margin-left:0}
  .hp-kw .card{width:72vw}
}

/* 低配设备：space.js 不推镜头，所以也不钉住，只显示排好的那一张海报 */
html[data-tier=low] .sp-hero{height:auto}
/* 不钉住时 top 要归零：sticky 的 top:var(--top-h) 留着会把整屏再往下推一个顶栏高，1440×900 下按钮掉出屏幕（10-25 修） */
html[data-tier=low] .sp-stage{position:relative;top:0}
/* 减少动态效果：不钉住、不推镜头，只显示排好的那一张海报 */
@media (prefers-reduced-motion:reduce){
  .sp-hero{height:auto}
  .sp-stage{position:relative;top:0}
  .sp-dino .l-video video,.hp-dino .vid video{transition:none}
}

/* ==================== 龙变恐龙（首页第二屏，2026-10-22） ====================
   钉住的一屏，滚动推进四步：光点聚成彩灯龙头 → 灯熄了，同一个位置、同样姿态的仿真恐龙头亮出来，眼睛变红
   → 镜头拉开，一整只巨型霸王龙落地（画面震一下、扬起灰）→ 底色从夜蓝变成丛林绿，交给下面的业务。
   龙头和恐龙头按眼睛和吻部对齐（见 03_关键文档/37_），所以切换时形状能接上。 */
.dx{position:relative;height:360vh;background:var(--night);color:#fff;overflow-x:clip}
.dx-stage{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h) - var(--mbar-h));height:calc(100svh - var(--top-h) - var(--mbar-h));overflow:hidden;
  background:radial-gradient(80% 70% at 60% 50%,#14182e 0%,var(--night) 70%)}
.dx-jungle{position:absolute;inset:0;opacity:0;background:radial-gradient(90% 80% at 55% 70%,#1d3322 0%,#0a120c 72%)}
.dx-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
/* 龙睁眼：实拍龙头（龙_图片_046，翻转朝左）和“只有眼睛”那一层像素对齐叠在一起：暗处隐约可见 → 先亮眼睛 → 整个龙头亮灯 */
.dx-drag{position:absolute;left:62%;top:50%;width:min(80vw,120vh);aspect-ratio:2400/1638;transform:translate(-50%,-50%);z-index:2}
.dx-drag img{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.dx-heads{position:absolute;left:60%;top:50%;width:min(64vw,108vh);aspect-ratio:2222/1424;transform:translate(-50%,-50%);z-index:2}
.dx-heads img{position:absolute;display:block;height:auto;pointer-events:none}
.dx-dino{left:0;top:0;width:100%}   /* 10-23：换成 25 米霸王龙的头（giant-head） */
.dx-eye{position:absolute;left:38.7%;top:16.3%;width:5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,70,40,.95) 0%,rgba(255,70,40,.35) 35%,rgba(255,70,40,0) 70%);mix-blend-mode:screen}
.dx-rex{position:absolute;left:34%;bottom:-4%;width:min(64vw,104vh);z-index:2}   /* 整只连尾巴放进画面（10-23 客户：尾巴不能没有） */
/* 左右两只陪衬：小一号、压暗，在主角后面，霸王龙落地时一起出来 */
/* 最远处的巨型腕龙：压暗、很大，长脖子从后面伸过整个画面，拉出尺度（10-23 用户：有几款超级大的恐龙） */
/* 侏罗纪的丛林（第四轮，用户：背景太空，加点侏罗纪的元素）：委内瑞拉恐龙公园的实拍（大洋的项目），压暗成棕榈林剪影，霸王龙落地时和丛林绿一起出来 */
.dx-bg{position:absolute;inset:0;opacity:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 75%,transparent 100%)}
.dx-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:brightness(.34) saturate(.55) sepia(.35) hue-rotate(45deg)}
/* 远处的巨型腕龙：整只放进画面，头和腿都看得到（第四轮）；压暗，在霸王龙后面 */
.dx-giant{position:absolute;right:-1%;bottom:30%;width:min(40vw,66vh);z-index:0;pointer-events:none}
.dx-giant img{filter:brightness(.5) saturate(.8)}   /* 在右后方、压暗，不和左边的标题抢；低头腕龙的头朝左，正好朝着画面中间 */
.dx-giant img{display:block;width:100%;height:auto}
.dx-mate{position:absolute;z-index:1;opacity:.85}
.dx-mate img{display:block;width:100%;height:auto}
.dx-mate.l{left:-4%;bottom:0;width:min(34vw,54vh)}   /* 10-26 换成一对禽龙（原来的十三米霸王龙挪去了画廊结尾），图比原来高，宽度收一点 */
.dx-mate.r{right:-8%;bottom:6%;width:min(30vw,48vh)}
.dx-rex img{display:block;width:100%;height:auto;position:relative}   /* 提亮直接做进图片（layers.mjs 的 bri），不用实时滤镜，滚动不卡 */
/* 霸王龙背后的暖光：白天拍的恐龙放在夜里，没有这层光就是一团黑影 */
.dx-rex::before{content:"";position:absolute;left:8%;right:4%;top:-10%;bottom:10%;background:radial-gradient(closest-side,rgba(255,160,80,.38),rgba(255,160,80,.12) 55%,rgba(255,160,80,0));pointer-events:none}
.dx-c{position:absolute;left:var(--gut);z-index:4;margin:0}
.dx-c1,.dx-c2{top:22%;font:900 clamp(30px,3.6vw,56px)/1.25 var(--poster);letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.dx-c3{top:16%;max-width:30em}
.dx-c3 h2{font:900 clamp(36px,4.6vw,76px)/1.1 var(--poster);letter-spacing:-.02em;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.dx-c3 h2 em{font-style:normal;color:var(--lamp-n)}
.dx-c3 p{margin:20px 0 0;color:var(--night-text);font-size:clamp(16px,1.25vw,19px);max-width:26em}
.dx-c3 .more{display:inline-block;margin-top:24px;color:#fff}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .dx{height:320vh}
  .dx-drag{left:61%;top:56%;width:118vw}   /* 龙嘴尖留在画面里，右边的鬃毛可以出画 */
  .dx-heads{left:62%;top:56%;width:112vw}   /* 霸王龙朝左张嘴，头往右挪，嘴留在画面里 */
  .dx-rex{left:0;width:100vw;bottom:-3%}
  .dx-giant{left:auto;right:-6%;bottom:44%;width:min(64vw,48vh)}
  .dx-mate.l{left:-6%;bottom:30%;width:46vw}
  .dx-mate.r{right:-2%;bottom:33%;width:36vw}   /* 手机上原来被挡住了（用户），挪到霸王龙上方、两边 */
  .dx-c1,.dx-c2{top:9%;font-size:clamp(28px,8vw,40px)}
  .dx-c3{top:7%;right:var(--gut)}
}
/* 脚本没运行（减少动态效果、低档设备）：不钉住，直接给出结果：巨型霸王龙和文字。脚本运行时给 html 加 dx-js */
html:not(.dx-js) .dx{height:auto}
html:not(.dx-js) .dx-stage{position:relative;height:auto;min-height:max(100svh,72vw)}
html:not(.dx-js) .dx-drag,html:not(.dx-js) .dx-dino,html:not(.dx-js) .dx-eye,html:not(.dx-js) .dx-c1,html:not(.dx-js) .dx-c2,html:not(.dx-js) .dx-fx{display:none}
html.dx-js .dx-drag img,html.dx-js .dx-dino,html.dx-js .dx-c2,html.dx-js .dx-c3,html.dx-js .dx-rex,html.dx-js .dx-mate,html.dx-js .dx-giant{opacity:0}
html:not(.dx-js) .dx-bg{opacity:1}
/* 叠在首屏最后一个屏高上：首屏的龙冲到镜头前、灯熄全黑的那一刻，这一屏正好钉住接上（和后面几屏一样的衔接法，见 .bz）。
   钉住之前这一屏透明、不接鼠标，不挡首屏 */
html.dx-js .dx{margin-top:calc(-1 * (100vh - var(--top-h) - var(--mbar-h)));margin-top:calc(-1 * var(--sh));background:none;pointer-events:none}
html.dx-js .dx-stage{visibility:hidden}
html.dx-js .dx-stage.live{visibility:visible;pointer-events:auto}

/* ==================== 首页业务屏的主题色（2026-10-22） ====================
   每一屏一个业务、一个主色，进场方式相同（从暗处带纵深亮起），只换颜色：
   彩灯 暖金 → 恐龙 丛林绿 → 神兽与动物 青蓝 → 博物馆 岩灰琥珀 → 雕塑与微缩 沙色暮光 → 整园交付 → 全球 */
.hp-lantern{background:radial-gradient(70% 70% at 68% 50%,#2c1a0c 0%,var(--night) 70%)}
.hp-myth{background:radial-gradient(70% 70% at 66% 55%,#0f2a2e 0%,var(--night) 72%)}
.hp-myth .art{height:min(82vh,800px)}
.hp-myth .d1{left:2%;top:0;width:40%;opacity:.92}
.hp-myth .d2{left:26%;top:12%;width:76%}
.hp-myth .d3{right:-2%;bottom:-4%;width:26%}
.hp-myth .more+.more{margin-left:28px}
.hp-museum{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(80px,10vh,140px) var(--gut);background:#0d0b09}
.hp-museum .bg{position:absolute;inset:-6% -6% -6% 26%;margin:0}
.hp-museum .bg img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(1.2) contrast(1.08) brightness(.9);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,#000 40%)}
.hp-museum .tx{position:relative;z-index:3;max-width:34em}
.hp-museum .card{position:absolute;right:var(--gut);bottom:8%;width:min(340px,24vw);z-index:4;margin:0}
.hp-museum .card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.hp-museum .card figcaption{margin-top:10px}
.hp-sculpt{background:radial-gradient(70% 70% at 66% 60%,#33240f 0%,#120d08 45%,var(--night) 80%)}
.hp-sculpt .art{height:min(76vh,720px)}
.hp-sculpt .d1{left:4%;top:2%;width:46%;opacity:.92}
.hp-sculpt .d2{right:-4%;bottom:-2%;width:72%}
@media (max-width:1100px){
  .hp-myth .art,.hp-sculpt .art{height:84vw}
  .hp-museum{align-items:flex-end;min-height:0;padding-top:72vw;flex-wrap:wrap}
  .hp-museum .bg{inset:0 0 auto 0;height:80vw}
  .hp-museum .bg img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .hp-museum .card{position:relative;right:auto;bottom:auto;width:72vw;margin-top:28px}
}

/* ==================== 2026-10-22 晚：神兽与动物、科威特两屏重做 ==================== */
.hp-myth .d1{left:auto;right:-2%;top:0;width:50%;opacity:.85}
.hp-myth .d2{left:10%;top:6%;width:64%}
.hp-myth .d3{left:-4%;bottom:-2%;width:36%}
.hp-myth .d4{right:2%;bottom:-4%;width:24%}
/* 科威特：同一张夜景，背景整张（d1）和抠出来的骆驼（d2）尺寸位置完全一致，滚动时前后错开 */
.hp-kw .art{height:auto;aspect-ratio:2/1;width:min(100%,118vh);margin:2vh 0 0 auto}
.hp-kw .d1,.hp-kw .d2{left:0;right:auto;top:0;bottom:auto;width:100%;opacity:1}
.hp-kw .d3{left:-4%;right:auto;top:auto;bottom:-2%;width:34%}
.hp-kw .d4{left:auto;right:-4%;top:auto;bottom:-3%;width:36%;opacity:1}
@media (max-width:1100px){
  .hp-kw .art{aspect-ratio:2/1.15}
  .hp-kw .d3{width:44%}
  .hp-kw .d4{width:42%}
  .hp-myth .art{height:96vw}
}

/* ==================== 首页业务舞台（2026-10-22 第五轮） ====================
   一座环形舞台：发光的圆台（.bz-floor）平放在 3D 空间里，六个业务的实物抠图站在台沿上。整圈转 --rot，
   每个面再反向转回来，所以实物永远面朝镜头；转到正面的最大最亮（--s），背后是这个业务的大字（.bz-word）。
   三屏连成一个镜头（space.js 的 bizRing）：
   - 进场：上一屏落地的霸王龙（.bz-rex，和 .dx-rex 同图同位置）缩小走上圆台，其他五个业务从台下升起（--rise）；
   - 离场：圆台向外散开（--rk），实物从镜头两边掠过，画面暗下去，下一屏项目走廊从暗处点灯。
   这一屏往上叠住上一屏的最后一个屏高，钉住之前一直隐藏（visibility），钉住的那一刻两屏画面完全一样，看不出接缝。 */
@property --bzc{syntax:'<color>';inherits:true;initial-value:#1d3322}
.bz{position:relative;z-index:2;height:calc(var(--n) * 70vh + 140vh);background:var(--night);color:#fff;--bzc:#1d3322;--tilt:-12deg;--rot:0deg;--rk:1;
  --fw:min(21vw,38vh);--R:min(23vw,40vh)}
.bz-stage{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h) - var(--mbar-h));height:calc(100svh - var(--top-h) - var(--mbar-h));overflow:hidden;
  background:radial-gradient(70% 75% at 64% 62%,var(--bzc) 0%,var(--night) 72%);transition:--bzc .7s}
html.bz-js .bz{margin-top:calc(-1 * (100vh - var(--top-h) - var(--mbar-h)));margin-top:calc(-1 * (100svh - var(--top-h) - var(--mbar-h)))}
html.bz-js .bz-stage{visibility:hidden}
html.bz-js .bz-stage.live{visibility:visible}
.bz-jungle{position:absolute;inset:0;background:radial-gradient(90% 80% at 55% 70%,#1d3322 0%,#0a120c 72%);z-index:0}
.bz-words{position:absolute;inset:0;z-index:1;pointer-events:none}
.bz-word{position:absolute;right:1vw;top:50%;transform:translate(4vw,-60%);font:900 min(25vw,46vh)/1 var(--poster);letter-spacing:-.04em;white-space:nowrap;
  color:rgba(255,236,210,.05);-webkit-text-stroke:2px rgba(255,236,210,.34);opacity:0;   /* 客户 10-23：喜欢这组大字，但不够醒目，描边加粗加亮、字里垫一层淡色 */transition:opacity .6s var(--ease),transform .9s var(--ease)}
.bz-word.on{opacity:1;transform:translate(0,-60%)}
.bz-scene{position:absolute;inset:0;z-index:2;perspective:1400px;perspective-origin:62% 40%}
/* 圆台中心：舞台右侧、画面下部。宽高为 0 的一个点，所有东西都从这个点往外摆 */
.bz-ring{position:absolute;left:64%;top:68%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--tilt)) rotateY(var(--rot))}
.bz-floor{position:absolute;left:0;top:0;width:calc(var(--R) * 2.5);height:calc(var(--R) * 2.5);border-radius:50%;transform:translate(-50%,-50%) rotateX(90deg);
  background:radial-gradient(closest-side,rgba(255,220,160,0) 74%,rgba(255,220,160,.5) 78.5%,rgba(255,220,160,0) 83%),
    radial-gradient(closest-side,rgba(255,206,140,.2),rgba(255,206,140,.06) 60%,rgba(255,206,140,0) 80%)}
.bz-face{position:absolute;left:0;top:0;margin:0;width:calc(var(--fw) * var(--w));transform-origin:0 0;transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(calc(var(--R) * var(--rk))) rotateY(calc(-1 * (var(--i) * 60deg + var(--rot)))) rotateX(calc(-1 * var(--tilt)))
    scale(var(--s,1)) translate(-50%,-100%) translateY(calc(var(--rise,0) * 46vh))}
.bz-face img{display:block;width:100%;height:auto;-webkit-box-reflect:below 0 linear-gradient(transparent 58%,rgba(255,255,255,.2))}
/* 和 .dx-rex 完全一样的位置和暖光（见上面龙变恐龙），进场时从这里缩小到圆台上 */
.bz-rex{position:absolute;left:34%;bottom:-4%;width:min(64vw,104vh);z-index:4;transform:scale(.96);pointer-events:none}
.bz-rex img{display:block;width:100%;height:auto;position:relative}
.bz-rex::before{content:"";position:absolute;left:8%;right:4%;top:-10%;bottom:10%;background:radial-gradient(closest-side,rgba(255,160,80,.38),rgba(255,160,80,.12) 55%,rgba(255,160,80,0));pointer-events:none}
.bz-copy{position:absolute;left:var(--gut);top:0;bottom:0;width:min(32em,38vw);z-index:5;display:flex;flex-direction:column;justify-content:center}
.bz-copy::before{content:"";position:absolute;inset:10% -30% 10% calc(-1 * var(--gut));z-index:-1;background:radial-gradient(closest-side,rgba(7,8,12,.6),rgba(7,8,12,0))}
.bz-copy h2{font:900 clamp(34px,3.6vw,60px)/1.12 var(--poster);letter-spacing:-.02em;margin:0 0 3vh}
.bz-copy h2 em{font-style:normal;color:var(--lamp-n)}
.bz-items{position:relative}
.bz-item{display:none}
.bz-item.on{display:block;animation:bzIn .5s var(--ease)}
.bz-item h3{font:900 clamp(32px,3.2vw,52px)/1.15 var(--poster);margin:0;color:#fff}
.bz-item p{color:var(--night-text);margin:16px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.65;max-width:24em}
.bz-item .more{display:inline-block;margin-top:20px;color:#fff;font-size:17px}
@keyframes bzIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bz-nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4vh}
.bz-nav button{background:none;border:0;padding:8px 0;font:17px/1.4 var(--sans);color:var(--night-dim);cursor:pointer;border-bottom:2px solid transparent}
.bz-nav button[aria-current="true"]{color:#fff;border-bottom-color:var(--lamp-n)}
.bz-nav button:hover{color:#fff}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .bz{height:calc(var(--n) * 62vh + 120vh);--fw:min(36vw,24vh);--R:min(36vw,22vh);--tilt:-16deg}
  .bz-copy{position:absolute;left:var(--gut);right:var(--gut);top:3vh;bottom:auto;width:auto;justify-content:flex-start}
  .bz-copy::before{inset:-20px -20px -30px calc(-1 * var(--gut))}
  .bz-copy h2{display:none}
  .bz-item h3{font-size:clamp(28px,7.4vw,40px)}
  .bz-item p{font-size:16px}
  .bz-nav{margin-top:2vh;gap:4px 14px}
  .bz-nav button{font-size:15px}
  .bz-ring{left:50%;top:78%}
  .bz-scene{perspective-origin:50% 50%}
  .bz-word{right:auto;left:50%;top:58%;transform:translate(-46%,-50%);font-size:min(40vw,24vh)}
  .bz-word.on{transform:translate(-50%,-50%)}
  .bz-rex{left:0;width:100vw;bottom:-3%}
}
/* 没有脚本或减少动态效果：不钉住、不转，六个业务排成一列，说明全部显示 */
html:not(.bz-js) .bz{height:auto}
html:not(.bz-js) .bz-stage{position:relative;height:auto;padding:12vh var(--gut)}
html:not(.bz-js) .bz-copy{position:relative;left:auto;width:auto;max-width:40em}
html:not(.bz-js) .bz-item{display:block;margin-top:5vh}
html:not(.bz-js) .bz-nav,html:not(.bz-js) .bz-scene,html:not(.bz-js) .bz-words,html:not(.bz-js) .bz-rex,html:not(.bz-js) .bz-jungle{display:none}
/* 手机（≤767）：屏幕太矮，船放到说明文字上方；转盘上移、放大，不留大片空白 */
@media (max-width:767px){
  .sp-cap{top:auto;bottom:16%}   /* 龙从右上角冲下来，会穿过顶上的字；俯冲时下半屏是空的，字放到下面 */
  .sp-home .l-boat{--x:10vw;--y:7vh;width:54vw}   /* 10-25 和竖屏一致（小样 C 在 390 宽验过） */
  .sp-home .l-phoenix{--x:27vw;--y:-4vh;width:46vw}
}
/* 竖放的小平板（768 左右）：口号占的宽度比例大，飞天再往下让一点，头不碰“界”（10-25） */
@media (min-width:600px) and (max-width:900px) and (orientation:portrait){
  .sp-home .l-feitian{--x:16vw;--y:-20vh;width:120vw}
}

/* ==================== 钉住的空间场景：科威特、委内瑞拉（2026-10-22 第五轮） ====================
   和首屏同一套图层（.sp-scene / .sp-world / .sp-ly），滚动时镜头往前推。同一张现场照片做远景，抠出来的主角叠在原位置，
   往前一拉就和背景分开（data-pull）。科威特这一屏的第一帧就是上一屏舞台散开后的那张夜景，所以也往上叠一个屏高、钉住前隐藏。 */
.sc{position:relative;z-index:2;height:240vh;background:var(--night);color:#fff}
.sc-stage{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h) - var(--mbar-h));height:var(--sh);overflow:hidden;
  background:radial-gradient(90% 80% at 60% 55%,var(--sc-haze,#1b1a2c) 0%,var(--night) 70%)}
html.sc-js .sc-kw,html.sc-js .sc-ve{margin-top:calc(-1 * (100vh - var(--top-h) - var(--mbar-h)));margin-top:calc(-1 * var(--sh))}
html.sc-js .sc-stage{visibility:hidden}
html.sc-js .sc-stage.live{visibility:visible}
.sc-copy{position:absolute;left:var(--gut);top:12vh;z-index:5;max-width:min(40em,50vw)}
.sc-copy::before{content:"";position:absolute;inset:-60px -80px -60px calc(-1 * var(--gut));z-index:-1;background:radial-gradient(closest-side,rgba(7,8,12,.82),rgba(7,8,12,0))}
.sc-copy h2{white-space:nowrap;font:900 clamp(36px,4.6vw,76px)/1.08 var(--poster);letter-spacing:-.02em;margin:0;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.sc-copy h2 em{font-style:normal;color:var(--lamp-n)}
.sc-copy p{color:var(--night-text);max-width:30em;margin:22px 0 0;font-size:clamp(16px,1.25vw,19px)}
.sc-copy p b{color:#fff;font-weight:600}
.sc-copy .more{display:inline-block;margin-top:26px;color:#fff}
.sc-cap{display:block;margin-top:22px;font-size:15px;line-height:1.6;color:var(--night-dim)}
/* 科威特：骆驼夜景整张铺满（2:1），骆驼抠图叠在原位置；茶壶灯组和同园的剑龙从两边进来 */
.sc-kw .l-kw-night,.sc-kw .l-kw-camel-night{--x:20vw;--y:5vh;width:min(82vw,calc(var(--sh) * 1.9))}
.sc-kw .l-kw-teapot{--x:-30vw;--y:25vh;--z:160px;width:min(32vw,58vh)}
.sc-kw .l-kw-steg{--x:31vw;--y:27vh;--z:220px;width:min(36vw,64vh)}
/* 委内瑞拉：从暗处亮起，白天的恐龙公园；霸王龙从照片里往前走出来 */
.sc-ve{--sc-haze:#16251a}
.sc-ve .l-ve-park,.sc-ve .l-ve-trex{--x:0vw;--y:0vh;width:max(104vw,calc(var(--sh) * 1.4))}
.sc-ve .sc-copy::before{background:radial-gradient(closest-side,rgba(7,8,12,.9),rgba(7,8,12,.4) 60%,rgba(7,8,12,0))}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .sc{height:220vh}
  .sc-copy{top:4vh;right:var(--gut);max-width:none}
  .sc-copy h2{font-size:clamp(30px,8vw,52px)}
  .sc-copy p{font-size:15px;margin-top:14px}
  .sc-kw .l-kw-night,.sc-kw .l-kw-camel-night{--x:4vw;--y:14vh;width:max(150vw,calc(var(--sh) * 1.1))}
  .sc-kw .l-kw-teapot{--x:-24vw;--y:30vh;width:52vw}
  .sc-kw .l-kw-steg{--x:24vw;--y:32vh;width:58vw}
  .sc-ve .l-ve-park,.sc-ve .l-ve-trex{--x:-14vw;--y:12vh}
}
/* 没有脚本或减少动态效果：不钉住，每一屏就是排好的那一张海报 */
html:not(.sc-js) .sc{height:auto}
html:not(.sc-js) .sc-stage{position:relative;height:auto;min-height:max(100svh,60vw)}

/* 2026-10-22 深夜：彩灯页、机模页首屏换成大灯组、大恐龙（素材见 17_大场面素材精选） */
.sp-lantern .l-kw-night{--x:10vw;--y:-4vh;--z:-900px;width:170vw}
.sp-lantern .l-white-tiger{--x:30vw;--y:-6vh;--z:-320px;width:48vw}
.sp-lantern .l-dragon40{--x:18vw;--y:12vh;--z:160px;width:min(44vw,80vh)}
.sp-dino .l-giga-full{--x:30vw;--y:4vh;--z:-380px;width:58vw}
.sp-dino .l-trex-front{--x:22vw;--y:8vh;--z:140px;width:min(26vw,50vh)}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .sp-lantern .l-kw-night{--x:10vw;--y:-8vh;width:300vw}
  .sp-lantern .l-white-tiger{--x:18vw;--y:-14vh;width:96vw}
  .sp-lantern .l-dragon40{--x:8vw;--y:6vh;width:78vw}
  .sp-dino .l-giga-full{--x:22vw;--y:-6vh;width:120vw}
  .sp-dino .l-trex-front{--x:10vw;--y:2vh;width:min(54vw,40vh)}
}

/* 彩灯页首屏换成 2026 年的新灯组（用户：彩灯要用日期新的素材）：科威特夜景（远）→ 标题 → 2026 金龙（近）。凤凰压在骆驼身上显得乱，没放 */
.sp-lantern .l-lit-dragon26{--x:10vw;--y:22vh;--z:150px;width:min(54vw,96vh)}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .sp-lantern .l-lit-dragon26{--x:-2vw;--y:15vh;width:82vw}
}
/* 叠在前一屏上的那一段：这一屏本身透明、不接鼠标，前一屏照常可看可点；舞台钉住（.live）以后才接管 */
html.bz-js .bz,html.sc-js .sc{background:none;pointer-events:none}
html.bz-js .bz-stage.live,html.sc-js .sc-stage.live{pointer-events:auto}

/* ==================== 无尽灯廊 → 虫洞 → 见光（2026-10-23，客户第二轮反馈，见 03_关键文档/39_） ====================
   Three.js 画在 .lt-gl 上（src/hall3d.js），这里只管舞台、文字和点开以后的样子。业务舞台散开变暗以后，这一屏从暗处点灯，
   所以和前面几屏一样往上叠一个屏高、钉住前隐藏。 */
.lt{position:relative;z-index:2;background:var(--night);color:#fff}
/* 10-26：多出 100vh 只给最后“穿过大门进景区”用（hall3d.js 的 kOld），前面长廊、虫洞、见光的节奏不变 */
html.lt-js .lt{--lt-fly:100vh;height:calc(720vh + var(--lt-fly));margin-top:calc(-1 * (100vh - var(--top-h) - var(--mbar-h)));margin-top:calc(-1 * var(--sh));background:none;pointer-events:none}
html.lt-js .lt-stage{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h) - var(--mbar-h));height:var(--sh);overflow:hidden;background:#08090c;visibility:hidden}
html.lt-js .lt-stage.live{visibility:visible;pointer-events:auto}
.lt-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
/* 虫洞尽头光炸开的那一下 */
.lt-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,#fffaf0 0%,#ffe6bd 35%,rgba(255,206,150,.92) 70%,rgba(255,190,120,.8) 100%)}
.lt-c1,.lt-c3{position:absolute;left:var(--gut);top:12vh;z-index:4;max-width:min(30em,40vw);pointer-events:none}
.lt-c1::before,.lt-c3::before{content:"";position:absolute;inset:-50px -70px -50px calc(-1 * var(--gut));z-index:-1;background:radial-gradient(closest-side,rgba(7,8,12,.88),rgba(7,8,12,0))}
.lt-c3{max-width:min(30em,42vw);opacity:0}
.lt-c3 .lt-src{margin-top:14px;font-size:15px;line-height:1.6;color:var(--night-dim)}
.lt-c1 h2,.lt-c3 h2{margin:0;font:900 clamp(36px,4.4vw,72px)/1.1 var(--poster);letter-spacing:-.02em;color:#fff}
.lt-c3 h2{font-size:clamp(32px,3.4vw,56px)}
.lt-c1 h2 em,.lt-c3 h2 em{font-style:normal;color:var(--lamp-n)}
.lt-c1 p,.lt-c3 p{margin:20px 0 0;color:var(--night-text);font-size:clamp(15px,1.15vw,18px);max-width:26em}
.lt-c2{position:absolute;left:var(--gut);top:22%;z-index:4;margin:0;opacity:0;pointer-events:none;
  font:900 clamp(30px,3.6vw,56px)/1.25 var(--poster);letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.lt-hud{position:absolute;left:50%;bottom:clamp(18px,4vh,40px);transform:translateX(-50%);z-index:4;margin:0;opacity:0;pointer-events:none;
  font:600 13px/1.4 var(--sans);color:var(--night-dim);letter-spacing:.08em;white-space:nowrap;display:flex;gap:6px;align-items:baseline}
.lt-hud b{color:#fff;font-weight:700}
.lt-now{margin-left:14px;color:#fff;letter-spacing:0;font-size:15px}
/* 墙上照片的文字版：屏幕阅读器和键盘用（逐个切换时镜头走到那一幅前面）；没有 3D 时就是一面照片墙 */
.lt-list{list-style:none;margin:0;padding:0}
html.lt-js .lt-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* 点开一幅：照片浮到正中、套上白色卡纸，右边是说明和入口（参考视频 9 秒处的样子） */
.pc-focus{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:6vh var(--gut);background:rgba(5,6,9,.62)}
.pc-focus[hidden]{display:none}
.pc-focus figure{margin:0;display:flex;align-items:center;gap:clamp(24px,4vw,64px);max-width:100%}
.pc-mat{background:#f3efe6;padding:clamp(10px,1.2vw,18px);box-shadow:0 40px 90px rgba(0,0,0,.6);transform-origin:50% 50%;width:min(52vw,90vh)}
.pc-mat img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.pc-focus figcaption{max-width:20em}
.pc-meta{display:block;color:var(--night-dim);font-size:15px}
.pc-focus h3{margin:10px 0 0;font:900 clamp(24px,2.4vw,38px)/1.2 var(--poster);color:#fff}
.pc-focus .more{display:inline-block;margin-top:22px;color:#fff}
.pc-focus .more[hidden]{display:none}
.pc-back{display:block;margin-top:18px;background:none;border:0;padding:6px 0;color:var(--night-dim);font:15px/1.4 var(--sans);cursor:pointer}
.pc-back:hover,.pc-back:focus-visible{color:#fff}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  html.lt-js .lt{height:660vh}
  .lt-c1,.lt-c3{top:4vh;right:var(--gut);max-width:none}
  .lt-c1 h2,.lt-c3 h2{font-size:clamp(30px,8vw,52px)}
  .lt-c1 p,.lt-c3 p{font-size:15px;margin-top:12px}
  .lt-c2{top:9%;font-size:clamp(28px,8vw,40px)}
  .pc-focus figure{flex-direction:column;align-items:flex-start}
  .pc-mat{width:min(86vw,60vh)}
}
/* 没有 3D（没有 WebGL、低配设备、减少动态效果）：不钉住，照片排成一面墙，项目照片点进项目页 */
html:not(.lt-js) .lt-stage{padding:12vh var(--gut)}
html:not(.lt-js) .lt-c1{position:relative;left:auto;top:auto;max-width:40em;margin-bottom:6vh}
html:not(.lt-js) .lt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:32px 24px}
html:not(.lt-js) .lt-list figure{margin:0}
html:not(.lt-js) .lt-list a{color:inherit;text-decoration:none}
html:not(.lt-js) .lt-list img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
html:not(.lt-js) .lt-list span{display:block;margin-top:10px;color:#fff}
html:not(.lt-js) .lt-gl-only,html:not(.lt-js) .lt-gl,html:not(.lt-js) .lt-flash,html:not(.lt-js) .lt-c2,html:not(.lt-js) .lt-c3,html:not(.lt-js) .lt-hud,html:not(.lt-js) .pc-focus{display:none}
.h-honor{margin:18px 0 0;color:var(--night-dim);font-size:15px;max-width:40em}

/* 10-28 方案页首屏：城市灯会、景区夜游、恐龙乐园（03_关键文档/48） */
.sp-sol-city{--sp-haze:#1d1630}
.sp-sol-city .l-zigong-night{--x:10vw;--y:-4vh;--z:-900px;width:170vw}
.sp-sol-city .l-dragon40{--x:20vw;--y:10vh;--z:160px;width:min(42vw,78vh)}
.sp-sol-scenic{--sp-haze:#16182e}
.sp-sol-scenic .l-kw-boat{--x:12vw;--y:2vh;--z:-800px;width:150vw}
.sp-sol-scenic .l-lit-cheetah{--x:24vw;--y:16vh;--z:160px;width:min(36vw,70vh)}
.sp-sol-dino{--sp-haze:#14201a}
.sp-sol-dino .l-ve-park-dusk{--x:8vw;--y:-2vh;--z:-480px;width:128vw}
.sp-sol-dino .l-trex-front{--x:24vw;--y:12vh;--z:160px;width:min(40vw,76vh)}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .sp-sol-city .l-zigong-night{--x:0vw;--y:-8vh;width:300vw}
  .sp-sol-city .l-dragon40{--x:10vw;--y:4vh;width:96vw}
  .sp-sol-scenic .l-kw-boat{--x:0vw;--y:-6vh;width:280vw}
  .sp-sol-scenic .l-lit-cheetah{--x:12vw;--y:8vh;width:84vw}
  .sp-sol-dino .l-ve-park-dusk{--x:-10vw;--y:-6vh;width:300vw}
  .sp-sol-dino .l-trex-front{--x:18vw;--y:16vh;width:66vw}
}
/* 恐龙乐园的标题压在园区蓝天上：红字周围压暗一圈，标题背后垫一层暗色（和首页口号同一个做法），对比度到 3:1 以上 */
.sp-sol-dino .sp-title .h1 em{text-shadow:0 0 10px rgba(7,8,12,.95),0 0 24px rgba(7,8,12,.9),0 2px 30px rgba(0,0,0,.55)}
.sp-sol-dino .sp-title .h1::before{content:"";position:absolute;inset:-50px -80px -50px calc(-1 * var(--gut));z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(7,8,12,.8),rgba(7,8,12,0))}

/* ---------- 彩灯页首屏：海洋女神灯组"点灯"（11-02） ----------
   三个状态：一开始夜里没亮灯（压暗）→ 一秒后点亮（is-lit）→ 按钮"关灯看彩绘"（is-day，没亮灯那张按原样显示，看彩绘）。
   没有 JS 时直接显示亮灯；"减少动态效果"时不渐变，直接亮。 */
.gh{position:relative;background:var(--night);color:#fff;overflow:hidden}
.gh-stage{position:relative;min-height:calc(100svh - var(--top-h) - var(--mbar-h));display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);align-items:center;padding:clamp(24px,4vh,48px) var(--gut)}
.gh-pic{position:relative;grid-column:2;grid-row:1;justify-self:end;margin:0 calc(-1 * var(--gut)) 0 -6vw;aspect-ratio:1480/1125;width:min(calc(100% + 6vw + var(--gut)),calc((100svh - var(--top-h) - var(--mbar-h) - 56px) * 1480 / 1125))}
.gh-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity 1.6s var(--ease),filter 1.6s var(--ease)}
.gh-off{filter:brightness(.4) saturate(.7)}
.gh.is-day .gh-off{filter:none}
html[data-tier] .gh-on{opacity:0}
html[data-tier] .gh.is-lit .gh-on,html:not([data-tier]) .gh-on{opacity:1}
.gh-glow{position:absolute;inset:8% 10% 0;background:radial-gradient(closest-side,rgba(255,150,190,.32),rgba(255,150,190,0));opacity:0;transition:opacity 1.6s var(--ease)}
.gh.is-lit .gh-glow{opacity:1}
.gh-copy{position:relative;z-index:2;grid-column:1;grid-row:1;max-width:30em}
.gh-copy .crumb{padding:0 0 14px;color:rgba(255,255,255,.65)}
.gh-copy .crumb a,.gh-copy .crumb i,.gh-copy .crumb span{color:rgba(255,255,255,.65)}
.gh-copy h1{font-family:var(--poster);font-weight:900;font-size:clamp(56px,7.6vw,124px);line-height:1;letter-spacing:-.02em;color:#fff;margin:0 0 22px}
.gh-copy h1 em{font-style:normal;color:var(--lamp)}
.gh-copy>p:not(.gh-cap){margin:0 0 26px;color:var(--night-text);font-size:clamp(16px,1.2vw,19px)}
.gh-copy .btns{display:flex;flex-wrap:wrap;gap:12px}
.gh-copy .btn.ghost{background:transparent;border:1px solid rgba(243,241,236,.5);color:#fff;padding:12px 24px;min-height:48px;font-size:15px}
.gh-cap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:28px 0 0;font-size:15px;color:var(--night-dim)}
.gh-tg{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--night-line);color:#fff;font-size:15px;cursor:pointer}
.gh-tg:hover{border-color:rgba(255,255,255,.6)}
.gh-dot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.gh-tg[aria-pressed="false"] .gh-dot{background:transparent;border:1.5px solid #fff;box-shadow:none}
html[data-motion="reduce"] .gh-pic img,html[data-motion="reduce"] .gh-glow{transition:none}
@media (max-width:860px),(orientation:portrait) and (max-width:1100px){
  .gh-stage{grid-template-columns:1fr;align-content:start;min-height:0;padding-top:28px;padding-bottom:40px}
  .gh-pic{grid-column:1;grid-row:1;justify-self:stretch;margin:0 calc(-1 * var(--gut)) 8px;width:auto}
  .gh-copy{grid-row:2}
}