/* ==========================================================================
   CapCut World 2026 — 全站样式
   设计稿基准 1920×1095(②/⑤/⑥/⑦/⑧)与 1920×1080(④),尺寸统一走 --u 缩放
   ========================================================================== */

/* ---------- 字体 ---------- */
@font-face { font-family:'CapCut Sans Text'; font-weight:400; font-display:swap;
  src:url(../assets/fonts/CapCutSansText-Regular.woff2) format('woff2'); }
@font-face { font-family:'CapCut Sans Text'; font-weight:700; font-display:swap;
  src:url(../assets/fonts/CapCutSansText-Bold.woff2) format('woff2'); }
@font-face { font-family:'CapCut Sans Text'; font-weight:900; font-display:swap;
  src:url(../assets/fonts/CapCutSansText-Black.woff2) format('woff2'); }
@font-face { font-family:'Albert Sans'; font-weight:400; font-display:swap;
  src:url(../assets/fonts/AlbertSans-400.woff2) format('woff2'); }
@font-face { font-family:'Albert Sans'; font-weight:500; font-display:swap;
  src:url(../assets/fonts/AlbertSans-500.woff2) format('woff2'); }
@font-face { font-family:'Albert Sans'; font-weight:700; font-display:swap;
  src:url(../assets/fonts/AlbertSans-700.woff2) format('woff2'); }
@font-face { font-family:'Alatsi'; font-weight:400; font-display:swap;
  src:url(../assets/fonts/Alatsi-400.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-display:swap;
  src:url(../assets/fonts/Inter-400.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-display:swap;
  src:url(../assets/fonts/Inter-500.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap;
  src:url(../assets/fonts/Inter-600.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap;
  src:url(../assets/fonts/Inter-700.woff2) format('woff2'); }

:root {
  --paper:#f8fcff;
  --ink:#000000;
  --ink-2:#111111;
  --cyan:#12d9f9;
  --u:calc(100vw / 1920);            /* 设计稿 1px = 1u(横向定位用,吃满宽度) */
  --uv:min(calc(100vw / 1920), calc(100vh / 1080));   /* 字号/纵向尺寸用:宽矮屏(投屏)下随高度收,保证任何比例不重叠 */
  --sf:'SF Pro Display','SF Pro Text',-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue','Segoe UI',Roboto,Arial,sans-serif;
  --albert:'Albert Sans',var(--sf);
  --alatsi:'Alatsi','Albert Sans',var(--sf);
  --ease-k:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.45,.5,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
/* 画布底色分段:滚到底继续拖(橡皮筋回弹)露出的是 html 画布——纯白会像界面被切断。
   上半 paper(配浅色首屏的顶部回弹)、下半黑(配结尾屏的底部回弹),各段自身背景不受影响 */
html { background:linear-gradient(var(--paper), var(--paper) 50%, #000 50%, #000); scroll-behavior:auto; }
html, body { overflow-x:clip; }
body { font-family:var(--sf); font-weight:500; color:var(--ink-2);
  background:var(--paper); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; background:none; border:0; cursor:pointer; color:inherit; }

/* ---------- 全局浮现规则:模糊→清晰 + 轻微上移 ---------- */
.rv, .rv-h { opacity:0; transform:translateY(calc(var(--u) * 46)); filter:blur(14px);
  transition:opacity 1.05s var(--ease-k), transform 1.05s var(--ease-k), filter 1.05s var(--ease-k);
  transition-delay:var(--d, 0s); will-change:opacity, transform, filter; }
.rv.in, .rv-h.in { opacity:1; transform:none; filter:blur(0); }

/* ==========================================================================
   导航(②起常驻;默认深字适配白/青底,入④起 JS 切 body.nav-light 白字)
   ========================================================================== */
.nav { position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center;
  padding:calc(var(--u) * 41) calc(var(--u) * 81) calc(var(--u) * 30);
  color:#141414;
  border-bottom:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.001);   /* 激活 backdrop-filter 的隔离层 */
  backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
  opacity:0; transform:translateY(-14px); pointer-events:none;
  transition:opacity .9s var(--ease-k) .1s, transform .9s var(--ease-k) .1s,
    color .5s ease, border-color .5s ease; }
body.s2-on .nav { opacity:1; transform:none; pointer-events:auto; }
body.nav-light .nav { color:#fff; border-bottom-color:rgba(255,255,255,.22); }
.nav .brand { display:block; width:calc(var(--u) * 147); aspect-ratio:299.5/61;
  background:currentColor;
  -webkit-mask:url(../assets/logo/capcut-only.svg) no-repeat center/contain;
          mask:url(../assets/logo/capcut-only.svg) no-repeat center/contain; }
.nav .spacer { flex:1; }
.nav .menu { display:flex; align-items:center; gap:calc(var(--u) * 60); }
.nav .menu a { position:relative; display:inline-block;
  font-size:calc(var(--uv) * 32); font-weight:400; letter-spacing:calc(var(--uv) * -0.96);
  line-height:1.2; transition:font-weight .22s ease, opacity .25s ease; }
.nav .menu a::after { content:attr(data-text); display:block; height:0; overflow:hidden;
  visibility:hidden; font-weight:700; }                 /* 预留加粗宽度,hover 不抖动 */
.nav .menu a:hover { font-weight:700; }
.nav .menu a.on { font-weight:700; }   /* scrollspy:当前板块对应项恒粗体 */

/* ==========================================================================
   ① + ② 首屏(230vh 长轨 + sticky 舞台)
   ========================================================================== */
#hero-wrap { position:relative; height:100vh; background:var(--paper); }   /* 死滑动段已删:开场结束即 ② 态,无需 sticky 行程 */
.hero { position:sticky; top:0; height:100vh; min-height:600px; overflow:hidden; }
#hero-gl { position:absolute; inset:0; z-index:1; }
#hero-gl canvas { position:absolute; inset:0; width:100%!important; height:100%!important; display:block; }

/* ① Welcome 文案:Albert Sans 700 64px,居中偏下(设计稿 685/1095) */
.welcome { position:absolute; left:50%; top:var(--welcome-top, 76%); z-index:2; transform:translateX(-50%);
  font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 64);
  letter-spacing:calc(var(--uv) * -1.92); color:var(--ink); white-space:nowrap;
  opacity:0; filter:blur(16px);
  transition:opacity 1.1s var(--ease-k), filter 1.1s var(--ease-k), transform 1.1s var(--ease-k); }
.welcome.on { opacity:1; filter:blur(0); }
.welcome.off { opacity:0; filter:blur(10px); transform:translateX(-50%) translateY(-18px);
  transition-duration:.7s; }

/* 首屏向下箭头(2026-08-12 客户:需要一个引导下滑的箭头)。
   外层 .hero-cue 管显隐(main.js 按 scrollY 淡出),内层 i 管 bob 动画 */
.hero-cue { position:absolute; left:50%; bottom:5.2vh; z-index:3; transform:translateX(-50%);
  color:var(--ink); opacity:0; transition:opacity .9s var(--ease-k) .5s; }
body.kv-ready .hero-cue { opacity:1; }
.hero-cue i { display:block; animation:cue-bob 2.6s ease-in-out infinite; }
.hero-cue svg { display:block; width:clamp(26px, calc(var(--u) * 41), 41px); }
@keyframes cue-bob { 0%,100% { transform:translateY(-4px); opacity:.4; }
  50% { transform:translateY(6px); opacity:.95; } }

/* ② 左侧文案(设计稿 x=80,标题 y=250) */
.s2-copy { position:absolute; z-index:2; left:calc(var(--u) * 80); top:min(calc(var(--u) * 250), 23vh);
  color:var(--ink); }
.s2-title { margin:0 0 calc(var(--uv) * 48); }
.s2-title img { display:block; height:calc(var(--uv) * 96); width:auto; }  /* 官方字标 SVG(669×96) */
.s2-desc { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.1; letter-spacing:calc(var(--uv) * -0.64);
  margin-bottom:calc(var(--uv) * 108); max-width:calc(var(--uv) * 731); }
.s2-cities { display:grid; gap:calc(var(--uv) * 47); }
.s2-city h3 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 32);
  line-height:1.1; letter-spacing:calc(var(--uv) * -0.64); }
.s2-city p { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.35; letter-spacing:calc(var(--uv) * -0.64); }

/* ==========================================================================
   ③ 青色过渡条(设计稿 1920×629)
   ========================================================================== */
.s3 { position:relative; z-index:3; background:var(--cyan); color:#000;
  min-height:calc(var(--u) * 629); display:flex; align-items:center;
  padding:calc(var(--u) * 100) calc(var(--u) * 79); }
.s3-wrap { display:grid; grid-template-columns:auto 1fr; gap:calc(var(--u) * 210);
  width:100%; align-items:start; }
.s3-title { font-size:calc(var(--uv) * 64); font-weight:700; line-height:1.05;
  letter-spacing:calc(var(--uv) * -1.28); white-space:nowrap; }
.s3-title img { display:block; height:calc(var(--uv) * 66); width:auto;
  margin-top:calc(var(--uv) * 16); }
.s3-copy { justify-self:center; }   /* 居中折衷:贴标题太空右、贴右缘离标题太远(客户两轮反馈),居中让 标题-正文-右缘 三段留白均衡 */
.s3-copy p { text-wrap:pretty; }   /* justify 在此栏宽会拉大词距(客户否),回左对齐;
   右缘靠 pretty 断行 + 栏宽微调自然收齐 */
.s3-copy { max-width:calc(var(--uv) * 820);   /* 820:实测左对齐下各行右缘极差最小(38px),视觉上基本收齐 */ font-family:var(--albert); font-weight:400;
  font-size:calc(var(--uv) * 32); line-height:1.1; display:grid; gap:1.1em; }

/* ==========================================================================
   ③b 全宽视频带(4:1):撑满左右、紧贴青条,无缝进 ④ 黑底
   两个细节:
   1) 底色用 #fdfdfd 不用 #000 —— 片子第 0 帧就是这个近白(实测 253,253,253),
      未加载完/解码空档露出来的是同色,不会闪一下黑;
   2) aspect-ratio 4/1 + video 上的 width/height 属性双保险:元数据还没到时
      版位就已经占好,下面 ④⑤⑥ 不会因为视频撑开而跳一下(CLS)。
   ========================================================================== */
.s3v { position:relative; z-index:3; background:#fdfdfd; line-height:0; overflow:hidden; }
.s3v video { display:block; width:100vw; height:auto; aspect-ratio:4/1; }

/* ==========================================================================
   ④ 三城气泡(黑底,设计稿 1920×1080)
   ========================================================================== */
.s4 { position:relative; z-index:3; height:470vh; background:#000; color:#fff; }
  /* 420vh 驱动穿越 + 末段 0.5 屏缓冲:⑥ 落幅出字后不急着滑走(同 ② 的静止段) */
.s4-stage { position:sticky; top:0; height:100vh; min-height:640px; overflow:hidden; }
/* 三城球:球体本身走 WebGL(js/city.js 的泡泡球 shader,带鼠标视差),
   这三个 div 只是"位置骨架"——尺寸/入场/微浮/退场全在这里,球每帧读它们的 rect
   与 opacity/blur 跟随。所以下面的动画不用动,换了渲染方式照样生效。 */
#s4-gl { position:absolute; inset:0; z-index:6; width:100%; height:100%;
  pointer-events:none; display:block; }
/* 必须钉死 canvas 的 CSS 尺寸:gl3d 的 resize 只设像素缓冲不设 style,
   没有这条,Retina(dpr=2)下 canvas 按缓冲尺寸(2倍)铺出,三颗球全部错位 */
#s4-gl canvas { position:absolute; inset:0; width:100%!important; height:100%!important; display:block; }
.s4-ball { position:absolute; z-index:6; aspect-ratio:1; cursor:none;
  user-select:none; -webkit-user-select:none;
  opacity:0; transform:scale(0) translateY(calc(var(--u) * 60));
  filter:blur(20px); will-change:transform, opacity, filter; }
.s4-ball.pop { opacity:1; transform:scale(1) translateY(0); filter:blur(0);
  transition:opacity .9s var(--ease-k), filter .9s var(--ease-k),
    transform 1.1s var(--ease-spring); transition-delay:var(--d, 0s); }
/* 尺寸带 vh 上限(投屏等宽矮屏下球随高度收,不压 77.6% 的文案);
   SG=数学居中(left:50% 减半宽),LA=右缘锚定,不再依赖固定 left */
.s4-london { left:calc(var(--u) * 130); top:min(calc(var(--u) * 300), 27vh); width:min(calc(var(--u) * 350), 34vh); }
.s4-la     { right:calc(var(--u) * 130); top:min(calc(var(--u) * 300), 27vh); width:min(calc(var(--u) * 350), 34vh); }
.s4-sg     { left:calc(50% - min(var(--u) * 309, 30vh)); top:min(calc(var(--u) * 163), 15vh); width:min(calc(var(--u) * 618), 60vh); z-index:7; }
/* 球面文字贴片:1200×1200 的方图与球外接正方形 1:1 对齐,所以 width:100% 即可;
   新加坡那张是 1344×972,按原球图 1236 的比例放大 */
.s4-ball .s4-text { position:absolute; left:50%; top:50%; z-index:2;
  width:100%; transform:translate(-50%,-50%); pointer-events:none; }
.s4-ball .s4-text-sg { width:calc(100% * 1344 / 1236); }
/* 归位后的待机微浮:2026-08-12 客户反馈旧版(margin-top 动画)像在"抖"——
 * margin 触发布局、不走合成器,幅度又小,看着是颤不是浮。
 * 改独立 translate 属性(GPU 合成,与 pop 的 transform 互不干扰),
 * 幅度加大到 20u 并带 6u 横漂,三球不同周期/相位,呼吸感代替抖动 */
.s4-ball.float { animation:s4float 6.8s ease-in-out infinite; }
.s4-sg.float { animation-duration:7.8s; }
.s4-london.float { animation-duration:6.6s; animation-delay:-2.2s; }
.s4-la.float { animation-duration:7.3s; animation-delay:-4.5s; }
@keyframes s4float {
  0%, 100% { translate:0 0; }
  50% { translate:calc(var(--u) * 6) calc(var(--u) * -20); }
}

.s4-copy { position:absolute; left:50%; top:77.6%; transform:translateX(-50%) translateY(calc(var(--u) * 30));
  font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.1; text-align:center; color:#fff; opacity:0; filter:blur(12px);
  transition:opacity .9s var(--ease-k) .4s, transform .9s var(--ease-k) .4s, filter .9s var(--ease-k) .4s; }
.s4-stage.s4-played .s4-copy { opacity:1; transform:translateX(-50%); filter:blur(0); }
.s4-chevron { position:absolute; left:50%; top:88.2%; transform:translateX(-50%);
  width:calc(var(--u) * 41); color:#fff; opacity:0;
  transition:opacity 1s var(--ease-k) .2s; }
.s4-chevron.on { opacity:.9; animation:chev-bob 2.6s ease-in-out infinite; }
@keyframes chev-bob { 0%,100% { transform:translateX(-50%) translateY(-4px); opacity:.4; }
  50% { transform:translateX(-50%) translateY(6px); opacity:.95; } }

/* 光标文字标签(④) */
#cursor-tag { position:fixed; left:0; top:0; z-index:80; pointer-events:none;
  opacity:0; transform:scale(.5); transform-origin:center;
  transition:opacity .22s ease, transform .35s var(--ease-spring); }
#cursor-tag.on { opacity:1; transform:scale(1); }
/* 磨砂玻璃胶囊(沿用旧站 .cursor-chip 的配方:半透白底 + backdrop 模糊增艳 +
   1px 半透描边 + 顶部内高光 + 底部内散射 + 外投影)。两种状态只差底色浓度,
   不换材质——VIEW MORE 稍亮、COMING SOON 压暗,质感保持一致 */
#cursor-tag span { display:block; color:#fff;
  font-family:var(--sf); font-weight:600; font-size:15px; letter-spacing:-.02em;
  white-space:nowrap; padding:12px 20px; border-radius:999px;
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -8px 18px rgba(255,255,255,.06),
    0 12px 34px rgba(0,0,0,.4);
  transform:translate(-50%,-50%); }
#cursor-tag.soon span { background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 12px 30px rgba(0,0,0,.45); }

/* 穿越开始后:气泡不再响应指针、停止微浮 */
.s4-stage.zoomed .s4-ball { pointer-events:none; animation:none; }

/* ==========================================================================
   ④→⑤→⑥ 穿越(与④同一条 420vh pin 轨:圆口从新加坡球心张开 → 金沙 → 广场)
   ========================================================================== */
.zl { position:absolute; inset:0; overflow:hidden; will-change:transform, opacity, clip-path;
  pointer-events:none; }   /* 纯视觉层:透明时也不能挡住④气泡的 hover */
.zl img { position:absolute; max-width:none; will-change:transform; user-select:none; -webkit-user-select:none; }
  /* max-width:none 必须:全局 img{max-width:100%} 会把竖屏 cover 铺放(宽于舞台)压回舞台宽 → 穿越层整块黑屏 */
.zl-s5 { z-index:5; clip-path:circle(0px at 50% 50%); }   /* 首帧前不外露 */
.zl-s6 { z-index:7; opacity:0; }
.zl-s6shade { z-index:8; opacity:0;
  /* 设计师切图:左黑右透的渐变 PNG,占满高度贴左边 */
  background:url(../assets/sections/shade-left.png) left top / auto 100% no-repeat; }
.zl-s6copy { z-index:9; left:calc(var(--u) * 79); top:min(calc(var(--u) * 249), 23vh); right:auto; bottom:auto;
  color:#fff; }
.s6-title { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 64);
  line-height:.88; letter-spacing:calc(var(--uv) * -0.64); margin-bottom:calc(var(--uv) * 44);
  opacity:0; transform:translateY(calc(var(--u) * 40)); filter:blur(12px);
  transition:all .9s var(--ease-k); }
.s6-desc { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.07; letter-spacing:calc(var(--uv) * -0.64); max-width:calc(var(--uv) * 631);
  margin-bottom:calc(var(--uv) * 96);
  opacity:0; transform:translateY(calc(var(--u) * 40)); filter:blur(12px);
  transition:all .9s var(--ease-k) .1s; }
.s6-list { display:grid; gap:calc(var(--uv) * 30); }
.s6-item h3 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 32);
  line-height:1.07; letter-spacing:calc(var(--uv) * -0.64); }
.s6-item p { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.3; letter-spacing:calc(var(--uv) * -0.64); }
.s6-item { opacity:0; transform:translateY(calc(var(--u) * 40)); filter:blur(12px);
  transition:all .9s var(--ease-k); }
.s6-item:nth-child(1) { transition-delay:.18s; }
.s6-item:nth-child(2) { transition-delay:.26s; }
.s6-item:nth-child(3) { transition-delay:.34s; }
.s4-stage.s6-on .s6-title, .s4-stage.s6-on .s6-desc, .s4-stage.s6-on .s6-item {
  opacity:1; transform:none; filter:blur(0); }

/* ==========================================================================
   ⑦ Capella 轮播
   ========================================================================== */
.s7 { position:relative; z-index:4; height:100vh; min-height:640px;
  background:#000; color:#fff; overflow:hidden; }
.s7-bgs, .s7-bg { position:absolute; inset:0; }
.s7-bg { width:100%; height:100%; object-fit:cover; opacity:0;
  transform:scale(1.07); transition:opacity 1.4s var(--ease-k), transform 6.5s linear; }
.s7-bg.is-on { opacity:1; transform:scale(1); }
.s7-shade { position:absolute; inset:0;
  /* 设计师切图:左黑右透的渐变 PNG,占满高度贴左边 */
  background:url(../assets/sections/shade-left.png) left top / auto 100% no-repeat; }
.s7-copy { position:absolute; z-index:2; left:calc(var(--u) * 79); top:min(calc(var(--u) * 198), 18vh); }
.s7-copy h2 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 64);
  line-height:1.05; letter-spacing:calc(var(--uv) * -0.64); margin-bottom:calc(var(--uv) * 44); }
.s7-desc { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.07; letter-spacing:calc(var(--uv) * -0.64); margin-bottom:calc(var(--uv) * 100); }
.s7-sched { display:grid; gap:calc(var(--uv) * 32); }
.s7-slot h3 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 32);
  line-height:1.1; letter-spacing:calc(var(--uv) * -0.64); }
.s7-slot p { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.3; letter-spacing:calc(var(--uv) * -0.64); }

/* 日程里的外链:细下划线标识可点,不抢版面;hover 提亮 */
.s7-link { text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.55);
  transition:text-decoration-color .2s ease; }
.s7-link:hover { text-decoration-color:#fff; }

.s7-dots { position:absolute; z-index:3; left:50%; bottom:calc(var(--u) * 54);
  transform:translateX(-50%); display:flex; gap:calc(var(--u) * 14); }
.s7-dot { width:calc(var(--u) * 56); height:calc(var(--u) * 6); border-radius:99px;
  background:rgba(255,255,255,.28); overflow:hidden; padding:0;
  transition:background .4s ease; }
.s7-dot i { display:block; height:100%; width:0; border-radius:99px; background:#fff; }
.s7-dot.is-on i { animation:dotfill var(--dur,5s) linear forwards; }
@keyframes dotfill { from { width:0; } to { width:100%; } }

/* ==========================================================================
   ⑧ 末屏:巨球 + 倒计时 + footer
   ========================================================================== */
.s8 { position:relative; z-index:4; height:100vh; min-height:680px;
  background:#000; color:#fff; overflow:hidden; }
.s8-ball { position:absolute; inset:0; z-index:1; }
/* ⑧ 背景黑球 0.2 透明度(main.js ball8Frame 的 o 参数) + 黑色渐变蒙版:
 * 越靠下压得越黑(底部文字多,球要藏住),顶部留球(客户 2026-08-12) */
.s8-shade { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.82) 78%, rgba(0,0,0,.92) 100%); }
.s8-ball canvas { position:absolute; inset:0; width:100%!important; height:100%!important; display:block; }

.s8-core { position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; align-items:center; }
.s8-kicker { margin-top:min(calc(var(--u) * 251), 23vh); font-family:var(--albert); font-weight:400;
  font-size:calc(var(--uv) * 32); letter-spacing:calc(var(--uv) * -0.32); color:#fff; }
.s8-cards { display:flex; gap:calc(var(--uv) * 46); margin-top:calc(var(--uv) * 40); }
.s8-card { width:calc(var(--uv) * 258); text-align:center; }
.s8-num { height:calc(var(--uv) * 196); display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.13); border-radius:calc(var(--uv) * 22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-weight:700; font-size:calc(var(--uv) * 148); line-height:1;
  letter-spacing:calc(var(--uv) * -1.48); color:#fff; font-variant-numeric:tabular-nums; }
/* ⑧ 全屏只保留三种字号:148(数字)/ 64(结尾语)/ 32(kicker、单位、页脚) */
.s8-lab { margin-top:calc(var(--uv) * 16); font-family:var(--albert); font-weight:500;
  font-size:calc(var(--uv) * 32); line-height:1; letter-spacing:calc(var(--uv) * -0.32); }
.s8-tag { margin-top:calc(var(--uv) * 90); text-align:center; font-weight:700;
  font-size:calc(var(--uv) * 64); line-height:1.05; letter-spacing:calc(var(--uv) * -0.64); }
.s8-tag span { font-weight:400; }

.s8-foot { position:absolute; z-index:4; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--u) * 34) calc(var(--u) * 80);
  border-top:1px solid rgba(255,255,255,.14); }
.s8-social { display:flex; gap:calc(var(--u) * 30); }
/* 官方社媒图标(assets/footer,与线上站 flow.html 逐路径一致):
   默认 70% 白(同设计稿),hover 纯白 */
.soc { display:block; width:clamp(18px, calc(var(--u) * 26), 26px);
  color:rgba(255,255,255,.7); transition:color .25s ease; }
.soc:hover { color:#fff; }
.soc svg { width:100%; height:auto; display:block; }
.s8-out { display:flex; align-items:center; gap:calc(var(--uv) * 36); flex-wrap:wrap;
  font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32); }
.s8-out a { opacity:.85; text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.45);
  transition:opacity .25s ease, text-decoration-color .25s ease; }
.s8-out a:hover { opacity:1; text-decoration-color:#fff; }


/* ==========================================================================
   无 WebGL 兜底
   ========================================================================== */
.no-gl #hero-gl { display:none; }
.no-gl .hero::before { content:''; position:absolute; left:50%; top:50%; z-index:1;
  width:min(40vh,70vw); aspect-ratio:1; transform:translate(-50%,-50%);
  background:url(../assets/balls-hd/logoball.webp) no-repeat center/contain; }
.no-gl .s8-ball { display:none; }

/* ==========================================================================
   移动端(≤768px):等比缩小 + 布局重排
   ========================================================================== */
@media (max-width:768px) {
  :root { --u:calc(100vw / 768); }
  .nav { padding:16px 5vw 12px; gap:10px; }   /* 4 项后总宽吃紧,边距收到 5vw */
  /* 首屏 dvh 自适应:100vh 在手机上=大视口,地址栏展开时首屏高出可视区,
     球和文字被顶到偏下、下缘露出一截"白边"(客户 0814);dvh 跟随实际可视高 */
  #hero-wrap, .hero { height:100vh; height:100dvh; }
  .s4-stage { height:100vh; height:100dvh; }
  .nav .menu { gap:13px; }
  .nav .menu a { font-size:12.5px; letter-spacing:-.02em; white-space:nowrap; }
  .nav .brand { width:70px; flex:none; }
  #hero-wrap { height:100vh; }
  /* 一行放下,不换行;top 同样吃 kv.js 算的安全值 */
  .welcome { font-size:5vw; letter-spacing:-.02em; top:var(--welcome-top, 68%); white-space:nowrap; }
  /* 移动端 ② 文案:不要白色渐变纱(会吞掉球簇下半),球簇整体上移让位即可 */
  .s2-copy { left:0; right:0; top:auto; bottom:0; padding:64px 6vw 13vh; background:none; }   /* 上移:离下方箭头拉开距离 */
  .s2-title { margin-bottom:14px; }
  .s2-title img { height:40px; }
  /* 右缘参差修正:桌面的写死 <br> 在窄屏产生"长-短-短"锯齿,
     移动端取消 br、用 balance 均匀断行 */
  .s2-desc { font-size:15px; line-height:1.35; margin-bottom:22px; max-width:32ch;
    text-wrap:balance; }
  .s2-desc br { display:none; }
  .s2-cities { gap:12px; }
  .s2-city h3, .s2-city p { font-size:15px; line-height:1.3; }
  .s3 { padding:56px 6vw; min-height:0; }
  .s3-wrap { grid-template-columns:1fr; gap:26px; }
  .s3-title { font-size:30px; white-space:normal; }
  .s3-title img { height:32px; margin-top:8px; }
  .s3-copy { font-size:15px; line-height:1.35; max-width:none; text-wrap:pretty; }
  /* 三城球:SG 收窄到 56vw(22..78vw),两侧球心(16.5vw / 83.5vw)露出 SG 外沿,
     只让边缘少许叠在 SG 后面——之前 66vw 的 SG 把两侧球的球心和烘焙文字全挡住了 */
  /* ④ 移动端三球:竖屏排不下横向三连(两侧球会被 SG 大球压住、球面文字被切)——
     改三角阵:SG 居上,两小球错落到下方两侧,互不遮挡 */
  /* 2026-08-12 客户二调:SG 放大居中,伦敦/洛杉矶绕它做空间轨道(main.js 驱动,
     常转不停;转到后方变小、转到前方变大盖过 SG)。下面的 left/top 只是无 JS 兜底位 */
  /* ③b 视频带:移动端保留,原生 4:1 全宽(2026-08-14 客户改回) */
  /* ④ 段收短:黑场滚动行程减少(470vh→320vh) */
  .s4 { height:320vh; }
  .s4-london { left:4vw; top:15%; width:27vw; }
  .s4-sg { left:50%; top:26%; width:72vw; transform-origin:center; margin-left:-36vw; }
  .s4-la { left:69vw; top:57%; width:27vw; }
  .s4-london.float, .s4-la.float { animation:none; }   /* 轨道运动本身就是动态,不再叠浮动 */
  .s4-copy { font-size:15px; line-height:1.35; width:86vw; top:auto; bottom:13vh; }
  .s4-chevron { width:26px; top:auto; bottom:6vh; }
  .hero-cue { bottom:4vh; }
  /* ⑥ 移动端 = 顶部横图带(完整大图 fit-width,4113/2160)+ 文字下接,
     与 ⑦ 同一版式(2026-08-12 客户:统一"横图 + 下方文字") */
  /* 文字块锚在舞台底部固定 24px:舞台是 100dvh,所以这 24px 是"离可见底边"的距离,
     地址栏收放、换机型都不变,也永远不会被裁掉。
     (原来写 top:calc(44vh + 22px) —— 带按视口比例走、文字块自身高度却是固定 px,
      底部黑边 = 0.56H − 346,375×667 上只剩 28px、430×932 上有 196px,差 7 倍) */
  .zl-s6copy { left:6vw; right:6vw; top:auto; bottom:24px; }
  .zl-s6shade { display:none; }
  /* 图只活在带内:带外裁掉(带=导航下 48px 起、高 42vh)。
     常开而非 s6-on 才开——收带过程全程发生在"窗口"里,没有硬切帧;
     带外露不出来是因为 GL 全屏层压在上面直到 0.84 才让路 */
  /* 图直接从视口顶起(导航是半透磨砂,压在图上即可):原来从 48px 起,
     一旦实际导航高度不等于 48px 就会露出一条黑缝(客户 0817) */
  /* 带底 = 文字块顶 − 22px,由 CSS 对当前舞台高实时求值(--s6copyH 只含文字块高 + 上下距,
     与视口高度无关),所以地址栏收放、不派发 resize 都压不到字上 */
  .zl-s6 { clip-path:inset(0 0 var(--s6copyH, 346px) 0); }
  .s6-title { font-size:28px; line-height:1.05; margin-bottom:12px; }
  .s6-desc { font-size:15px; line-height:1.35; margin-bottom:16px; max-width:none; }
  .s6-list { gap:10px; }
  .s6-item h3, .s6-item p { font-size:15px; line-height:1.3; }
  .zl-s6shade { background:url(../assets/sections/shade-left.png) left top / auto 100% no-repeat; }
  /* ⑦ 移动端:横图不再整屏 cover(竖屏把 3840×2190 裁成细条,信息全失)——
     图按原始宽高比完整铺出,指示条/文案依次排在图下,板块高度随内容走 */
  .s7 { height:auto; min-height:0; overflow:visible; display:flex; flex-direction:column; }
  .s7-bgs { position:relative; inset:auto; width:100%; aspect-ratio:3840/2190; overflow:hidden; order:1; }
  .s7-shade { display:none; }
  .s7-dots { position:static; transform:none; order:2; justify-content:center; padding:16px 0 0; gap:8px; }
  .s7-dot { width:34px; height:4px; }
  .s7-copy { position:static; left:auto; right:auto; top:auto; bottom:auto; order:3;
    padding:22px 6vw 44px; }
  .s7-copy h2 { font-size:30px; margin-bottom:12px; }
  .s7-desc { font-size:15px; line-height:1.35; margin-bottom:18px; }
  .s7-sched { gap:10px; }
  .s7-slot h3 { font-size:17px; }
  .s7-slot p { font-size:15px; }
  /* ⑧:dvh 动态满屏(svh 在地址栏收起时会露白、lvh 在栏展开时被裁——只有 dvh 双向贴合) */
  .s8 { height:auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
  .s8-core { flex:1; justify-content:center; height:auto; padding:4vh 0; }
  .s8-foot { position:relative; margin-top:0; }
  .s8-kicker { margin-top:0; font-size:15px; width:86vw; text-align:center; }
  /* 一排四个(2026-08-14 客户):22vw 卡 ×4 + 间隙 ≈ 94vw 放得下 */
  .s8-cards { display:flex; gap:2vw; margin-top:20px; }
  .s8-card { width:22vw; }
  /* 卡片压深 + 磨砂加强:文字不再直接浮在球上 */
  .s8-num { height:9.5vh; font-size:9vw; border-radius:10px;
    background:rgba(14,14,16,.46);
    -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
  .s8-lab { font-size:13px; }
  .s8-tag { margin-top:4vh; }
  .s8-lab { margin-top:6px; font-size:15px; }
  .s8-tag { margin-top:5vh; font-size:26px; padding:0 6vw; }
  /* 结尾 welcome 一行放下不换行(2026-08-13 客户) */
  .s8-tag span { display:block; font-size:5.4vw; white-space:nowrap; }
  .s8-foot { padding:16px 6vw; flex-direction:column; align-items:flex-start; gap:12px; }   /* 图标一行、链接一行,不挤 */
  .s8-social { gap:16px; }
  .soc { width:20px; }
  .s8-out { font-size:14px; gap:18px; }
}

/* ==========================================================================
   减动效:直接给成品态
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-h, .s6-title, .s6-desc, .s6-item { opacity:1 !important; transform:none !important;
    filter:none !important; transition:none !important; }
  .welcome { display:none; }
  .s4-ball { opacity:1; transform:none; filter:none; transition:none; }
  .s4-chevron { opacity:.9; animation:none; }
  .s4-ball.float, .s7-bg, .s4-chevron.on { animation:none; }
  .s7-bg { transform:none; }
  .s4 { height:100vh; }
  .zl-s5 { display:none; }
}