/* ==========================================================================
   CapCut World 2026 — Los Angeles 站样式
   设计稿基准 1920×1080/1095,尺寸统一走 --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;
  --purple:#c8b6ff;
  --purple-2:#e8c8ff;
  --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 { background:linear-gradient(var(--paper), var(--paper) 50%, #000 50%, #000); scroll-behavior:auto; }
html, body { overflow-x:clip; }
body { font-family:var(--albert); 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; }

/* ---------- 板块之间互压 1px:iOS Safari 在小数像素边界会漏出一条 body 底色的白缝(客户 9/6 反馈 ③→④、⑩→⑪ 两处) ---------- */
.s3, .s3v, .s5, .s678, .s9, .s10, .s11, .s12, .s8 { margin-top:-1px; }

/* ---------- 全局浮现规则:模糊→清晰 + 轻微上移 ---------- */
.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); }

/* ---------- 仅移动端生效的强制换行(桌面端隐藏) ---------- */
.mbr { display:none; }

/* ==========================================================================
   导航(②起常驻;默认深字适配白/青底,入黑底板块 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,.1);   /* 与 creator 站导航线同色(领导:美国站的显粗) */
  background:rgba(255,255,255,.001);
  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,.16); }   /* 同 creator 深色主题 */
.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; }
.nav .menu a:hover { font-weight:700; }
.nav .menu a.on { font-weight:700; }
/* 9/18: Join us 去掉青底胶囊,与其他菜单项一致(领导:不是真报名通道,别做那么重) */

/* 移动端汉堡 + 全屏折叠菜单(creator 站同款) */
.burger { display:none; background:none; border:0; padding:0; width:40px; height:40px; flex:none;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; color:inherit; }
.burger span { display:block; width:22px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .3s ease, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.m-menu { position:fixed; inset:0; z-index:55; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:34px; font-family:var(--albert);
  font-size:26px; font-weight:700; background:rgba(0,0,0,.94); color:#fff;
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
.m-menu.open { opacity:1; pointer-events:auto; }
.m-menu a { color:#fff; }
body.menu-open .nav { color:#fff; border-bottom-color:transparent;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }

/* ==========================================================================
   ① + ② 首屏(开场吸积 → 球簇 → 洛杉矶场文案,与新加坡同构)
   ========================================================================== */
#hero-wrap { position:relative; height:100vh; background:var(--paper); }
.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 { 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; }

.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;城市顺序 LA → London → Singapore(已结束,压 50% 透明)) */
.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; }
.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); }
.s2-city.s2-done.in { opacity:.5; }   /* 新加坡场已结束:沉到 50% */

/* ==========================================================================
   ③ About(黑底 1920×674:左侧 3D 黑球自动旋转 + 标题 + 双段简介)
   ========================================================================== */
.s3 { position:relative; z-index:3; background:#000; color:#fff; overflow:hidden;
  min-height:calc(var(--u) * 674); }
.s3-ball { position:absolute; z-index:1; left:calc(var(--u) * -151.5); top:calc(var(--u) * -59.5);
  width:calc(var(--u) * 943); aspect-ratio:1; pointer-events:none; opacity:.2; }
.s3-ball canvas { position:absolute; inset:0; width:100%!important; height:100%!important; display:block; }
.s3-wrap { position:relative; z-index:2; }
.s3-title { position:absolute; left:calc(var(--u) * 80); top:calc(var(--u) * 205);
  font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 110);
  line-height:1.14; letter-spacing:calc(var(--uv) * -1.1); }
.s3-copy { position:absolute; left:calc(var(--u) * 885); top:calc(var(--u) * 213);
  width:calc(var(--u) * 905); }
.s3-copy p { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.1; letter-spacing:calc(var(--uv) * -0.64); text-wrap:pretty; }
.s3-copy p + p { margin-top:calc(var(--uv) * 47); }

/* ==========================================================================
   ④ 全宽视频带(4:1,沿用新加坡片源;#fdfdfd 底色与首帧同色,不闪黑)
   ========================================================================== */
.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; }

/* ==========================================================================
   ⑤ 青色屏:Limited spots(地球 + 虚线轨道 + 头像球 + 飞机,1920×1080)
   层序:虚线轨道 SVG(0) → 藏到地球后的头像(1,JS 逐帧写)→ 地球(2)
   → 地球上/LA 球后的头像(3,JS 逐帧写)→ LA 球+波纹(4)
   → 最前头像/飞机(6,JS 逐帧写)→ 文案(7)
   ========================================================================== */
.s5 { position:relative; z-index:3; background:var(--cyan); color:#000; overflow:hidden;
  min-height:calc(var(--u) * 1080); }
.s5-copy { position:absolute; z-index:7; left:0; right:0; top:calc(var(--u) * 230.5); text-align:center; }
.s5-title { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 123);
  line-height:.813; letter-spacing:calc(var(--uv) * -1.2); }
.s5-desc { margin-top:calc(var(--uv) * 28); font-family:var(--albert); font-weight:400;
  font-size:calc(var(--uv) * 32); line-height:1.1; letter-spacing:calc(var(--uv) * -0.32); }

.s5-scene { position:absolute; inset:0; z-index:1; }
.s5-orbits { position:absolute; left:0; top:0; z-index:3; width:100%; height:calc(var(--u) * 1080); }
.s5-dash { fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:11 9; opacity:.95; }
#s5-orbitA { animation:s5marchA 1.15s linear infinite; }
@keyframes s5marchA { to { stroke-dashoffset:20; } }    /* 前半球虚线 L→R,步长=dash 周期 */
.s5-globe { position:absolute; z-index:2; left:calc(var(--u) * 56.2); top:calc(var(--u) * 648.2);
  width:calc(var(--u) * 1816.25); max-width:none; }
.s5-laball { position:absolute; z-index:5; left:calc(var(--u) * 781.35); top:calc(var(--u) * 554.2);
  width:calc(var(--u) * 357.5); max-width:none; }
.s5-av, .s5-plane { position:absolute; left:0; top:0; z-index:6; pointer-events:none;
  will-change:transform, opacity; }
.s5-av img, .s5-plane img { display:block; width:100%; height:auto; }

/* ==========================================================================
   ⑥⑦⑧ 同一条 pin 轨(560vh):三城气泡 → LA 球放大右移 → 照片球 → 环形画廊
   ========================================================================== */
.s678 { position:relative; z-index:3; height:560vh; background:#000; }
.s678-stage { position:sticky; top:0; height:100vh; min-height:640px; overflow:hidden; }

/* ---- ⑥ 三城气泡(黑底;球体 WebGL 画,DOM 是位置骨架 + 活字标签) ---- */
.s6-layer { position:absolute; inset:0; z-index:2; background:#000; color:#fff; }
#s6-gl { position:absolute; inset:0; z-index:4; pointer-events:none; }   /* 紫层(z3)之上:交接衔接 */
#s6-gl canvas { position:absolute; inset:0; width:100%!important; height:100%!important; display:block; }
.s6-ball { position:absolute; z-index:2; aspect-ratio:1; container-type:size;
  user-select:none; -webkit-user-select:none; will-change:transform, opacity, filter;
  opacity:0; transform:scale(.6); filter:blur(18px);
  transition:opacity .9s var(--ease-k) var(--d, 0s), transform .9s var(--ease-spring) var(--d, 0s),
    filter .9s var(--ease-k) var(--d, 0s); }
.s6-ball.pop { opacity:1; transform:none; filter:blur(0); }
.s6-london { left:calc(var(--u) * 130); top:min(calc(var(--u) * 300), 27vh); width:min(calc(var(--u) * 350), 34vh); }
.s6-la     { left:calc(50% - min(var(--u) * 312.5, 30vh)); top:min(calc(var(--u) * 162.5), 15vh);
  width:min(calc(var(--u) * 625), 60vh); z-index:3; }
.s6-sg     { left:calc(var(--u) * 1440); top:min(calc(var(--u) * 312), 28.5vh); width:min(calc(var(--u) * 338), 33vh); }
/* 待机微浮(同 SG:独立 translate 属性,GPU 合成) */
.s6-ball.float { animation:s6float 6.8s ease-in-out infinite; }
.s6-la.float { animation-duration:7.8s; }
.s6-london.float { animation-duration:6.6s; animation-delay:-2.2s; }
.s6-sg.float { animation-duration:7.3s; animation-delay:-4.5s; }
@keyframes s6float { 0%,100% { translate:0 0; } 50% { translate:calc(var(--u) * 6) calc(var(--u) * -20); } }
.s678-stage.driving .s6-ball { animation:none; }   /* 转场逐帧驱动期间摘掉待机微浮 */
/* 球面活字:CapCut Sans Text 700 白字,随球径用 cqw 缩放 */
.s6-label { position:absolute; left:50%; top:50%; z-index:4; width:260%;
  transform:translate(-50%,-50%); text-align:center; pointer-events:none;
  font-family:var(--albert); color:#fff; }
.s6-label h3 { font-weight:700; line-height:1.05; white-space:nowrap; }
.s6-label p { font-weight:700; line-height:1.3; white-space:nowrap; opacity:.92; }
/* 球面文字贴片(与新加坡站同款:1200² 方图与球外接正方形 1:1 对齐,width = 球径即可;
   文字在图里已按球面弧度做过环绕,不再用 DOM 活字) */
.s6-title-la { position:absolute; z-index:5; pointer-events:none;
  left:50%; top:calc(min(var(--u) * 162.5, 15vh) + min(var(--u) * 625, 60vh) * .5);
  width:min(var(--u) * 625, 60vh); transform:translate(-50%,-50%); transition:opacity .9s var(--ease-k) .15s; }
.s678-stage.driving .s6-title-la { transition:none; }
.s6-title-la img, .s6-title img { display:block; width:100%; height:auto; max-width:none; }
/* 伦敦/新加坡贴片:独立层(z5,GL 画布之上),位置/--bw 由 JS 逐帧贴球心 */
.s6-title { position:absolute; z-index:5; pointer-events:none;
  left:-9999px; top:-9999px; width:var(--bw, 300px); transform:translate(-50%,-50%); }
.s6-london .s6-label { margin-top:5.4cqw; }
.s6-london h3 { font-size:15.7cqw; }
.s6-london p { font-size:7.4cqw; margin-top:2.8cqw; }
.s6-la h3 { font-size:24cqw; }
.s6-la p { font-size:10.4cqw; margin-top:3.2cqw; }
.s6-sg .s6-label { margin-top:5.4cqw; }
.s6-sg h3 { font-size:16.3cqw; }
.s6-sg p { font-size:7.7cqw; margin-top:2.8cqw; }

.s6-copy { position:absolute; z-index:4; left:50%; top:79.2%; transform:translateX(-50%);
  font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 32);
  line-height:1.1; text-align:center; color:#fff; }
.s6-chevron { position:absolute; z-index:4; left:50%; top:88.2%; transform:translateX(-50%);
  width:calc(var(--u) * 41); color:#fff; opacity:.9; animation:chev-bob 2.6s ease-in-out infinite; }
.s6-chevron svg { display:block; width:100%; }

/* ---- ⑦⑧ 紫底层:默认藏起来,JS 在穿越段淡入 ---- */
.s78-layer { position:absolute; inset:0; z-index:3; background:var(--purple); color:#000;
  opacity:0; pointer-events:none; overflow:hidden; }
.s78-layer.on { pointer-events:auto; }
.s7-copy { position:absolute; z-index:4; left:calc(var(--u) * 90); top:min(calc(var(--u) * 407), 37.7vh); }
.s7-copy h2 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 120);
  line-height:.81; letter-spacing:calc(var(--uv) * -1.2); margin-bottom:calc(var(--uv) * 66); }
.s7-copy p { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 64);
  line-height:.89; letter-spacing:calc(var(--uv) * -0.64); }
.s8-date { position:absolute; z-index:4; left:0; right:0; top:min(calc(var(--u) * 234), 21.7vh);
  text-align:center; font-family:var(--albert); font-weight:700;
  font-size:calc(var(--uv) * 38); letter-spacing:calc(var(--uv) * -0.38); opacity:0; }
.s8-note { position:absolute; z-index:4; left:0; right:0; top:min(calc(var(--u) * 852), 78.9vh);
  text-align:center; font-family:var(--albert); font-weight:500;
  font-size:calc(var(--uv) * 32); line-height:1.35; letter-spacing:calc(var(--uv) * -0.32); opacity:0; }

/* ⑦⑧ 照片球/环形画廊:js/orb78.js 的 WebGL 单画布(铺满紫层,文字在其上) */
#orb-gl { position:absolute; inset:0; z-index:3; pointer-events:none; }
#orb-gl canvas { position:absolute; inset:0; width:100%!important; height:100%!important; display:block; }

/* ==========================================================================
   ⑨ Featured Speakers(白底 1920×1095:左文案 + 双卡自动轮播)
   ========================================================================== */
/* ⑨ Featured Speakers(9/18 二改:标题在上,一行 3.5 卡横滑,第 4 张露一半即"可滑"提示;
   整屏 min-height:100vh 垂直居中撑满一屏。卡宽 --cw 由屏宽算出:80u 左距 + 3.5 卡 + 3 条 28u 缝 = 100vw;
   宽屏矮窗(如 1920×900 带浏览器栏)用 50vh 封顶卡宽,保证纵向一屏放全;卡内元素随 --cw 等比缩放) */
.s9 { position:relative; z-index:3; background:var(--paper); color:#000;
  /* 卡宽双约束取小:①(100vw-164u)/3.5 保证一行 3.5 卡;②(77vh-118u)×0.712 由"100vh - 顶部 nav 留白
     118u - 标题/正文/间距 22.98vh"反推,保证宽屏矮窗整屏也放全 */
  --cw:min(calc((100vw - var(--u) * 164) / 3.5), calc((77vh - var(--u) * 118) * 0.712));
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--u) * 118) 0 3vh;   /* 顶部垫出固定导航高度,整屏居中时标题不藏进导航 */
  overflow:hidden; }
.s9-copy { padding:0 calc(var(--u) * 80); }
.s9-copy h2 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 110);
  line-height:.968; letter-spacing:calc(var(--uv) * -1.1); white-space:nowrap; }   /* 9/18: 标题不换行 */
.s9-copy p { margin-top:calc(var(--uv) * 28); font-family:var(--albert); font-weight:400;
  font-size:calc(var(--uv) * 30); line-height:1.27; letter-spacing:calc(var(--uv) * -0.3); white-space:nowrap; }   /* 正文不换行 */

.s9-view { margin-top:4vh;
  padding:0 0 0 calc(var(--u) * 80);   /* 头像球被卡片裁在卡内,无需额外顶部留白 */
  overflow-x:auto; scrollbar-width:none;
  cursor:grab; touch-action:pan-x pan-y; user-select:none; -webkit-user-select:none; }
.s9-view::-webkit-scrollbar { display:none; }
.s9-view:active { cursor:grabbing; }
.s9-card img { -webkit-user-drag:none; }
.s9-track { display:flex; gap:calc(var(--u) * 28); }
/* 9/18: 滚动容器右 padding 在滑到末尾时不生效(末卡贴屏幕右边),改为轨尾占位块:
   28u 卡缝 + 52u 占位 = 80u,与首张卡左侧 80u 端距一致 */
.s9-track::after { content:""; flex:none; width:calc(var(--u) * 52); }
.s9-card { position:relative; flex:none; width:var(--cw); height:calc(var(--cw) * 674 / 480);
  isolation:isolate; overflow:hidden; border-radius:calc(var(--cw) * 16 / 480);
  background:var(--card); }   /* 超出圆角矩形的球部分被裁剪(设计稿实测) */
/* 头像球直接压在卡体色块之上(球图本身带透明底,轮廓即圆孔)。
   旧写法是 ::before 用 mask 径向渐变挖孔、球藏在 z-index:-1 后面;Safari 会把 mask 里
   基于 vw 的 calc 长度算小(孔径与球不同心、露出大半张平底图),故弃用 mask。 */
.s9-ballwrap { position:absolute; left:50%; top:calc(var(--cw) * -188.3 / 480); z-index:0;
  width:calc(var(--cw) * 554 / 480); aspect-ratio:1; transform:translateX(-50%); pointer-events:none; }
.s9-ballwrap img { width:100%; height:100%; object-fit:contain; }
/* 文案块左右必须等距(各 55/480·卡宽):旧值左 74 右 36,文案偏右不居中(领导圈出) */
.s9-txt { position:absolute; z-index:1; left:calc(var(--cw) * 55 / 480);
  right:calc(var(--cw) * 55 / 480); top:calc(var(--cw) * 402 / 480); }
.s9-txt h3 { font-family:var(--albert); font-weight:700; font-size:calc(var(--cw) * 32 / 480);
  line-height:1.1; letter-spacing:calc(var(--cw) * -0.32 / 480); }
.s9-txt h4 { margin-top:calc(var(--cw) * 2 / 480); font-family:var(--albert); font-weight:400;
  font-size:calc(var(--cw) * 21 / 480); line-height:1.18; letter-spacing:calc(var(--cw) * -0.21 / 480); }
.s9-txt p { margin-top:calc(var(--cw) * 25 / 480); font-family:var(--albert); font-weight:400;
  font-size:calc(var(--cw) * 21 / 480); line-height:1.29; letter-spacing:calc(var(--cw) * -0.21 / 480); }

/* ==========================================================================
   ⑩ One Day(黑底 1920×1095:三卡位轮播,两侧压暗露黑,可拖动)
   ========================================================================== */
.s10 { position:relative; z-index:3; background:#000; color:#fff;
  min-height:calc(var(--u) * 1095); overflow:hidden; }
.s10-head { position:absolute; left:calc(var(--u) * 83); top:calc(var(--u) * 178); }
.s10-head h2 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 118);
  line-height:1; letter-spacing:calc(var(--uv) * -1.18); white-space:nowrap; }
.s10-mobbr { display:none; }
.s10-head p { margin-top:calc(var(--uv) * 21); font-family:var(--albert); font-weight:400;
  font-size:calc(var(--uv) * 30); line-height:1.1; letter-spacing:calc(var(--uv) * -0.3); }

.s10-view { position:absolute; inset:0; cursor:grab; touch-action:pan-y; }
.s10-view:active { cursor:grabbing; }
.s10-track { position:absolute; left:0; top:calc(var(--u) * 411); display:flex;
  gap:calc(var(--u) * 145); will-change:transform; }
.s10-card { position:relative; flex:none; width:calc(var(--u) * 1255); height:calc(var(--u) * 480);
  border-radius:calc(var(--u) * 32); overflow:hidden; background-color:#111;
  opacity:.45; transition:opacity .8s var(--ease-k); }
.s10-card.is-on { opacity:1; }
/* 图改 <img>(lazy + srcset):手机只解码 900px 版,滚到这一屏不再因为一次解 10 张 2000px 大图而卡顿 */
.s10-img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; }
.s10-txt { position:absolute; z-index:2; left:calc(var(--u) * 36); bottom:calc(var(--u) * 46); }
.s10-pst { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 21);
  letter-spacing:calc(var(--uv) * -0.21); margin-bottom:calc(var(--uv) * 12); opacity:.92; }
.s10-txt h3 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 64);
  line-height:1; letter-spacing:calc(var(--uv) * -0.64); margin-bottom:calc(var(--uv) * 14); }
.s10-txt p { font-family:var(--albert); font-weight:400; font-size:calc(var(--uv) * 30);
  line-height:1.05; letter-spacing:calc(var(--uv) * -0.3); }

.s10-dots { position:absolute; z-index:3; left:50%; top:calc(var(--u) * 919);
  transform:translateX(-50%); display:flex; gap:calc(var(--u) * 18.5); }
.s10-dot { width:calc(var(--u) * 88); height:calc(var(--u) * 5); border-radius:99px;
  background:rgba(255,255,255,.25); overflow:hidden; padding:0; }
.s10-dot i { display:block; height:100%; width:0; border-radius:99px; background:#fff; }
.s10-dot.is-on i { animation:dotfill var(--dur,5s) linear forwards; }
@keyframes dotfill { from { width:0; } to { width:100%; } }   /* 9/18 补:之前没定义,进度条一直是灰的 */


/* ==========================================================================
   ⑪ Join(背景图 1920×571 + 左侧文案)
   ========================================================================== */
.s11 { position:relative; z-index:3; color:#fff; overflow:hidden;
  height:calc(var(--u) * 571);
  background:url(../assets/la/join-bg.jpg) center/cover no-repeat #16120e; }
.s11-copy { position:absolute; left:calc(var(--u) * 89); top:calc(var(--u) * 131); }
.br-m { display:none; }   /* 移动端专用换行(桌面隐藏) */
.s11-copy h2 { font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 118);
  line-height:.847; letter-spacing:calc(var(--uv) * -1.18); }
.s11-copy p { margin-top:calc(var(--uv) * 39); margin-left:calc(var(--u) * -4);
  font-family:var(--albert); font-weight:400;
  font-size:calc(var(--uv) * 30); line-height:1.13; letter-spacing:calc(var(--uv) * -0.3); }
.s11-copy strong { font-weight:700; }

/* ==========================================================================
   ⑫ How to Participate(青底 1920×1080:四步卡片 + 右图)
   ========================================================================== */
.s12 { position:relative; z-index:3; background:var(--cyan); color:#000;
  min-height:calc(var(--u) * 1080); overflow:hidden; }
.s12-title { position:absolute; left:calc(var(--u) * 91); top:calc(var(--u) * 159);
  font-family:var(--albert); font-weight:700; font-size:calc(var(--uv) * 116);
  line-height:1; letter-spacing:calc(var(--uv) * -1.16); }
/* 9/18 二改:左卡列与右图放进 flex 行,min-height 同为 596u 且 align-items:stretch,
   两侧底部永远对齐(旧写法各自绝对定位,卡列 589.5u 与图 596u 差 6.5u 对不齐) */
.s12-body { position:absolute; left:calc(var(--u) * 85); right:calc(var(--u) * 84);
  top:calc(var(--u) * 330); display:flex; align-items:stretch; gap:calc(var(--u) * 82); }
.s12-steps { width:calc(var(--u) * 660); flex:none; display:flex; flex-direction:column;
  justify-content:space-between; gap:calc(var(--u) * 21.5); min-height:calc(var(--u) * 596); }
.s12-card { position:relative; background:#F2F2F2; border-radius:calc(var(--u) * 22);
  min-height:calc(var(--u) * 122);
  padding:calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 26) calc(var(--u) * 136); }
/* 卡4 曾把 padding-left 加大到 148.5u,导致正文比 1-3 右移 12.5u(领导圈出);序号框已等宽,正文左边距必须一致 */
.s12-card:nth-child(4) { min-height:calc(var(--u) * 159); }
/* 序号 1-4 四个 SVG 天然宽度不一(47/91/87/93):统一放进 133u 等宽框内居中,
   否则窄的"1"比 2/3/4 明显偏左(客户:1 要和下面 2、3、4 对齐) */
.s12-num { position:absolute; left:calc(var(--u) * 5); top:calc(var(--u) * 20);
  height:calc(var(--u) * 150); width:calc(var(--u) * 133);
  object-fit:contain; object-position:center; }
.s12-card p, .s12-card li { font-family:var(--albert); font-weight:400;
  font-size:calc(var(--uv) * 21); line-height:1.29; letter-spacing:calc(var(--uv) * -0.21); }
.s12-card strong { font-weight:700; }
.s12-card ul { margin-top:calc(var(--uv) * 10); padding-left:1.05em; }
.s12-card li { margin-top:calc(var(--uv) * 4); }
.s12-card li::marker { font-size:.8em; }
.s12-imgwrap { position:static; flex:1 1 auto; min-width:0; min-height:calc(var(--u) * 596);
  border-radius:calc(var(--u) * 25); overflow:hidden; }
.s12-imgwrap img { width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   ⑬ 末屏:巨球 + 倒计时(截止 2026-10-24 10:00 PDT)+ 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; }
.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; }
.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); }
.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, .no-gl #s6-gl, .no-gl .s8-ball { 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 .s3-ball { background:url(../assets/la/s3-ball-fallback.webp) no-repeat left top / 100% auto; }
.no-gl #orb-gl { display:none; }
.no-gl .s6-ball .s6-label, .no-gl .s6-title-la, .no-gl .s6-title { display:none; }

/* ==========================================================================
   移动端(≤768px)
   ========================================================================== */
@media (max-width:768px) {
  :root { --u:calc(100vw / 768); }
  .mbr { display:block; }   /* 移动端强制换行生效 */
  .nav { padding:14px 5vw; }
  /* 9/18: 移动端导航改 creator 同款折叠菜单(弃用"只留 Join us"的临时方案) */
  .nav .menu { display:none; }
  .burger { display:flex; }
  .nav .brand { width:70px; flex:none; }
  #hero-wrap, .hero { height:100vh; height:100dvh; }
  .s678-stage { height:100vh; height:100dvh; min-height:0; }   /* min-height:640 会让舞台比矮屏高,吸顶末端被挤出视口 */
  .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; }
  .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; }
  /* ③ About:球退到标题后当背景,文字顺排 */
  .s3 { min-height:0; padding:64px 6vw 72px; }
  .s3-ball { left:-38vw; top:-30vw; width:110vw; opacity:.2; }
  .s3-title { position:static; font-size:40px; line-height:1.05; letter-spacing:-.02em; margin-bottom:18px; }
  .s3-copy { position:static; width:auto; font-size:15px; }
  .s3-copy p { font-size:15px; line-height:1.45; letter-spacing:0; }
  .s3-copy p + p { margin-top:14px; }
  /* ⑤:场景按 1920 稿等比收进屏宽(与 JS u=vw/1920 同尺),文字置顶、场景沉底 */
  /* ④ 视频带:片尾定格那张黑色圆角块离画面顶边约 3.5%,在 97px 高的手机窗口里就是一条白缝压在黑色 About 下面;
     手机端把窗口压矮 4%、贴底裁掉上沿(桌面 270px 高时是设计里正常的白底) */
  .s3v video { aspect-ratio:4/0.96; object-fit:cover; object-position:center bottom; }
  /* ⑤:场景按 1920 稿等比放大到 160vw(两侧出血),地球/LA 球/头像轨道都跟着变大,屏幕不再空;
     JS 的 u 取场景实际宽度/1920,与这里同尺 */
  .s5 { min-height:calc(160vw * 0.5625 + 150px); }   /* 文案与场景之间少留 50px,这屏别太空 */
  .s5-copy { top:84px; padding:0 6vw; }   /* 避开固定 nav(两行菜单约 63px) */
  .s5-scene { --u:calc(160vw / 1920); top:auto; bottom:0; left:-30vw; width:160vw; height:calc(160vw * 0.5625); }
  .s5-orbits { height:100%; }
  .s5-title { font-size:34px; line-height:1.05; letter-spacing:-.02em; }   /* 桌面的 .813 行高在手机上两行会叠 */
  .s5-desc { font-size:15px; line-height:1.45; letter-spacing:0; margin-top:14px; }
  /* ⑥⑦⑧:行程收短,球阵改三角(LA 居上,两小ball 落两侧) */
  .s678 { height:420vh; }
  .s6-london { left:4vw; top:56%; width:27vw; }
  .s6-la { left:calc(50% - 33vw); top:16%; width:66vw; }   /* 不用 margin-left:JS 接管 left 时会多偏 33vw,与照片球错位成重影 */
  .s6-title-la { top:calc(16% + 33vw); width:66vw; }
  .s6-sg { left:69vw; top:56%; width:27vw; }
  .s6-ball.float { animation:none; }
  .s6-copy { font-size:15px; line-height:1.45; width:86vw; top:auto; bottom:12vh; }
  .s6-chevron { width:26px; top:auto; bottom:5.5vh; }
  .s7-copy { left:6vw; right:6vw; top:max(13vh, 96px); }   /* 固定 nav 两行菜单约 63px 高,标题要让出来 */
  .s7-copy h2 { font-size:34px; line-height:1.05; letter-spacing:-.02em; margin-bottom:14px; }   /* 桌面 .81 行高在手机上太挤 */
  .s7-copy p { font-size:15px; line-height:1.45; letter-spacing:0; }
  /* ⑧ 手机端:⑦ 的「Step into…」文案留在顶部不淡出(main.js);
     9/18 客户拍板:居中的日期两行移动端不显示,画廊独占中段 */
  .s8-date { display:none; }
  .s8-note { font-size:15px; line-height:1.55; width:86vw; left:7vw; right:7vw; top:auto; bottom:7vh; }
  /* ⑨:标题在上,卡片横滑,露出下一张的边缘提示可滑 */
  .s9 { min-height:0; display:block; padding:64px 0 72px; }
  .s9-copy { padding:0 6vw; }
  .s9-copy h2 { font-size:36px; line-height:1.05; letter-spacing:-.02em; }   /* 36px 单行不溢出 320px 屏 */
  .s9-copy p { font-size:15px; line-height:1.45; letter-spacing:0; margin-top:14px; white-space:normal; }   /* 移动端允许正文换行 */
  .s9-view { margin-top:0; padding:28px 0 0 6vw; }
  .s9-track::after { width:calc(6vw - var(--u) * 28); }   /* 移动端末卡右侧端距同样补齐到 6vw */
  .s9-card { width:78vw; height:110vw; border-radius:2.6vw; }
  .s9-ballwrap { width:90vw; top:-30.6vw; }
  .s9-txt { left:22px; right:22px; top:66vw; }
  .s9-txt h3 { font-size:24px; letter-spacing:-.02em; }
  .s9-txt h4, .s9-txt p { font-size:15px; letter-spacing:0; }
  /* ⑩:单卡横滑 */
  .s10 { min-height:0; padding:64px 0 72px; }
  .s10-head { position:static; padding:0 6vw 28px; }
  .s10-head h2 { font-size:40px; line-height:1.05; letter-spacing:-.02em; white-space:normal; }
  .s10-mobbr { display:block; }
  .s10-head p { font-size:15px; line-height:1.45; letter-spacing:0; margin-top:14px; }
  .s10-view { position:relative; inset:auto; }
  .s10-track { position:static; padding:0; gap:16px; }   /* JS 已按屏宽居中,这里不能再加 6vw 左边距 */
  .s10-card { width:86vw; height:56vw; }
  .s10-card::after { content:''; position:absolute; z-index:1; left:0; right:0; bottom:0; height:64%;
    background:linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.28) 55%, rgba(0,0,0,0)); pointer-events:none; }   /* 手机上文字压在亮图上看不清:下半部压一层渐变 */
  .s10-txt { left:18px; bottom:16px; }
  .s10-pst { font-size:12px; }
  .s10-txt h3 { font-size:26px; }
  .s10-txt p { font-size:14px; }
  .s10-dots { position:static; transform:none; justify-content:center; margin-top:24px; gap:8px; }
  .s10-dot { width:44px; height:4px; }
  /* ⑪⑫ */
  .s11 { height:auto; min-height:88vw; background-position:center right; }
  .s11-copy { position:static; padding:64px 6vw 72px; }
  .s11-copy h2 { font-size:40px; line-height:1.05; letter-spacing:-.02em; }
  .s11-copy p { font-size:15px; line-height:1.45; letter-spacing:0; margin-top:14px; margin-left:0; }
  .s11-copy .br-d { display:none; }
  .s11-copy .br-m { display:block; }
  .s12 { min-height:0; padding:64px 6vw 72px; }
  .s12-title { position:static; font-size:40px; line-height:1.05; letter-spacing:-.02em; margin-bottom:28px; }
  .s12-body { position:static; display:block; }
  .s12-steps { position:static; width:auto; min-height:0; gap:12px; }
  .s12-card { min-height:0; padding:16px 18px 16px 76px; }
  /* 数字竖直居中、统一 48px 框,不再继承桌面 top:20u(≈4px)导致的顶部贴边残影 */
  .s12-num { left:16px; top:50%; transform:translateY(-50%); height:56px; width:48px; }
  .s12-card p, .s12-card li { font-size:14px; line-height:1.4; letter-spacing:0; }
  .s12-imgwrap { position:static; width:100%; height:auto; min-height:0; margin-top:20px; border-radius:16px; }
  /* ⑬: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; }
  .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 { margin-top:6px; font-size:15px; }
  .s8-tag { margin-top:5vh; font-size:26px; padding:0 6vw; }
  .s8-tag span { display:block; font-size:5.4vw; white-space:nowrap; }
  /* 9/18: 移动端保留两行,各自水平居中(用户定案) */
  .s8-foot { padding:16px 6vw; flex-direction:column; align-items:center; gap:12px; }
  .s8-social, .s8-out { margin:0 auto; }
  .s8-social { gap:16px; }
  .soc { width:20px; }
  .s8-out { font-size:14px; gap:18px; }
}

/* 矮屏手机(<700px,如 iPhone SE/折叠屏半屏):文字块缩小,配合 orb78.js 里环同步缩到 4.0 */
@media (max-width:768px) and (max-height:700px) {
  .s7-copy h2 { font-size:28px; margin-bottom:8px; }
  .s7-copy p { font-size:13px; }
  .s8-note { font-size:13px; bottom:4.5vh; }
}
@media (max-width:768px) and (max-height:600px) {
  .s7-copy { top:80px; }
  .s7-copy h2 { font-size:24px; }
  .s7-copy p { font-size:12px; }
}

/* ==========================================================================
   减动效:直接给成品态
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-h { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .welcome { display:none; }
  .s6-ball.float, .hero-cue i, .s6-chevron, #s5-orbitA { animation:none; }
  .s678 { height:100vh; }
}