/* ══════════════════════════════════════════════════════════
   FOEVAIR — Homepage
   Design reference: 1920 × 5442 PSD  ·  scale factor 0.8333vw = 1rem
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:      #16324f;   /* 主标题深蓝 */
  --ink-2:    #2c3947;   /* 副标题深灰 */
  --body:     #5b6672;
  --muted:    #8d97a3;
  --line:     #d7dee4;
  --gold:     #d09958;
  --gold-2:   #b76c2b;
  --bg:       #eef1f4;
  --bg-2:     #e7ecf0;
  --bg-3:     #e2e7eb;
  --blue-tint:#eef5fd;
  --dark:     #0e1720;
  --white:    #fff;

  --pad: clamp(20px, 6.2vw, 119px);
  --wrap: min(1683px, 100%);   /* 各 section 已带 --pad 内边距，此处不再重复扣 */
  --nav-h: 68px;
  --stage-ar: 2106 / 1191;   /* 产品包围盒，JS 会覆写 */
  --stage-ar-num: 1.7683;

  --e-out:  cubic-bezier(.22, 1, .36, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);

  --shadow-s: 0 2px 10px rgba(22,50,79,.05);
  --shadow-m: 0 18px 46px -18px rgba(22,50,79,.22);
  --shadow-l: 0 40px 90px -40px rgba(22,50,79,.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  font-size: clamp(15px, .8333vw, 16.5px);
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  /* JS 写入的真实视口高度，供 --vh100 使用；Safari 上比 svh 更可靠 */
  --vh100: 100svh;
}
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-size:1rem; line-height:1.6; color:var(--body);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; -webkit-user-drag:none; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:'Montserrat', 'Inter', sans-serif; color:var(--ink); letter-spacing:-.005em; }
::selection{ background:var(--gold); color:#fff; }
:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; border-radius:4px; }

/* ─────────── 覆层：噪点 / 光标 / 进度 ─────────── */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
/* 自定义指针：默认就是那只卡通小人；hover 链接时放大；进第二屏变回箭头按钮 */
.cursor{
  position:fixed; top:0; left:0; z-index:2147483000;   /* 抬到最高，避免被任何合成层/隔离层吞掉 */
  width:44px; height:44px; margin:-22px 0 0 -22px;
  border:0; border-radius:50%; background:transparent; pointer-events:none;
  /* 显式新建独立合成层，Safari 上 fixed + transform 的稳定性依赖它 */
  transform:translate3d(0,0,0);
  mix-blend-mode:normal; isolation:auto;
  transition:width .35s var(--e-out), height .35s var(--e-out), margin .35s var(--e-out),
             background-color .35s var(--e-out), box-shadow .35s var(--e-out), opacity .3s;
  opacity:0;
  /* 老 Safari 不认 will-change 值组合时的兜底 */
  -webkit-transform:translate3d(0,0,0);
}
/* 挥手动效：雪碧图逐帧播放（81 帧，**单行**排布，每帧 96×96）
   为什么用雪碧图而不是视频：原素材是 VP9 分离式 alpha 的 webm，
   实测 Safari（WebKit）完全无法解码（videoWidth=0 / err=4），
   而站点必须兼容 Safari。逐帧 PNG 序列由浏览器解码后导出、
   再拼成雪碧图，可被所有浏览器无差别渲染，且体积仅 329KB（原视频 4MB）。
   单帧 96px 对应显示 24px，已含 4x 余量（视网膜屏 2x 也够用）。
   注意必须单行：CSS background-position + steps() 只能沿单轴推进，跨行做不到。 */
.cursor__sprite{
  position:absolute; left:50%; top:50%;
  width:24px; height:24px; margin:-12px 0 0 -12px;   /* 24×24，居中锚定 */
  background-image:url('../img/mascot-cursor-sprite.webp');
  background-repeat:no-repeat;
  background-size:auto 24px;                         /* 96px 帧 -> 显示 24px（÷4） */
  background-position:0 0;
  filter:drop-shadow(0 7px 12px rgba(22,50,79,.3));
  -webkit-filter:drop-shadow(0 7px 12px rgba(22,50,79,.3));
  transition:transform .4s var(--e-out), filter .4s var(--e-out), opacity .3s;
  will-change:transform, background-position;
  animation:cursor-wave 6.75s steps(81) infinite;    /* 81 帧 @12fps = 6.75s */
  background-color:transparent;
}
/* 每帧位移 24px（显示尺寸），81 帧总宽 24×81 = 1944px */
@keyframes cursor-wave{
  from{ background-position:0 0; }
  to  { background-position:-1944px 0; }
}
.cursor.is-on{ opacity:1; }
.cursor.is-link{ width:52px; height:52px; margin:-26px 0 0 -26px; }
.cursor.is-link .cursor__sprite{ transform:scale(1.22); filter:drop-shadow(0 8px 14px rgba(183,108,43,.5)); -webkit-filter:drop-shadow(0 8px 14px rgba(183,108,43,.5)); }
.cursor.is-nav{ width:clamp(44px,3.28vw,63px); height:clamp(44px,3.28vw,63px); margin:calc(clamp(44px,3.28vw,63px) / -2) 0 0 calc(clamp(44px,3.28vw,63px) / -2); background:#fff;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 30px -14px rgba(22,50,79,.45), 0 0 0 1px rgba(22,50,79,.05); }
.cursor.is-nav .cursor__sprite{ opacity:0; }
/* 箭头：默认彻底不渲染（display:none），只在第二屏（is-nav）按左右半区点亮 */
.cursor em{
  position:absolute; top:50%; display:none; font-style:normal; line-height:1;
  font-family:'Montserrat',sans-serif; font-size:clamp(13px,1vw,19px);
  color:#1b3a5c; pointer-events:none;
  transition:opacity .3s ease, color .3s ease;
}
.cursor.is-nav.hot-left em:nth-of-type(1),
.cursor.is-nav.hot-right em:nth-of-type(2){ display:block; opacity:1; }
.cursor.is-nav.hot-left em:nth-of-type(1){ left:clamp(12px,1.5vw,19px); transform:translateY(-50%); }
.cursor.is-nav.hot-right em:nth-of-type(2){ right:clamp(12px,1.5vw,19px); transform:translateY(-50%); }
.cursor.is-nav.hot-left em:nth-of-type(1){ color:var(--gold-2); }
.cursor.is-nav.hot-right em:nth-of-type(2){ color:var(--gold-2); }
.cursor::before{ content:none; }
body.has-cursor, body.has-cursor a, body.has-cursor button{ cursor:none; }
.scroll-progress{
  position:fixed; left:0; top:0; z-index:950; width:100%; height:2px; background:rgba(22,50,79,.07);
}
.scroll-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-2)); }

/* ─────────── 预加载 ─────────── */
.loader{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:#f4f7f9; transition:opacity .6s ease, visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ display:grid; justify-items:center; gap:1.4rem; }
.loader__mark{ width:64px; animation:spin 2.6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader__bar{ width:180px; height:2px; background:rgba(22,50,79,.12); overflow:hidden; border-radius:2px; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--gold-2); }
.loader__pct{ font-size:.72rem; letter-spacing:.18em; color:var(--muted); font-weight:500; }

/* ═══════════ 首屏 ═══════════ */
.hero{
  position:relative;
  min-height:640px;          /* 老浏览器回退 */
  min-height:var(--vh100);   /* JS 实算，Safari 归位 */
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 78% at 50% 34%, #ffffff 0%, #f4f8fb 42%, #e5ebf1 100%);
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__aurora{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
}
.hero__aurora--a{
  width:46vw; height:46vw; left:-8vw; top:-10vw;
  background:radial-gradient(circle, rgba(208,153,88,.30), transparent 68%);
  animation:drift-a 22s ease-in-out infinite alternate;
}
.hero__aurora--b{
  width:52vw; height:52vw; right:-12vw; bottom:-16vw;
  background:radial-gradient(circle, rgba(93,148,201,.26), transparent 68%);
  animation:drift-b 26s ease-in-out infinite alternate;
}
@keyframes drift-a{ to{ transform:translate3d(7vw,5vh,0) scale(1.12);} }
@keyframes drift-b{ to{ transform:translate3d(-6vw,-6vh,0) scale(1.1);} }
/* 首屏背景（线条化产品层已按需求移除） */

/* 漂浮产品层 —— 舞台锁定 1920:1078，保证与设计稿同比例 */
.field{ position:absolute; inset:0; z-index:2; pointer-events:none; will-change:transform; }
.field__stage{
  /* 舞台尺寸由 JS 按产品包围盒 + 首屏高度实算（style.width/height），保证 22 个产品完整可见 */
  position:absolute; left:50%; top:50%;
  width:100%; max-width:none; max-height:none;
  transform:translate(-50%,-50%);
  transition:transform 1.6s var(--e-out);
}
.is-ready .field__stage{ transform:translate(-50%,-50%); }
.p{
  position:absolute; will-change:transform;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .95s var(--e-out);
  transition-delay:var(--d, 0ms);
}
.is-ready .p{ opacity:1; }
.p img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
/* 默认：半透明 + 去色 + 微失焦（蓝图态），透明度按要求减半 */
/* 默认：原图 50% 透明度（幽灵态），鼠标移近才「显影」出 100% 真实产品 */
.p .p-ghost{
  opacity:calc(.5 * (1 - var(--k, 0)));
  filter:blur(1.1px) contrast(1.02);
}
/* 悬停/趋近：原色 + 提亮 + 投影。不加饱和度，避免偏色 */
.p .p-real{
  opacity:calc(var(--o, 1) * var(--k, 0));
  filter:brightness(1.03) contrast(1.04);
}
.p.is-lit .p-real{
  opacity:1;
  filter:brightness(1.07) contrast(1.07)
         drop-shadow(0 10px 14px rgba(176,104,40,.26))
         drop-shadow(0 26px 34px rgba(22,50,79,.24));
}
.p.is-lit{ z-index:5; }

/* 顶部胶囊导航 */
.brandbar{
  position:absolute; z-index:6; top:calc(39 / 1078 * var(--vh100)); left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.85rem;
  width:min(414px, 46vw); height:68px; padding:0 .35rem 0 1.5rem;
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-radius:999px; box-shadow:0 8px 30px -14px rgba(22,50,79,.28), 0 0 0 1px rgba(255,255,255,.7) inset;
}
.brandbar__logo{ flex:1; display:flex; align-items:center; }
.brandbar__logo img{ width:clamp(112px, 9.6vw, 184px); height:auto; }
.brandbar__globe{
  display:flex; align-items:center; gap:.2rem; padding:.35rem .3rem; color:#3d4b59;
  border-radius:8px; transition:color .3s;
}
.brandbar__globe:hover{ color:var(--gold-2); }
.brandbar__globe svg{ width:20px; height:20px; }
.brandbar__globe .chev{ width:12px; height:12px; }
.brandbar__menu{
  position:relative; width:61px; height:61px; border-radius:50%; flex:none;
  background:linear-gradient(160deg,#e0a969,#c07a30);
  box-shadow:0 10px 22px -10px rgba(183,108,43,.75);
  display:grid; place-content:center; gap:5px; transition:transform .45s var(--e-out);
}
.brandbar__menu:hover{ transform:scale(1.06) rotate(90deg); }
.brandbar__menu span{ display:block; width:19px; height:2px; background:#fff; border-radius:2px; }
.brandbar__menu span:nth-child(2){ width:13px; }

/* 首屏中央 */
.hero__center{
  position:relative; z-index:4;
  min-height:var(--vh100); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(18px,2.4vh,34px);
  padding:120px var(--pad) 90px;
}
.hero__title{
  text-align:center; font-weight:700; font-size:clamp(1.7rem, 2.9vw, 3.5rem);
  line-height:1.29; letter-spacing:.073em; text-transform:uppercase;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero__title b{ display:inline-block; font-weight:700; }
.hero__title .line:first-child b{ color:var(--ink); }
.hero__title .line:last-child b{ color:var(--ink-2); }

/* 搜索坞 —— 严格对齐 PSD：7px 内边距 + 金块 + 灰块 + 无底色段 + 分隔线 + 圆形搜索 */
.dock{
  display:flex; align-items:stretch; gap:5px;
  width:min(894px, 52vw); height:clamp(66px, 5.73vw, 110px);
  padding:7px;
  background:#fff; border-radius:12px;
  box-shadow:0 26px 60px -30px rgba(22,50,79,.35), 0 0 0 1px rgba(22,50,79,.04);
}
.dock__cell{
  position:relative; flex:0 0 22.65%; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:0 clamp(8px,1.05vw,20px);
  border-radius:10px;
}
.dock__cell--gold{ background:linear-gradient(155deg,#d6a468 0%,#d09958 52%,#cb8f48 100%); }
.dock__cell--soft{ background:#f0f0f0; }
.dock__cell--plain{ flex:1 1 auto; background:none; border-radius:0; }
.dock__cell--gold .dock__label,
.dock__cell--gold .dock__val span{ color:#fff; }
.dock__cell--gold .chev{ color:rgba(255,255,255,.85); }
.dock__label{
  font-size:clamp(9.5px,.781vw,15px); line-height:1.32; font-weight:400;
  color:#1c1c1c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dock__val{
  display:flex; align-items:center; justify-content:space-between; gap:.35rem; cursor:pointer;
  font-size:clamp(10px,.833vw,16px); line-height:1.32; font-weight:400; color:#3a3a3a;
  white-space:nowrap;
}
.dock__val span{ transition:color .3s; }
.dock__val .chev{ width:clamp(11px,.78vw,15px); height:clamp(11px,.78vw,15px); flex:none; color:#3d3d3d; transition:transform .35s var(--e-out); }
.dock__val.is-open .chev{ transform:rotate(180deg); }
.dock input{
  border:0; padding:0; background:none; outline:none;
  font-size:clamp(10px,.833vw,16px); line-height:1.32; color:#3a3a3a;
}
.dock input::placeholder{ color:#7d7d7d; }
.dock__sep{
  flex:0 0 1px; align-self:stretch; margin:6px 0; background:#eee;
}
.dock__go{
  flex:0 0 20.9%; display:flex; align-items:center; justify-content:center; gap:clamp(6px,.75vw,14px);
  color:#323232; font-size:clamp(10px,.833vw,16px); transition:color .3s;
}
.dock__go:hover{ color:#b76c2b; }
.dock__go i{
  flex:none; width:clamp(30px,2.5vw,48px); height:clamp(30px,2.5vw,48px); border-radius:50%;
  display:grid; place-content:center; background:#faf4ed; color:#cf9855;
  transition:transform .45s var(--e-out), background-color .3s, color .3s;
}
.dock__go:hover i{ transform:scale(1.08); background:#cf9855; color:#fff; }
.dock__go svg{ width:clamp(16px,1.2vw,23px); height:clamp(16px,1.2vw,23px); }
/* 下拉 */
.opt{
  position:absolute; left:0; top:calc(100% + 8px); z-index:30; min-width:100%;
  margin:0; padding:.4rem; list-style:none; background:#fff; border-radius:10px;
  box-shadow:0 24px 50px -22px rgba(22,50,79,.4), 0 0 0 1px rgba(22,50,79,.06);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .28s var(--e-out), transform .28s var(--e-out), visibility .28s;
}
[data-menu].is-open .opt, .mainnav__acct.is-open .opt{ opacity:1; visibility:visible; transform:none; }
.opt li{
  padding:.5rem .7rem; border-radius:6px; cursor:pointer; white-space:nowrap;
  font-size:.82rem; color:var(--ink-2); transition:background-color .2s, color .2s;
}
.opt li:hover{ background:#f3f6f8; color:var(--gold-2); }

/* 卡通形象：position:fixed 常驻视口，滚动全程可见 */
.mascot-float{
  position:fixed; z-index:850;
  right:6.35vw; bottom:9.9vh;
  width:clamp(46px,3.65vw,70px);
  pointer-events:none; will-change:transform,opacity;
}
/* ── 悬浮小人的挥手动效 ──
   素材：81 帧，两行排布（41 列 × 2 行），单帧 176×176，雪碧图 7216×352。
   显示尺寸 = 容器宽（clamp 46~70px，1920 下为 70px）→ 176px 单帧有 2.5x 余量，视网膜屏够用。
   推进方式不用 CSS steps()：steps() 只能沿单轴走，两行雪碧图无法跨行，
   所以由 main.js 用 rAF 逐帧改 background-position。
   三层分工：#mascotFloat 只做 GSAP 入场；.mascot-bob 只做上下浮动；
            #mascotImg 只做鼠标视差 + 挥手逐帧（transform 与 background-position 互不干扰）。 */
.mascot-bob{
  display:block; width:100%;
  animation:bob 4.6s ease-in-out infinite;
  will-change:transform;
}
.mascot-float .mascot-sprite{
  display:block; width:100%; aspect-ratio:1/1; height:auto;
  background-image:url('../img/mascot-float-sprite.webp');
  background-repeat:no-repeat;
  background-size:4100% auto;      /* 41 列 → 单帧占 1/41 宽 */
  background-position:0 0;
  filter:drop-shadow(0 14px 20px rgba(176,104,40,.28));
  will-change:transform, background-position;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-11px) rotate(2deg);} }

.hero__cue{
  position:absolute; z-index:5; left:50%; bottom:clamp(18px,3.4vh,40px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.hero__cue i{ display:block; width:1px; height:44px; background:linear-gradient(var(--muted),transparent); position:relative; overflow:hidden; }
.hero__cue i::after{ content:''; position:absolute; inset:0; background:var(--gold-2); animation:cue 2.1s var(--e-soft) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

/* ═══════════ 吸顶主导航 ═══════════ */
.mainnav{
  position:fixed; z-index:800; top:0; left:0; width:100%; padding:1.1rem var(--pad) 0;
  transform:translateY(-130%); transition:transform .6s var(--e-out);
}
.mainnav.is-shown{ transform:none; }
.mainnav__pill{
  width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  height:68px; padding:0 .55rem 0 1.5rem; border-radius:999px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 14px 40px -22px rgba(22,50,79,.4), 0 0 0 1px rgba(22,50,79,.05);
}
.mainnav__logo{ display:flex; align-items:center; flex:none; }
.mainnav__logo img{ width:clamp(112px,9.6vw,184px); }
.mainnav__list{
  flex:1; display:flex; align-items:center; justify-content:center; gap:clamp(.6rem,2.1vw,2.2rem);
  margin:0; padding:0; list-style:none;
}
.mainnav__list > li{ position:relative; }
.mainnav__list > li > a{
  display:flex; align-items:center; gap:.28rem; padding:.6rem .1rem;
  font-size:clamp(12px,.78vw,14.5px); color:var(--ink-2); white-space:nowrap;
  transition:color .3s;
}
.mainnav__list > li > a .chev{ width:11px; height:11px; opacity:.65; transition:transform .4s var(--e-out); }
.mainnav__list > li:hover > a{ color:var(--gold-2); }
.mainnav__list > li:hover > a .chev{ transform:rotate(180deg); }
.sub{
  position:absolute; left:50%; top:calc(100% + 12px); transform:translate(-50%,-10px);
  display:grid; gap:.1rem; min-width:230px; padding:.5rem; border-radius:12px;
  background:#fff; box-shadow:0 26px 54px -24px rgba(22,50,79,.45);
  opacity:0; visibility:hidden; transition:.32s var(--e-out);
}
.mainnav__list > li:hover .sub{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.sub a{ padding:.5rem .75rem; border-radius:7px; font-size:.82rem; color:var(--ink-2); white-space:nowrap; transition:.2s; }
.sub a:hover{ background:#f4f7f9; color:var(--gold-2); }
.mainnav__right{ display:flex; align-items:center; gap:.35rem; flex:none; }
.mainnav__ico{
  width:36px; height:36px; border-radius:50%; display:grid; place-content:center;
  color:#41505f; transition:color .3s, background-color .3s;
}
.mainnav__ico svg{ width:18px; height:18px; }
.mainnav__ico:hover{ color:var(--gold-2); background:#f2f5f8; }
/* 竖线分隔符：位于 My account 与语言按钮之间（设计稿实测浅灰细线） */
.mainnav__sep{
  width:1px; height:18px; flex:none; margin:0 .55rem;
  background:#d9e0e6;
}
/* 语言按钮：地球(18px)+下拉箭头(8×4)，样式对齐 My account */
.mainnav__lang{ position:relative; }
.mainnav__lang > button{
  display:flex; align-items:center; gap:.25rem; padding:.5rem .6rem;
  color:#41505f; transition:color .3s;
}
.mainnav__lang > button .globe{ width:18px; height:18px; flex:none; }
.mainnav__lang > button .chev{ width:11px; height:11px; opacity:.65; flex:none; }
.mainnav__lang:hover > button{ color:var(--gold-2); }
.mainnav__lang .opt{ left:auto; right:0; }
.mainnav__acct{ position:relative; }
.mainnav__acct > button{
  display:flex; align-items:center; gap:.25rem; padding:.5rem .6rem;
  font-size:clamp(12px,.78vw,14.5px); color:var(--ink-2); white-space:nowrap; transition:color .3s;
}
.mainnav__acct > button .chev{ width:11px; height:11px; opacity:.65; }
.mainnav__acct:hover > button{ color:var(--gold-2); }
.mainnav__acct .opt{ left:auto; right:0; }
.mainnav__burger{
  width:61px; height:61px; border-radius:50%; flex:none; display:grid; place-content:center; gap:5px;
  background:linear-gradient(160deg,#e0a969,#c07a30); box-shadow:0 10px 22px -10px rgba(183,108,43,.75);
  transition:transform .45s var(--e-out);
}
.mainnav__burger:hover{ transform:scale(1.06) rotate(90deg); }
.mainnav__burger span{ display:block; width:19px; height:2px; background:#fff; border-radius:2px; }
.mainnav__burger span:nth-child(2){ width:13px; }

/* ═══════════ 产品中心 ═══════════ */
.showcase{
  position:relative; background:var(--bg-2); overflow:hidden;
  padding-bottom:clamp(28px, 3vw, 58px);
}
.showcase__viewport{ position:relative; overflow:hidden; }
.showcase__track{
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,13vw,250px);
  padding:clamp(80px, 16vw, 312px) 0 clamp(18px, 2.4vw, 46px);
  will-change:transform;
}
.showcase__track.is-anim{ transition:transform .95s var(--e-out); }
.slide{
  flex:0 0 clamp(240px, 37.4vw, 720px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.6vh,26px);
  opacity:.34; transform:scale(.9); transition:opacity .8s var(--e-out), transform .8s var(--e-out), filter .8s var(--e-out);
  filter:saturate(.6);
}
.slide.is-active{ opacity:1; transform:scale(1); filter:none; }
.slide__art{ width:100%; }
.slide__art img{ width:100%; height:auto; filter:drop-shadow(0 26px 34px rgba(22,50,79,.14)); }
.slide__name{
  font-size:clamp(13px,.85vw,16px); font-weight:400; color:var(--ink-2);
  font-family:'Inter',sans-serif; letter-spacing:0;
}
.slide.is-active .slide__name{ font-weight:500; }
/* 轮播控件 —— 设计稿为「一个白色圆内两个细箭头」，现已升级为跟随鼠标的指针本身 */
.showcase__nav{ display:none; }
.showcase__nav-inner{
  display:flex; align-items:center; justify-content:center; gap:clamp(4px,.42vw,8px);
  width:clamp(40px,3.28vw,63px); height:clamp(40px,3.28vw,63px);
  border-radius:50%; background:#fff;
  box-shadow:0 14px 30px -16px rgba(22,50,79,.42);
}
.showcase__nav:hover .showcase__nav-inner{ box-shadow:0 20px 42px -16px rgba(22,50,79,.58); transform:scale(1.06); }
.showcase__nav button{
  width:clamp(11px,.9vw,17px); height:clamp(18px,1.35vw,26px);
  display:grid; place-content:center; color:#1b3a5c; transition:color .3s, transform .4s var(--e-out);
}
.showcase__nav button svg{ width:100%; height:auto; }
.showcase__nav button:hover{ color:var(--gold-2); transform:scale(1.18); }
.showcase__nav button:active{ transform:scale(.9); }
.showcase__viewport{ cursor:grab; user-select:none; -webkit-user-select:none; }
.showcase.is-dragging .showcase__viewport{ cursor:grabbing; }
.showcase, .showcase *{ -webkit-user-drag:none; }
/* 箭头已升级为鼠标指针本身（.cursor.is-nav），此处不再单独显示控件 */
.showcase__nav{ display:none; }

.segmented{
  position:relative; margin-inline:auto; width:max-content;
  display:flex; align-items:center; gap:.2rem; padding:.35rem;
  background:#fff; border-radius:999px; box-shadow:var(--shadow-m);
}
.segmented__pill{
  position:absolute; top:.35rem; bottom:.35rem; left:0; border-radius:999px;
  background:var(--ink); transition:transform .55s var(--e-out), width .55s var(--e-out);
}
.segmented button{
  position:relative; z-index:1; padding:.62rem clamp(18px,2.1vw,40px); border-radius:999px;
  font-size:clamp(12px,.8vw,15px); color:var(--ink-2); transition:color .45s var(--e-out);
}
.segmented button.is-active{ color:#fff; }

/* ═══════════ LEADING MANUFACTURER ═══════════ */
.leading{
  position:relative; overflow:hidden; background:var(--bg-3);
  min-height:clamp(520px, 56.4vw, 1088px);
  display:grid; align-items:center;
  padding:clamp(70px,9vh,120px) var(--pad) clamp(70px,9vh,120px);
}
/* 点阵背景：视频为动态主层（用户提供），静态点阵图作为兜底 */
.leading__media{ position:absolute; inset:0; overflow:hidden; pointer-events:none; isolation:isolate; }
.leading__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(1.15) saturate(.78);   /* 明度对齐设计稿第二屏，同时收掉源视频的偏色 */
  transform:scale(1.02); will-change:transform;
}
/* 色相统一层：已废弃。
   实测（对 PSD 官方导出图 官网-恢复的-恢复的 拷贝.jpg 逐点采样）：
   源视频本身就是中性冷灰，几乎没有色相；这层 mix-blend-mode:color
   会把整幅画面强行染成 #e7ecf0，把波浪纹理的冷灰渐变冲成乳白雾
   （平均色差 13.03 → 去掉后 8.97，肉眼可见纹理对比回来）。
   保留节点仅为兼容旧 DOM，视觉上不参与合成。 */
.leading__hue{ display:none; }
.leading__tint{
  position:absolute; inset:0; pointer-events:none;
  background:rgba(231,236,240,.16);
}
.leading__dots{
  position:absolute; inset:0;
  background-image:url('../img/dotwave.webp');
  background-size:100.4% auto;
  background-position:-1px -5.21vw;
  background-repeat:no-repeat;
  opacity:0;                 /* 视频就绪后由 JS 决定是否使用 */
  transition:opacity .6s ease;
}
.leading.no-video .leading__dots{ opacity:.82; }
.leading.no-video .leading__video,
.leading.no-video .leading__hue,
.leading.no-video .leading__tint{ display:none; }
.leading__edge{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg-2) 0%, rgba(231,236,240,0) 13%, rgba(238,245,253,0) 87%, var(--blue-tint) 100%);
}
.leading__inner{
  position:relative; z-index:2; width:var(--wrap); margin-inline:auto;
  display:grid; justify-items:center; text-align:center; gap:clamp(14px,1.8vh,26px);
}
.emblem-tilt{ perspective:900px; perspective-origin:50% 60%; }
.emblem-tilt__inner{
  transform-style:preserve-3d; will-change:transform;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.leading__emblem{
  width:clamp(150px,17.4vw,336px); height:auto; display:block;
  filter:drop-shadow(0 22px 34px rgba(183,108,43,.26));
}
.leading__title{
  font-weight:600; font-size:clamp(1.45rem, 2.9vw, 3.55rem); line-height:1.31;
  letter-spacing:.025em; text-transform:uppercase;
}
.leading__title .line{ display:block; }
.leading__title b{ display:inline-block; font-weight:600; }
.leading__title .ink{ color:var(--ink); }
.leading__title .muted{ color:#98a2ad; }
.leading__copy{
  max-width:min(1090px,86%); margin:clamp(6px,1.4vh,20px) 0 0;
  font-size:clamp(.86rem,1.15vw,1.4rem); line-height:2.1; color:var(--body);
}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:clamp(92px,7vw,132px); padding:.55rem 1.5rem; margin-top:clamp(8px,1.8vh,24px);
  border:1px solid #b9c4cd; border-radius:999px;
  font-size:clamp(11px,.75vw,14px); color:var(--ink-2);
  transition:.4s var(--e-out); position:relative; overflow:hidden;
}
.btn-ghost::after{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-out);
}
.btn-ghost:hover{ color:#fff; border-color:var(--ink); }
.btn-ghost:hover::after{ transform:scaleX(1); }

/* ═══════════ NEWS & EVENTS ═══════════ */
/* 版面基准：新闻.psd（1920×1080）
   横向：左边界 123、右边界 1802（**左右不等距**，左 123 / 右 118）
        → 用 6.4063vw / 93.8542vw 精确定位，不能用 margin:auto 居中（会右移约 5px）
   纵向锚点（相对区块顶）：标题 91 / 大日期 206 / 主标题 258 / Learn more 435 /
   箭头 562 / 主图 205–687 / 列表顶线 759 / 列表标题 810 / 列表日期 970 / 列表底线 1027
   分隔线：统一 #EEEEEE 1px；水平线 y=759、y=1027；竖线 x=678、x=1248 */
.news{
  position:relative; padding:clamp(58px,8.4vh,91px) 0 clamp(40px,4.9vh,53px);
  /* 背景改用 PSD 导出的真实背景层（news-bg.webp）：
     原来是 linear-gradient 近似模拟，但 PSD 背景右上角有极微弱的纹理细节，
     渐变做不出来。实测该 JPG 与 PSD 合成图的边缘像素差仅 0.2~0.5。
     保留渐变作为图片未加载时的兜底。 */
  background:#ffffff url('../img/news/news-bg.webp') top center / 100% 100% no-repeat;
  --news-l:6.4063vw;                 /* 123 / 1920 */
  --news-w:87.4479vw;                /* (1802-123) / 1920 = 1679 */
}
.news__head,
.news__feature,
.news__list{
  width:var(--news-w); margin-left:var(--news-l); margin-right:0;
}
.news__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.news__head h2{ font-size:clamp(1.4rem,2.35vw,2.85rem); font-weight:600; letter-spacing:-.005em; }
.news__feature{
  margin-top:clamp(22px,4.1vh,54px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(24px,4vw,80px); align-items:start;
}
/* 左侧文字列：PSD 用绝对锚点（日期 206 / 主标题 258 / Learn more 435 / 箭头 562，
   相对主图顶 205 起算）。这里把绝对锚点换算成相对间距逐段还原。 */
.news__text{ display:flex; flex-direction:column; padding-top:0; }
.news__text time{ font-size:clamp(10px,.68vw,13px); color:#9aa5b1; letter-spacing:.02em; line-height:1; }
.news__text h3{
  margin:clamp(18px,3.6vh,39px) 0 clamp(24px,7.9vh,85px); max-width:min(726px,100%);
  font-size:clamp(1.05rem,1.62vw,2rem); font-weight:600; line-height:1.45; color:#1c2733;
  letter-spacing:-.005em;
}
.news__more{
  display:inline-flex; align-items:center; gap:.45rem; width:max-content; line-height:1;
  font-size:clamp(11px,.72vw,13.5px); color:#7b8794; transition:color .3s, gap .4s var(--e-out);
}
.news__more svg{ width:14px; height:14px; }
.news__more:hover{ color:var(--gold-2); gap:.8rem; }
.news__nav{ display:flex; gap:.5rem; margin-top:clamp(44px,10.5vh,113px); }
.news__nav button{
  width:clamp(28px,2.1vw,40px); height:clamp(28px,2.1vw,40px); border-radius:50%;
  display:grid; place-content:center; color:#94a0ac; border:1px solid #dde3e8;
  transition:.4s var(--e-out);
}
.news__nav button svg{ width:15px; height:15px; }
.news__nav button.is-dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.news__nav button:hover{ transform:scale(1.1); }
.news__media{
  margin:0; border-radius:4px; overflow:hidden; box-shadow:var(--shadow-m);
  aspect-ratio:855/482;   /* = PSD 主图 bbox 855×482（列宽不同时按此比例等比缩放） */
}
.news__media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
/* 列表区：PSD 里上下各有一条 #EEEEEE 水平线（y759 / y1027），
   列间两条竖线（x678 / x1248）。旧实现只有竖线，缺上下横线。 */
.news__list{
  margin-top:clamp(46px,8.24vh,89px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee;
}
.news__item{
  display:flex; flex-direction:column; justify-content:space-between; gap:clamp(30px,6vh,74px);
  min-height:clamp(180px,24.8vh,268px);
  padding:clamp(24px,4.7vh,51px) clamp(16px,1.9vw,30px) clamp(18px,3.75vh,40px);
  border-left:1px solid #eeeeee; transition:background-color .45s var(--e-out);
}
.news__item:first-child{ border-left:0; }
.news__item:hover{ background:#f7fafc; }
.news__item h4{
  font-size:clamp(.8rem,.93vw,1.12rem); font-weight:500; line-height:1.5; color:#22303d;
  font-family:'Inter',sans-serif; letter-spacing:0;
}
.news__meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.news__meta time{ font-size:clamp(10px,.68vw,12.5px); color:#9aa5b1; }
.news__meta span{
  display:inline-flex; align-items:center; gap:.4rem; font-size:clamp(10px,.68vw,12.5px);
  color:#7b8794; transition:color .3s, gap .4s var(--e-out);
}
.news__meta svg{ width:13px; height:13px; }
.news__item:hover .news__meta span{ color:var(--gold-2); gap:.7rem; }

/* ═══════════ 页脚 ═══════════ */
.footer{
  position:relative; overflow:hidden; background:var(--dark);
  color:#e7edf3;
  min-height:660px;          /* 老浏览器回退 */
  min-height:var(--vh100);   /* JS 实算，Safari 归位 */
  display:flex; flex-direction:column;
  padding:clamp(54px,7.2vh,112px) var(--pad) clamp(24px,2.8vh,40px);
  isolation:isolate;
}
.footer__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.footer__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.14); will-change:transform; opacity:.72;
}
/* 视频不可用（Safari 解不了 / 被策略拦 / 加载失败）→ 用海报图顶住，绝不黑屏 */
.footer__media::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:url('../video/footer_poster.jpg') center/cover no-repeat;
}
.footer.no-video video{ display:none; }
.footer__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(140,175,205,.32) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(140,175,205,.32) 1px, transparent 1px);
  background-size:64px 64px; opacity:.5;
  mask-image:radial-gradient(120% 90% at 30% 40%, #000 20%, transparent 82%);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 40%, #000 20%, transparent 82%);
}
.footer__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,23,32,.80) 0%, rgba(14,23,32,.52) 34%, rgba(14,23,32,.92) 100%);
}
.footer__inner{
  position:relative; z-index:2; width:var(--wrap); margin-inline:auto;
  flex:1 1 auto; display:flex; flex-direction:column;
}
.footer__top{ display:flex; justify-content:space-between; gap:clamp(30px,6vw,120px); flex-wrap:wrap; }
.footer__logo{ width:clamp(140px,10.6vw,204px); filter:brightness(0) invert(1); }
.footer__brand h3{
  margin:clamp(20px,4.5vh,56px) 0 clamp(12px,2.4vh,28px);
  font-size:clamp(.92rem,1.02vw,1.22rem); font-weight:500; color:#fff;
  font-family:'Inter',sans-serif; letter-spacing:0;
}
.sub-form{ max-width:min(560px,90%); }
.sub-form > label{
  display:block; font-size:clamp(10px,.68vw,12.5px); color:#9aa8b6; margin-bottom:.4rem;
}
.sub-form__row{ display:flex; align-items:center; gap:.6rem; border-bottom:1px solid rgba(190,210,228,.42); padding-bottom:.5rem; }
.sub-form__row input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-size:clamp(.85rem,.95vw,1.15rem); color:#fff; letter-spacing:.01em;
}
.sub-form__row input::placeholder{ color:rgba(200,215,228,.42); }
.sub-form__row button{
  width:34px; height:34px; border-radius:50%; display:grid; place-content:center;
  color:#cfdce7; transition:.4s var(--e-out);
}
.sub-form__row button svg{ width:17px; height:17px; }
.sub-form__row button:hover{ color:var(--gold); transform:translateX(4px); }
.chk{
  display:flex; gap:.6rem; align-items:flex-start; margin-top:clamp(12px,2.2vh,22px);
  font-size:clamp(10px,.7vw,12.5px); line-height:1.65; color:#9aa8b6; cursor:pointer; max-width:min(520px,90%);
}
.chk input{ position:absolute; opacity:0; width:0; height:0; }
.chk i{
  flex:none; width:14px; height:14px; margin-top:3px; border-radius:3px;
  border:1px solid rgba(190,210,228,.6); position:relative; transition:.3s;
}
.chk input:checked + i{ background:var(--gold); border-color:var(--gold); }
.chk input:checked + i::after{
  content:''; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:2px solid #10202e; border-top:0; border-left:0; transform:rotate(42deg);
}
.chk a{ color:#d7e4ef; text-decoration:underline; text-underline-offset:2px; }
.footer__contact{ display:grid; gap:.35rem; justify-items:start; align-content:start; }
.footer__contact .lbl{ font-size:clamp(10px,.68vw,12.5px); color:#9aa8b6; margin-top:clamp(10px,2vh,22px); }
.footer__contact .lbl:first-child{ margin-top:0; }
.footer__contact .mail{
  font-size:clamp(1rem,1.5vw,1.82rem); color:#fff; font-weight:300; letter-spacing:.005em;
  position:relative;
}
.footer__contact .mail::after{
  content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-out);
}
.footer__contact .mail:hover::after{ transform:scaleX(1); }
.socials{ display:flex; gap:.55rem; margin-top:.5rem; }
.socials a{
  width:34px; height:34px; border-radius:8px; display:grid; place-content:center; color:#dbe6ef;
  transition:.4s var(--e-out);
}
.socials a svg{ width:20px; height:20px; }
.socials a:hover{ color:var(--gold); transform:translateY(-3px); }

.footer__cols{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(16px,2.4vw,38px);
  margin-top:auto;                 /* 把导航推到底部，与顶部订阅区拉开距离 */
  padding-top:clamp(40px,7vh,100px);
}
.footer__cols h4{
  font-size:clamp(11px,.82vw,15px); font-weight:500; color:#fff; margin-bottom:clamp(10px,2vh,20px);
  font-family:'Inter',sans-serif; letter-spacing:0;
}
.footer__cols a{
  display:block; font-size:clamp(10px,.72vw,13px); color:#93a3b1; line-height:1.5;
  margin-bottom:clamp(6px,1.1vh,12px); transition:color .3s, transform .4s var(--e-out);
}
.footer__cols a:hover{ color:#fff; transform:translateX(3px); }
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(26px,4.5vh,64px); padding-top:clamp(14px,2vh,22px);
  border-top:1px solid rgba(190,210,228,.16);
  font-size:clamp(10px,.7vw,12.5px); color:#8b9aa8;
}
.footer__legal{ display:flex; align-items:center; gap:.6rem; }
.footer__legal i{ font-style:normal; opacity:.5; }
.footer__legal a:hover{ color:#fff; }

/* ─────────── 动效基元 ─────────── */
[data-reveal]{ transition:opacity .9s var(--e-out), transform .9s var(--e-out); }
.js [data-reveal]{ opacity:0; transform:translateY(28px); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
.showcase__reveal{ transition-duration:1.1s; }

/* 标题逐字揭示（无 JS 时保持可见） */
.line{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.line b{ display:inline-block; }
.char{ display:inline-block; will-change:transform; }
.js .char{ transform:translateY(118%); }
.js .line.is-in .char{
  transform:translateY(0);
  transition:transform .95s var(--e-out);
  transition-delay:calc(var(--i, 0) * 24ms);
}

/* ─────────── 响应式 ─────────── */
@media (max-width: 1280px){
  .mainnav__list{ gap:.9rem; }
  .mainnav__acct > button{ display:none; }
}
@media (max-width: 1024px){
  :root{ --stage-ar: 4 / 3; }
  .mainnav__list, .mainnav__right .mainnav__ico{ display:none; }
  .mainnav__pill{ justify-content:space-between; }
  .showcase__nav{ right:16px; }
  .news__feature{ grid-template-columns:1fr; }
  .news__list{ grid-template-columns:1fr; }
  .news__item{ border-left:0; border-top:1px solid #e4eaee; min-height:0; gap:1.2rem; }
  .news__item:first-child{ border-top:0; }
  .footer__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .leading__copy{ max-width:92%; }
}
@media (max-width: 900px){
  .dock{ width:min(94vw,540px); height:auto; flex-direction:column; gap:5px; padding:7px; }
  .dock__cell{ flex:0 0 auto; padding:.56rem 1rem; gap:0; }
  .dock__cell--plain{ background:none; }
  .dock__sep{ display:none; }
  .dock__go{ flex:0 0 auto; padding:.56rem 1rem; justify-content:space-between; }
  .opt{ left:0; right:0; width:100%; }
}
@media (max-width: 900px){
  /* 竖屏：产品层上移到导航与标题之间，避免压住标题和搜索坞 */
  .field__stage{
    top:26%;
    transform:translate(-50%,-50%);
  }
  .is-ready .field__stage{ transform:translate(-50%,-50%); }
}
@media (max-width: 720px){
  .hero__title{ font-size:clamp(1.02rem, 5.1vw, 1.6rem); letter-spacing:.05em; }
  .brandbar{ width:min(92vw,420px); height:58px; padding-left:1.1rem; }
  .brandbar__menu{ width:50px; height:50px; }
  .slide{ flex-basis:74vw; }
  .showcase__nav{ right:50%; top:auto; bottom:calc(100% - 60%); transform:translateX(50%); }
  .footer__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem 1rem; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .leading__copy{ max-width:100%; line-height:1.85; }
  .leading__dots{ background-size:cover; background-position:center; }
  .news__media{ aspect-ratio:16/11; }
}
@media (max-width: 480px){
  .segmented{ width:calc(100% - 2rem); }
  .segmented button{ flex:1; padding-inline:.5rem; }
  .footer__cols{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  /* 减弱动效时：保留光标（它是品牌元素，不是装饰动效），但去掉跟随延迟的"漂浮"感。
     绝不能 display:none —— 那会让整只小人在 Mac 上直接消失。 */
  .cursor{ transition:none !important; }
  /* 注意：这里**不能**加 animation:none —— 挥手动效是品牌元素本身，
     不是装饰动效。一旦停掉，小人会定格在第一帧（抬着手不动），
     比"少个动效"更糟。只关过渡，保留逐帧动画。 */
  .cursor__sprite{ transition:none !important; }
  .hero__aurora{ animation:none !important; }
  /* 悬浮小人：bob 浮动属于装饰动效，减弱动效时停掉；
     但挥手逐帧由 main.js 的 rAF 推进，不经过 CSS 动画，
     所以不受此处影响、依旧播放 —— 与光标小人保持同一策略。 */
  .mascot-bob{ animation:none !important; }
  .hero__cue i::after{ animation:none !important; }
  .loader__mark{ animation:none !important; }
}