/* 公司官网：全屏实拍视频轮播（scene.js）+ 左侧文字 + 流动的「远扬」标识。
   画面层、标识、进度条沿用 OA / 研究站登录页（vela-design v2/login/login-scene.css），类名一致（vl-*）；官网自己的排版用 vs-*。
   单一视觉，不跟随系统浅色 / 深色。 */
:root {
  --ink: #fff8ef;
  --ink-2: rgba(255, 240, 222, .78);
  --ink-3: rgba(255, 238, 218, .6);
  --gold: #ffd9a6;
  --night: #16213d;
  --deep: #0d1526;
  --gutter: clamp(20px, 4vw, 56px);
  --sans: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
html { background: var(--night); }
.vs { margin: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: var(--night); color: var(--ink);
  font: 400 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.vs a { color: inherit; }

/* ---- 画面层：每个场景一层，静帧垫底，视频盖在上面 ---- */
.vl-scene { position: fixed; inset: -2%; overflow: hidden; background: var(--deep);
  transform: translate3d(calc(var(--vl-mx, 0) * -10px), calc(var(--vl-my, 0) * -6px), 0) scale(1.03); }
.vl-layer { position: absolute; inset: 0; overflow: hidden; background: var(--deep) center / cover no-repeat; will-change: transform; }
.vl-layer video, .vs-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* 压暗：左侧给文字、顶部给标识、底部给页脚；不改素材本身 */
.vl-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(8,12,24,.62) 0%, rgba(8,12,24,.34) 40%, rgba(8,12,24,0) 70%),
              linear-gradient(180deg, rgba(8,12,24,.40) 0%, rgba(8,12,24,0) 20%, rgba(8,12,24,0) 72%, rgba(8,12,24,.45) 100%),
              radial-gradient(ellipse at 55% 45%, rgba(0,0,0,0) 55%, rgba(4,8,18,.40) 100%); }
.vl-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 26vh; pointer-events: none; z-index: 1;
  backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 40%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 40%, transparent 100%);
  background: linear-gradient(to top, rgba(10,16,32,.5), rgba(10,16,32,0)); }
.vl-scene { cursor: grab; }
.vl-scene:active { cursor: grabbing; }
.vl-scene.is-still { cursor: default; }

/* ---- 顶栏：标识 · （以后的栏目）· 语言 ---- */
.vs-top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 28px;
  padding: max(26px, env(safe-area-inset-top, 0px)) var(--gutter) 0; pointer-events: none; }
.vs-top > * { pointer-events: auto; }
.vl-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.vl-mark { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 4px 14px rgba(255,190,120,.35)); animation: vl-sway 7s ease-in-out infinite; transform-origin: 50% 90%; }
.vl-mark path { vector-effect: non-scaling-stroke; }
.vl-mark .vl-draw { stroke-dasharray: 220; stroke-dashoffset: 220; animation: vl-draw 2.4s .2s cubic-bezier(.6,.1,.2,1) forwards; }
.vl-word { display: flex; flex-direction: column; line-height: 1.05; }
.vl-word b { font: 600 28px/1.1 var(--serif); letter-spacing: .12em; }
.vl-word span { margin-top: 4px; font: 500 10.5px/1 var(--sans); letter-spacing: .42em; color: rgba(255,240,220,.72); }
.vl-flow { background: linear-gradient(100deg, #f3cf98 0%, #fff7ea 18%, #e7ad62 36%, #fff3dc 54%, #f3cf98 72%, #fff7ea 90%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: vl-flow 9s linear infinite; }
.vs-nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; letter-spacing: .08em; }
.vs-nav a { text-decoration: none; color: var(--ink-2); transition: color .15s; }
.vs-nav a:hover { color: var(--ink); }
.vl-lang { display: flex; padding: 3px; gap: 2px; margin-left: auto; border-radius: 999px;
  background: rgba(10,16,32,.32); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vs-nav + .vl-lang { margin-left: 0; }
.vl-lang a { min-width: 38px; height: 28px; padding: 0 10px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; text-decoration: none; color: rgba(255,240,222,.72); font: 600 12px/1 var(--sans); letter-spacing: .06em; transition: background .15s, color .15s; }
.vl-lang a:hover { color: #fff6e8; }
.vl-lang a[aria-current="true"] { background: rgba(255,224,173,.92); color: #2a1606; }
.vs a:focus-visible, .vl-dot:focus-visible { outline: 2px solid rgba(255,220,170,.9); outline-offset: 3px; border-radius: 6px; }

/* ---- 首屏文字：左侧，垂直居中略偏下 ---- */
.vs-hero { position: fixed; z-index: 3; left: var(--gutter); top: 50%; width: min(680px, calc(100vw - 2 * var(--gutter)));
  transform: translate(calc(var(--vl-mx, 0) * -5px), calc(-44% + var(--vl-my, 0) * -4px)); animation: vs-rise 1s .15s both cubic-bezier(.2,.7,.2,1); }
.vs-eyebrow { margin: 0 0 18px; font: 500 12px/1 var(--sans); letter-spacing: .38em; color: var(--gold); opacity: .9; }
.vs-headline { margin: 0; font: 600 clamp(34px, 5.2vw, 68px)/1.18 var(--serif); letter-spacing: .08em; }
html[lang="en"] .vs-headline { letter-spacing: .01em; font-size: clamp(32px, 4.6vw, 60px); }
.vs-h-part { white-space: nowrap; }
.vs-headline .vl-flow { filter: drop-shadow(0 2px 14px rgba(8,12,24,.5)); }
.vs-lead { margin: 22px 0 0; max-width: 34em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: var(--ink-2); letter-spacing: .04em;
  text-shadow: 0 1px 12px rgba(8,12,24,.45); }
.vs-soon { position: relative; margin: 28px 0 0; padding-left: 44px; font-size: 13px; line-height: 1.6; color: var(--ink-3); letter-spacing: .04em; }
.vs-soon::before { content: ""; position: absolute; left: 0; top: .8em; width: 30px; height: 1px; background: linear-gradient(90deg, #f0b070, rgba(240,176,112,.2)); }
.vs-soon a { color: var(--gold); text-decoration: none; }

/* ---- 场景：进度条（可点）；右下 ---- */
.vs-scenes { position: fixed; z-index: 4; right: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.vl-dots { display: flex; gap: 8px; }
.vl-dot { padding: 8px 0; border: 0; background: none; cursor: pointer; }
.vl-dot-bar { position: relative; display: block; width: 44px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.24); overflow: hidden; transition: width .4s cubic-bezier(.2,.7,.2,1), background .2s; }
.vl-dot:hover .vl-dot-bar { background: rgba(255,255,255,.4); }
.vl-dot.is-on .vl-dot-bar { width: 72px; background: rgba(255,255,255,.32); }
.vl-dot-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #ffe0ad, #f0b070); transform: scaleX(0); transform-origin: left center; }

/* ---- 页脚：左下 ---- */
.vs-foot { position: fixed; z-index: 3; left: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom, 0px));
  max-width: min(560px, calc(100vw - 2 * var(--gutter) - 420px)); display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; line-height: 1.5; letter-spacing: .04em; color: var(--ink-3); }
.vs-copy { color: rgba(255,238,218,.72); letter-spacing: .08em; }

/* 404：静帧，文字同首页 */
.vs-404 .vs-foot { max-width: calc(100vw - 2 * var(--gutter)); }

/* ---- 窄屏：文字居中偏下，场景条在文字下方，页脚最底 ---- */
@media (max-width: 900px) {
  .vs-top { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .vl-mark { width: 38px; height: 38px; }
  .vl-word b { font-size: 24px; }
  .vs-nav { display: none; }
  .vs-hero { top: auto; bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 118px); transform: none; }
  .vs-headline { font-size: clamp(30px, 8.4vw, 44px); }
  html[lang="en"] .vs-headline { font-size: clamp(28px, 7.6vw, 40px); }
  .vs-lead { margin-top: 14px; font-size: 15px; }
  .vs-soon { margin-top: 18px; font-size: 12.5px; }
  .vs-scenes { left: var(--gutter); right: var(--gutter); bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 58px); align-items: flex-start; }
  .vl-dots { gap: 6px; }
  .vl-dot-bar { width: 30px; }
  .vl-dot.is-on .vl-dot-bar { width: 56px; }
  .vs-foot { max-width: none; right: var(--gutter); }
  .vl-scene::after { background: linear-gradient(180deg, rgba(8,12,24,.45) 0%, rgba(8,12,24,.08) 30%, rgba(8,12,24,.35) 60%, rgba(8,12,24,.72) 100%); }
  .vl-fade { height: 50vh; }
}
@media (max-height: 560px) and (max-width: 900px) { .vs-soon { display: none; } .vs-hero { bottom: 100px; } }

@keyframes vl-flow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes vl-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes vl-draw { to { stroke-dashoffset: 0; } }
@keyframes vs-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .vl-mark, .vl-flow, .vs-hero { animation: none !important; }
  .vl-mark .vl-draw { animation: none; stroke-dashoffset: 0; }
  .vl-scene { transform: none; inset: 0; }
}