/* 不兼容浏览器提示框，默认隐藏 */
#browserTip{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:#fff;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
}
.tip-box{
    width:500px;
    padding:30px;
    border:1px solid #eee;
    border-radius:8px;
    box-shadow:0 2px 12px rgba(0,0,0,0.1);
    text-align:center;
}
.tip-box h3{
    color:#f56c6c;
}
.tip-box p{
    margin:12px 0;
    font-size:15px;
    color:#666;
    line-height:1.6;
}
/* 正常页面内容，不兼容时隐藏 */
#mainContent{
}
/*结束*/

:root {
  --canvas-w: 2281.4065;
  --canvas-h: 1168.8134;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Noto Sans SC",
    "Source Han Sans CN", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --bar-w: 12.63px;   /* 左缘色条宽(画布单位) */
  --card-h: 473px;    /* 卡片高(画布单位) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  overflow: hidden;           /* PC: 锁定一屏, 不滚动 */
}

/* ---------- 舞台 ---------- */
.page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 2281.4065px;
  height: 1168.8134px;
  transform-origin: 0 0;
}

/* ---------- 顶部标题块 ---------- */
.intro {
  position: absolute;
  left: 184.2px;
  top: 57px;
  color: #fff;
}

.intro-en {
  font-size: 19px;
  line-height: 23.7px;
  font-weight: 700;
  letter-spacing: 0;
}

.intro-zh {
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
  margin-top: 4.5px;
  letter-spacing: 0;
}

/* ---------- 品牌区 (大 Logo + 字标) ---------- */
.brand {
  position: absolute;
  left: 1047.4628px;
  top: 11.6499px;
  width: 191.2616px;
  height: 451.9133px;
  pointer-events: none;
}

.mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* 闪烁优化①: 把整个 svg 提升为独立合成层,
     卷轴每帧重绘被限制在本图层内, 不再与卡片等周围图层互相干扰 */
  will-change: transform;
}

/* ---------- 卡片 ---------- */
.card-wrap {
  position: absolute;
  top: 557px;
}

.w1 { left: 171.37px; width: 748.63px; }   /* 12.63 + 736 */
.w2 { left: 842.37px; width: 582.63px; }   /* 12.63 + 570 */
.w3 { left: 1514.37px; width: 582.63px; }

.card {
  position: absolute;
  left: 12.63px;
  top: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  will-change: transform;
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
  outline: none;
}

.c1 { width: 736px; }
.c2 { width: 570px; }
.c3 { width: 570px; }
.card { height: 473px; }

.card-bg {
  position: absolute;
  inset: 0;
  
  height: 100%;
  object-fit: fill;
  display: block;
  transform: scale(1.001);
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
  user-select: none;
}

/* 卡片内小 Logo (原稿矢量) */
.mark-lc {
  position: absolute;
  height: auto;
  z-index: 2;
  transition: transform 0.5s var(--ease-out);
}

.c1 .mark-lc { left: 69.79px;  top: 49.51px; width: 44.20px; }
.c2 .mark-lc { left: 91.71px;  top: 46.45px; width: 44.20px; }
.c3 .mark-lc { left: 77.07px;  top: 30.89px; width: 44.90px; }

/* 卡片文字 */
.card-zh,
.card-en {
  position: absolute;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
}

.card-zh { font-size: 42px; line-height: 1; letter-spacing: 0; }
.card-en { font-size: 36px; line-height: 43.2px; letter-spacing: 0; }

.c1 .card-zh { left: 68.5px; top: 145px; }
.c1 .card-en { left: 68.6px; top: 201px; }

.c2 .card-zh { left: 81.6px; top: 146px; }
.c2 .card-en { left: 80.8px; top: 201px; }

.c3 .card-zh { left: 69.2px; top: 146px; }
.c3 .card-en { left: 71.3px; top: 200.6px; }

/* ---------- 左缘色条 ---------- */
.bar {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bar-w);
  height: 115.19px;
  transform-origin: 50% 0;
  transition: transform 0.55s var(--ease-out);
}

.b1 { background: #9b53d4; }
.b2 { background: #fece00; }
.b3 { background: #0eef07; }

/* ---------- 交互: 卡片悬停 ---------- */
.w1:hover .card { transform: translateY(-10px); box-shadow: 0 30px 90px rgba(155, 83, 212, 0.35), 0 8px 30px rgba(0, 0, 0, 0.6); }
.w2:hover .card { transform: translateY(-10px); box-shadow: 0 30px 90px rgba(254, 206, 0, 0.28), 0 8px 30px rgba(0, 0, 0, 0.6); }
.w3:hover .card { transform: translateY(-10px); box-shadow: 0 30px 90px rgba(14, 239, 7, 0.30), 0 8px 30px rgba(0, 0, 0, 0.6); }

.card:hover .card-bg,
.card:focus-visible .card-bg {
  transform: scale(1.045);
  filter: brightness(1.12);
}

/* 悬停联动: 色条延展 + 小 Logo 上浮 */
.card-wrap:hover .bar { transform: scaleY(1.32); }
.card:hover .mark-lc { transform: translateY(-6px); }

/* ---------- 入场动效 ---------- */
.anim {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s var(--ease-out) var(--d, 0s),
    transform 0.9s var(--ease-out) var(--d, 0s);
}

/* 只作用于 svg 的直接子组(#fg-logo / #fg-word / #fg-lc1~3),
   不能写成 .mark g —— 否则会命中 .lg-slot / .lg-reel,
   用 CSS transform 覆盖掉它们的 SVG transform 与卷动动画 */
.mark > g {
  opacity: 0;
  transform: translateY(26px);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition:
    opacity 0.9s var(--ease-out) var(--fd, 0.15s),
    transform 0.9s var(--ease-out) var(--fd, 0.15s);
}

/* ---------- 彩色字母: 垂直无缝卷动 ----------
   结构: .lg-slot(裁切窗口) > .lg-reel(卷轴) > 字母 ×2 份
   --lg-shift : 一个完整循环的位移(= 字母数 × 步距), 由 HTML 内联
   --lg-dur   : 循环时长, 每个字母 3s
   --lg-delay : 右列整体错开半个周期(左 6s / 右错开 3s)            */
@keyframes lg-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--lg-shift, 0px)); }
}

.lg-reel {
  animation-name: lg-roll;
  animation-duration: var(--lg-dur, 6s);
  animation-timing-function: linear;
  animation-delay: var(--lg-delay, 0s);
  animation-iteration-count: infinite;
  /* 闪烁优化②: 删掉 will-change —— SVG 内部 <g> 不参与合成器加速,
     这条只会引发额外栅格化抖动, 与 clip-path 叠加是已知的闪烁源;
     合成层提升已改放到 svg 根节点(.mark)上 */
}

/* 独立 SVG 文件 logo(<img>) 的入场动效 —— 动效从 svg 内部组移到 img 元素上 */
.mark-img {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s var(--ease-out) var(--fd, 0.15s),
    transform 0.9s var(--ease-out) var(--fd, 0.15s);
}
body.loaded .mark-img { opacity: 1; transform: translateY(0); }
/* 入场结束后交还给各自的基础过渡(卡片 hover 上浮 0.5s / 品牌 0.45s) */
body.loaded .mark-brand { transition: transform 0.45s var(--ease-out); }
body.loaded .mark-lc    { transition: transform 0.5s var(--ease-out); }

.mark-brand { --fd: 0.15s; }
.lc1 { --fd: 0.42s; }
.lc2 { --fd: 0.52s; }
.lc3 { --fd: 0.62s; }


#fg-logo { --fd: 0.15s; }
#fg-word { --fd: 0.28s; }
#fg-lc1  { --fd: 0.42s; }
#fg-lc2  { --fd: 0.52s; }
#fg-lc3  { --fd: 0.62s; }

body.loaded .anim { opacity: 1; transform: translateY(0); }
body.loaded .mark > g { opacity: 1; transform: translateY(0); }

/* 入场结束后切为快速过渡, 悬停更跟手 */
body.loaded .card { transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
body.loaded .bar,
body.loaded .mark > g { transition: transform 0.45s var(--ease-out); }

/* ============================================================
   小屏: 竖向流式重排 (由 JS 统一判定并加 body.stack)
   ============================================================ */
body.stack { overflow-x: hidden; overflow-y: auto; height: auto; }

body.stack .page {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

body.stack .stage {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  transform: none !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 30px 18px calc(40px + env(safe-area-inset-bottom));
}

/* 标题块 */
body.stack .intro {
  position: relative;
  left: auto;
  top: auto;
  margin-bottom: 22px;
}

body.stack .intro-en {
  font-size: 13.5px;
  font-size: clamp(12.5px, 3.5vw, 19px);
  line-height: 1.32;
}

body.stack .intro-zh {
  font-size: 15.5px;
  font-size: clamp(14px, 4.05vw, 21px);
  margin-top: 6px;
}

/* 品牌区: 居中, 按原宽高比缩放 */
body.stack .brand {
  position: relative;
  left: auto;
  top: auto;
  width: 46%;
  max-width: 230px;
  height: auto;
  aspect-ratio: 191.2616 / 451.9133;
  align-self: center;
  margin: 0 0 30px;
}

/* 卡片: 竖排, 宽度撑满, 高度按原比例 */
body.stack .card-wrap {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  padding-left: 10px;
}

body.stack .card-wrap + .card-wrap { margin-top: 16px; }

body.stack .card {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  container-type: inline-size;
}

body.stack .c1 { aspect-ratio: 736 / 473; }
body.stack .c2,
body.stack .c3 { aspect-ratio: 570 / 473; }

body.stack .bar {
  left: 0;
  top: 6px;
  width: 5px;
  height: 30%;
  border-radius: 2px;
}

/* 卡片内元素: 用容器查询单位随卡片宽度缩放 */
body.stack .card-zh {
  font-size: 24px;            /* 老浏览器兜底 */
  font-size: 5.7cqw;
  line-height: 1;
}
body.stack .card-en {
  font-size: 20px;
  font-size: 4.89cqw;
  line-height: 1.2;
}

body.stack .c1 .card-zh { left: 9.31%;  top: 30.66%; }
body.stack .c1 .card-en { left: 9.32%;  top: 42.49%; }

body.stack .c2 .card-zh { left: 14.32%; top: 30.87%; }
body.stack .c2 .card-en { left: 14.18%; top: 42.49%; }

body.stack .c3 .card-zh { left: 12.14%; top: 30.87%; }
body.stack .c3 .card-en { left: 12.51%; top: 42.41%; }

body.stack .mark-lc {
  width: 7.2%;
  height: auto;
  top: 7%;
  left: auto;
}
body.stack .c1 .mark-lc { left: 9.3%; }
body.stack .c2 .mark-lc { left: 14.3%; }
body.stack .c3 .mark-lc { left: 12.1%; }

body.stack .card-wrap:hover .card { transform: none; }
body.stack .card:active { transform: scale(0.985); }

/* 超窄屏: 文字整体再收一档, 防溢出 */
@media (max-width: 360px) {
  body.stack .stage { padding-left: 14px; padding-right: 14px; }
  body.stack .card-zh { font-size: 5.35cqw; }
  body.stack .card-en { font-size: 4.55cqw; }
}

/* ---------- 无障碍: 减弱动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim, .mark > g { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* 卷轴停转: 停在原稿那一帧(translateY(0)) */
  .lg-reel { animation: none !important; transform: none !important; }
  .card, .card-bg, .bar { transition: none !important; }
  .card-wrap:hover .card { transform: none; }
  .card:hover .card-bg { transform: none; filter: none; }
  .card-wrap:hover .bar { transform: none; }
}
@media (max-width: 900px) {
.card-bg {

    width: 100%;}


}