/* EnvironTec Vision — vision.css | 版本 20261113a
   配色：深海蓝 / 生态绿 / 青 / 火焰金 / 硫化氢红；只用系统字体
   .js 开头的规则只在动画启动后生效；.portrait 是手机竖屏排版
   页面不滚动：每一幕叠放在同一屏，靠 .on 淡入淡出 */
:root{--navy:#061A2B;--green:#16A34A;--teal:#14B8A6;--gold:#F59E0B;--red:#DC2626;--ink:#EAF4F4}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--navy);-webkit-text-size-adjust:100%}
body{background:var(--navy);color:var(--ink);line-height:1.5;overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
html.js,.js body{height:100%;overflow:hidden}
.js body{position:fixed;top:0;left:0;width:100%;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* 粒子画布与暗角 */
#stage{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;display:block}
body::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(6,26,43,0) 45%,rgba(2,10,18,.7) 100%)}

/* 顶部：进度条、品牌、按钮 */
.progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:5}
.progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal),var(--gold))}
.top{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:16px 20px}
.brand{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.08em;opacity:.9;white-space:nowrap}
.tools{display:flex;gap:8px}
.btn{background:rgba(6,26,43,.35);color:var(--ink);border:1px solid rgba(234,244,244,.35);border-radius:999px;
  padding:6px 13px;font-size:12px;letter-spacing:.08em;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.portrait .top{padding:12px}
.portrait .brand{font-size:13px;letter-spacing:.04em}

/* 音乐按钮：等待点击时闪烁，播放时金色 */
#snd{display:none}
.js #snd{display:inline-block}
.snd-on #snd{border-color:var(--gold);color:var(--gold)}
.snd-wait #snd{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px rgba(245,158,11,.55)}}

/* 每一幕 */
main{position:relative;z-index:2}
.act{position:relative;padding:10vh 6vw;text-align:center}
.js main{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none}
.js .act{position:absolute;top:0;left:0;width:100%;height:100%;padding:0}
.js .copy{position:absolute;left:0;right:0;padding:0 6%;opacity:0;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease}
.js .at-top .copy{top:13%}
.js .at-bottom .copy{bottom:11%;bottom:max(11%,60px)}
.js.portrait .at-top .copy{top:11%}
.js .act.on .copy{opacity:1;transform:none;transition:opacity .7s ease .15s,transform .7s ease .15s}

/* 文字 */
.kicker{font-size:12px;letter-spacing:.32em;color:var(--teal);margin-bottom:18px}
h1,h2{max-width:980px;margin:0 auto;font-weight:600;line-height:1.25;letter-spacing:.02em;
  white-space:pre-line;text-wrap:balance;text-shadow:0 2px 24px rgba(6,26,43,.9);
  font-size:32px;font-size:clamp(24px,4.4vw,50px);font-size:clamp(24px,min(4.4vw,6.4vh),50px)}
html[lang="en"] h1,html[lang="en"] h2{font-size:28px;font-size:clamp(21px,3.4vw,42px);font-size:clamp(21px,min(3.4vw,5.4vh),42px)}
.sub{margin-top:18px;color:var(--gold);letter-spacing:.14em;font-size:16px;font-size:clamp(14px,1.8vw,20px)}
.note{margin-top:12px;opacity:.7;letter-spacing:.12em;font-size:13px;font-size:clamp(11px,1.2vw,14px)}
.hint{display:none}
.snd-wait .hint{display:block;margin-top:16px;font-size:12px;letter-spacing:.2em;opacity:.7;
  animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* 第 2 幕：时间轴标签（位置与粒子节点对齐，勿单独改） */
.tl,.stats,.uses{list-style:none}
.tl li,.stats li,.uses li{margin-top:14px}
.tl b{display:block;color:var(--gold);font-weight:600;letter-spacing:.06em;font-size:26px;font-size:clamp(20px,2.4vw,32px)}
.tl span{opacity:.85;font-size:13px;font-size:clamp(11px,1.15vw,15px)}
.js .tl{position:absolute;left:5%;width:90%;top:60%;display:flex}
.js .tl li{flex:1 1 0;min-width:0;margin:0;padding:0 6px;opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease}
.js .act.on .tl li{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js .act.on .tl li:nth-child(1){transition-delay:.4s}
.js .act.on .tl li:nth-child(2){transition-delay:1.15s}
.js .act.on .tl li:nth-child(3){transition-delay:1.9s}
.js .act.on .tl li:nth-child(4){transition-delay:2.65s}
.js .act.on .tl li:nth-child(5){transition-delay:3.4s}
.js.portrait .tl{left:14%;width:82%;top:31%;height:50%;flex-direction:column}
.js.portrait .tl li{text-align:left;padding:0 0 0 26px;display:flex;flex-direction:column;justify-content:center}

/* 第 4 幕：四个去向的标签（位置由 vision.js 计算，与粒子图形对齐） */
.uses b{display:block;font-weight:600;letter-spacing:.06em;font-size:20px;font-size:clamp(15px,1.9vw,24px)}
.uses span{display:block;opacity:.8;font-size:13px;font-size:clamp(11px,1.1vw,14px)}
.uses li:nth-child(1) b{color:#FB923C}
.uses li:nth-child(2) b{color:#FACC15}
.uses li:nth-child(3) b{color:#7DD3FC}
.uses li:nth-child(4) b{color:#F87171}
.js .uses li{position:absolute;margin:0;text-align:left;line-height:1.35;transform:translateY(-50%);
  opacity:0;transition:opacity .3s ease}
.js .act.on .uses li{opacity:1;transition:opacity .6s ease}
.js .act.on .uses li:nth-child(1){transition-delay:.7s}
.js .act.on .uses li:nth-child(2){transition-delay:1.05s}
.js .act.on .uses li:nth-child(3){transition-delay:1.4s}
.js .act.on .uses li:nth-child(4){transition-delay:1.75s}

/* 第 5 幕：滚动数字 */
.stats b{display:block;font-weight:600;font-variant-numeric:tabular-nums;font-size:34px;font-size:clamp(28px,4.2vw,56px)}
.stats span{color:var(--teal);letter-spacing:.14em;font-size:13px;font-size:clamp(11px,1.2vw,15px)}
.js .stats{position:absolute;left:5%;width:90%;bottom:9%;bottom:max(9%,54px);display:flex;flex-wrap:wrap;
  opacity:0;transition:opacity .3s ease}
.js .act.on .stats{opacity:1;transition:opacity .7s ease .3s}
.js .stats li{flex:0 0 25%;margin:0}
.js.portrait .stats li{flex-basis:50%;margin-top:10px}

/* 第 7 幕：按钮 */
.cta{margin-top:24px}
.cta a{display:inline-block;margin:6px 8px;padding:11px 26px;border-radius:999px;border:1px solid var(--teal);
  color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:.1em}
.cta a.solid{background:var(--green);border-color:var(--green)}
.cta a:hover{border-color:var(--gold);color:var(--gold)}
.cta a.solid:hover{background:var(--gold);color:var(--navy)}
.js .act.on .cta a{pointer-events:auto}

/* 底部：圆点导航与暂停按钮 */
.nav{display:none}
.js .nav{display:flex;position:fixed;left:0;right:0;bottom:10px;z-index:4;justify-content:center;align-items:center;gap:10px}
.dots{display:flex;align-items:center}
.dot{box-sizing:content-box;width:8px;height:8px;border:5px solid transparent;border-radius:50%;padding:0;
  background:rgba(234,244,244,.3);background-clip:padding-box;cursor:pointer}
.dot.on{background-color:var(--gold);width:18px;border-radius:9px}
.nav .btn{padding:3px 10px;font-size:11px}