@charset "utf-8";

@font-face {
  font-family: 'Alexandria';
  src: url('../fonts/Alexandria-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Alexandria';
  src: url('../fonts/Alexandria-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Alexandria';
  src: url('../fonts/Alexandria-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* 设计画布 2500px 比视口宽，两侧多出的部分是有意裁掉的 —— 但它会让文档产生横向可滚动余量。
   Safari 的触摸板斜向手势不认 overflow-x:hidden，能把整页横向推走，而固定的顶部导航层不跟着动
   → 看起来"内容错位且回不来"。overflow-x:clip 不创建滚动容器、Safari 也会真正裁掉，
   两行并列写：不支持 clip 的老浏览器仍退回 hidden。 */
html { overflow-x: hidden; overflow-x: clip; overflow-y: auto; background: #0c0c0e; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; scroll-padding-top: calc(113px * var(--page-scale, 1)); }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* 与 html 同步裁掉横向溢出（Safari 需要两层都写才拦得住触摸板横向手势）；
     只写 clip 不写 hidden：clip 不会把 body 变成滚动容器，也就不会多出一层纵向滚动 */
  overflow-x: clip;
  font-family: 'Inter', 'Alexandria', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #e7e5ce;
  -webkit-font-smoothing: antialiased;
  background: #0c0c0e;
}
img { display: block; max-width: none; }
a { text-decoration: none; color: inherit; cursor: pointer; }
button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }

#page-root {
  position: absolute;
  top: 0;
  left: var(--root-offset-x, 0);
  width: 2500px;
  height: 4222px;
  transform-origin: top left;
  transform: scale(var(--page-scale, 1));
}

/* ============ Fixed header layer (always pinned to viewport top, scaled with page) ============ */
.header-fixed-layer {
  position: fixed;
  top: 0;
  left: var(--root-offset-x, 0);
  width: 2500px;
  height: 113px;
  transform-origin: top left;
  transform: scale(var(--page-scale, 1));
  z-index: 1000;
}

/* ============ Header (Layer 4, absolute overlay on top) ============ */
.tab-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 2500px;
  height: 113px;
  padding: 16px 310px 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
}
.tab-bar__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}
.tab-bar__left { display: flex; align-items: center; gap: 110px; }
.tab-bar__logo { width: 146px; height: 63px; }
.tab-bar__nav {
  display: flex;
  align-items: center;
  gap: 53px;
  font-family: 'Alexandria', 'Inter', sans-serif;
  font-size: 22px;
  white-space: nowrap;
}
.tab-bar__nav a {
  color: #e7e5ce;
  font-weight: 400;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  isolation: isolate;
}
.tab-bar__nav a::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 123px;
  height: 57px;
  transform: translate(-50%, -50%);
  background-image: url('../img/common/header/nav_active.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 123px 57px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
}
.tab-bar__nav a.is-active {
  font-family: 'Alexandria', 'Inter', sans-serif;
  color: #fff2b4;
  font-weight: 700;
}
.tab-bar__nav a.is-active::before { opacity: 1; }
/* ---- COMMUNITIES 下拉（设计稿 node 12305:2「社区下拉」还原） ---- */
.tab-bar__nav-wrap { position: relative; display: flex; align-items: center; }
.nav-dropdown {
  position: absolute;
  /* 顶部对齐 tab-bar 底边 91px，上移 36px 为 55px，再下移 8px → 63px */
  top: 63px;
  left: 50%;
  transform: translateX(-50%);
  /* 按底框切图原生大小 1:1 展示（120×221），不放大 */
  width: 120px;
  height: 221px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* 缩小上下 padding，把释放空间转为更大的图标间距（底框尺寸不变） */
  padding: 16px 0 12px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 去掉悬浮下拉动效：无淡入 / 无下滑，hover 即时显隐 */
  transition: none;
  z-index: 1100;
}
.tab-bar__nav-wrap.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
}
.nav-dd__link {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex: 0 0 auto;
  /* 内容载入动效：逐项 stagger（opacity + 位移 + --i 延迟），点击展开时触发 */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease;
}
.tab-bar__nav-wrap.is-open .nav-dd__link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}
.nav-dd__link img { display: block; width: auto; height: auto; }
/* 图标按切图原生尺寸 1:1（figma 设计值），不放大 */
.nav-dd__link--facebook img { width: 17px; height: 27px; }
.nav-dd__link--youtube img { width: 30px; height: 19px; }
.nav-dd__link--discord img { width: 32px; height: 24px; }
.nav-dd__link--tiktok img { width: 24px; height: 29px; }
.nav-dd__divider {
  flex: 0 0 auto;
  /* 分割线随底框同比放大：设计里线宽/面板宽 = 94/120 ≈ 78.4%，
     与底框 120→162 的 1.35× 横向放大一致，避免相对底框显短 */
  width: 78.4%;
  height: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: .1;
}

.tab-bar__right { display: flex; align-items: center; gap: 47px; }
.tab-bar__lang { width: 26px; height: 26px; cursor: pointer; }
.tab-bar__download { width: 202px; height: 46px; display: block; }

/* ============ Hero (首屏) ============ */
.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 2500px;
  height: 1000px;
  overflow: hidden;
  z-index: 1;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 2500px;
  height: 1000px;
  object-fit: cover;
}
.hero__slogan {
  position: absolute;
  left: 417px;
  top: 240px;
  width: 668px;
  height: 484px;
  object-fit: contain;
  z-index: 2;
}
.hero__slogan:not([src]),
.hero__slogan[src=""] { display: none; }
/* 按钮组 = App Store + Google Play + 三方支付 一行排开（顺序由 HTML 决定）、按钮间距统一 28px，整组水平中心对齐 slogan 文字中心。
   left 给的是该语种 slogan 文字包围盒的中心 x，translateX(-50%) 让组按自身实际宽度居中——
   各语种按钮图宽不同、镜像站藏掉三方支付按钮时，组都会自动重新居中，不用逐个算偏移。
   slogan 文字中心：en 779 / de 790 / es 788 / fr 783.5 */
.hero__actions {
  position: absolute;
  left: 779px;
  top: 604px;
  display: flex;
  align-items: center;
  gap: 28px;
  transform: translateX(-50%);
  z-index: 3;
}
html[lang="de"] .hero__actions { left: 790px; }
html[lang="es"] .hero__actions { left: 788px; }
html[lang="fr"] .hero__actions { left: 783.5px; }
.hero__store { display: block; flex-shrink: 0; }
/* Google Play / App Store：四语种图都按 1:1 原始像素展示（Google Play 185~188 × 55~56，App Store 166~177 × 55~56），两者等高 */
/* 商店直充入口（5% BONUS）：在 flex 里只占图内黑色按钮主体（各语种同为 187×55）的位，
   整张图（含顶部 BONUS 斜标）按 1:1 原始像素绝对定位、向上溢出，斜标不参与间距计算。
   en/de 图为 250×110（主体起点 18,55）；es/fr 文案两行、图为 274×112（主体起点 30,57），故偏移不同 */
.hero__store--bonus { position: relative; width: 187px; height: 55px; }
.hero__store--bonus img {
  position: absolute;
  left: -18px;
  top: -55px;
  width: 250px;
  height: 110px;
}
html[lang="es"] .hero__store--bonus img,
html[lang="fr"] .hero__store--bonus img {
  left: -30px;
  top: -57px;
  width: 274px;
  height: 112px;
}

/* 三方支付按钮按域名隐藏（html.no-bonus-store，开关见 index.html 头部内联脚本）：
   按钮藏掉后剩 App Store + Google Play 两个，按钮组靠 translateX(-50%) 自动回到 slogan 文字中心，无需额外回位 */
html.no-bonus-store .hero__store--bonus { display: none; }

/* ============ Content background (long backdrop image) ============ */
.content-bg {
  position: absolute;
  top: 924px;
  left: 0;
  width: 2500px;
  height: 3312px;
  z-index: 2;
  pointer-events: none;
}
.content-bg img { width: 2500px; height: 3312px; display: block; }

/* ============ Section 1: FEATURES (image carousel showcase) ============ */
.s1 {
  position: absolute;
  top: 1047px;
  left: 0;
  width: 2500px;
  height: 684px;
  z-index: 3;
}
.s1__title {
  position: absolute;
  top: 10px;
  left: 444px;
  width: auto;
  height: auto;
  max-width: none;
  z-index: 4;
}
.s1__frame {
  position: absolute;
  top: 50px;
  left: 734px;
  width: 960px;
  height: 630px;
}
.s1__frame-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 蒙版 img 仅作 runtime 数据绑定锚点，不参与渲染（实际形状由 .s1__swiper 的 CSS mask 完成） */
.s1__mask {
  position: absolute;
  left: 134px;
  top: 163px;
  width: 760px;
  height: 438px;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
/* 轮播容器：用蒙版图作 CSS mask，按蒙版外轮廓裁切轮播图 */
.s1__swiper {
  position: absolute;
  left: 134px;
  top: 163px;
  width: 760px;
  height: 438px;
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: url('../img/common/s1/mask_center.webp');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../img/common/s1/mask_center.webp');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}
.s1__swiper .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}
.s1__swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
}
/* 未选中态：暗化 + 降饱和 + 冷色蒙版叠加 */
.s1__swiper .swiper-slide:not(.swiper-slide-active) img {
  filter: brightness(0.5) saturate(0.55);
}
.s1__swiper .swiper-slide:not(.swiper-slide-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(12, 38, 56, 0.45);
  pointer-events: none;
}
.s1__swiper .swiper-slide--empty {
  background: #0a0a0a;
}
.s1__char-left {
  position: absolute;
  left: 482px;
  top: 251px;
  width: 307px;
  height: 385px;
  z-index: 4;
  overflow: hidden;
}
.s1__char-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  filter: brightness(0.8) grayscale(1);
}
.s1__char-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3, 32, 32, 0.68);
  pointer-events: none;
}
.s1__char-right {
  position: absolute;
  left: 1707px;
  top: 252px;
  width: 307px;
  height: 384px;
  z-index: 4;
  overflow: hidden;
}
.s1__char-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  filter: brightness(0.8) grayscale(1);
}
.s1__char-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3, 32, 32, 0.68);
  pointer-events: none;
}
.s1__arrow {
  position: absolute;
  top: 393px;
  cursor: pointer;
  z-index: 5;
}
.s1__arrow--left { left: 774px; width: 60px; height: 89px; }
.s1__arrow--right { left: 1665px; width: 61px; height: 88px; }
.s1__counter {
  position: absolute;
  top: 662px;
  left: 1083px;
  width: 335px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s1__counter-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s1__counter-text {
  position: relative;
  top: 10px;
  font-family: 'Alexandria', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #e7e5ce;
  white-space: nowrap;
}

/* ============ Section 2: CHARACTERS ============ */
.s2 {
  position: absolute;
  top: 1785px;
  left: 0;
  width: 2500px;
  height: 1020px;
  z-index: 3;
}
.s2__char-bg {
  position: absolute;
  top: 46px;
  left: 0;
  width: 2500px;
  height: 928px;
  z-index: 1;
  display: none;
}
.s2__char-figure.is-flashing img {
  animation: s2-fig-flash .26s cubic-bezier(.4, 0, .2, 1);
}
@keyframes s2-fig-flash {
  0%   { filter: brightness(1)  saturate(1)  contrast(1); }
  20%  { filter: brightness(0)  saturate(0)  contrast(1.1); }
  55%  { filter: brightness(.5) saturate(.7) contrast(1); }
  100% { filter: brightness(1)  saturate(1)  contrast(1); }
}
.s2__char-bg img {
  width: 2500px; height: 928px; object-fit: cover; display: block;
  filter: brightness(.5) saturate(.85);
  transition: filter .35s ease;
  transform-origin: center 60%;
}
.s2__char-bg.is-pulsing { animation: s2-mist-pulse .65s cubic-bezier(.22,.61,.36,1); }
.s2__char-bg.is-pulsing img { animation: s2-mist-img-pulse .65s cubic-bezier(.22,.61,.36,1); }
@keyframes s2-mist-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.018); }
  100% { transform: scale(1); }
}
@keyframes s2-mist-img-pulse {
  0%   { filter: brightness(.5) saturate(.85); }
  45%  { filter: brightness(.78) saturate(1); }
  100% { filter: brightness(.5) saturate(.85); }
}

/* Layer 2: character figure (synthesized "walks out of ink") */
.s2__char-figure {
  position: absolute;
  top: 46px;
  left: 0;
  width: 2500px;
  height: 928px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.s2__char-figure img {
  width: 2500px; height: 928px; object-fit: cover; display: block;
  transform-origin: center 60%;
  transform: translateX(0) scale(1.05);
  opacity: 1;
  transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    opacity .45s ease;
  will-change: transform, opacity;
}
.s2__char-figure.is-leaving--left img  { transform: translateX(-120px) scale(1.05); opacity: 0; }
.s2__char-figure.is-leaving--right img { transform: translateX(120px)  scale(1.05); opacity: 0; }
.s2__char-figure.is-entering--left img  { transform: translateX(-120px) scale(1);    opacity: 0; transition: none; }
.s2__char-figure.is-entering--right img { transform: translateX(120px)  scale(1);    opacity: 0; transition: none; }

/* 多 layer 立绘：6 个 img 兄弟 stack，全部 absolute 叠在容器内，
   切换只 toggle .is-visible（visibility 切换 = 同步、无 raster/paint 延迟） */
.s2__char-bg .char-layer,
.s2__char-figure .char-layer {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}
.s2__char-bg .char-layer.is-visible,
.s2__char-figure .char-layer.is-visible {
  visibility: visible;
}
.s2__title {
  position: absolute;
  top: 56px;
  left: 444px;
  width: auto;
  height: auto;
  max-width: none;
  z-index: 4;
}
.s2__intro {
  position: absolute;
  top: 213px;
  left: 1400px;
  width: 731px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.s2__char-title { width: 731px; height: auto; display: block; }
.s2__avatars {
  position: absolute;
  top: 750px;
  left: 429px;
  width: 1050px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}
.s2__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
  cursor: pointer;
}
.s2__avatar + .s2__avatar {
  margin-left: -36px;
}
.s2__avatar__base,
.s2__avatar__active {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.s2__avatar__base,
.s2__avatar__active { transition: opacity .2s ease, filter .2s ease; }
.s2__avatar__active { opacity: 0; }
.s2__avatar.is-active .s2__avatar__base { opacity: 0; }
.s2__avatar.is-active .s2__avatar__active { opacity: 1; }
.s2__avatar.is-active { z-index: 7; }
.s2__avatar:not(.is-active):hover .s2__avatar__base {
  filter: brightness(1.2) saturate(1.15);
}

/* S2 intro swap (on character switch) */
.s2__intro .s2__char-title {
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.s2__intro.is-swapping .s2__char-title {
  opacity: 0;
  transform: translateY(10px);
  transition-duration: .22s;
}

/* ============ Section 3: NEWS_UPDATES ============ */
.s3 {
  position: absolute;
  top: 2743px;
  left: 0;
  width: 2500px;
  height: 1100px;
  z-index: 3;
}
.s3__title {
  position: absolute;
  top: 10px;
  left: 475px;
  width: auto;
  height: auto;
  max-width: none;
  z-index: 6;
}
.s3__news-bg {
  position: absolute;
  top: 50px;
  left: 0;
  width: 2500px;
  height: 1000px;
  z-index: 1;
}
.s3__news-bg img { width: 2500px; height: 1000px; object-fit: cover; display: block; }
.s3__pic {
  position: absolute;
  top: 201px;
  left: 489px;
  width: 846px;
  height: 476px;
  object-fit: cover;
  z-index: 3;
  -webkit-mask-image: url('../img/common/s3/news_mask.webp');
          mask-image: url('../img/common/s3/news_mask.webp');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* 蒙版底部~15%是透明撕边，会咬掉图片下半段；竖向放大到 560 并顶对齐，
     让不透明区覆盖到图片底部，撕边改从顶部（天空）裁少量，保住下方人物 */
  -webkit-mask-size: 100% 560px;
          mask-size: 100% 560px;
  -webkit-mask-position: center top;
          mask-position: center top;
}
.s3__content {
  position: absolute;
  top: 358px;
  left: 1386px;
  width: 595px;
  height: 300px;
  z-index: 4;
}
/* 标题：绝对定位 + 底对齐（bottom 锚定）。底边固定在 content 内 y≈77（300-223，= 当前 2 行标题的底），
   向上生长：2 行时位置不变，3 行时向上扩展、绝不向下压到背景里画死的时间框。
   line-height 1.2 × 32px，最多 3 行（max-height 115.2），超 3 行末尾省略 */
.s3__release {
  position: absolute;
  bottom: 223px;
  left: -18px;
  width: 595px;
  font-family: 'Alexandria', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #e7e5ce;
  line-height: 1.2;
  word-break: break-word;
  max-height: 116px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* 时间 / 描述：绝对定位锁死固定 y（对齐背景图里的时间框），永不随标题行数移动 */
.s3__time {
  position: absolute;
  top: 110px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
}
.s3__time-icon { width: 19px; height: 19px; }
.s3__time-text {
  font-family: 'Alexandria', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #a7a9aa;
  white-space: nowrap;
}
.s3__desc {
  position: absolute;
  top: 169px;
  left: -18px;
  width: 568px;
  font-family: 'Alexandria', 'Inter', sans-serif;
  font-size: 22px;
  color: #a7a9aa;
  line-height: 1.3;
  word-break: break-word;
  min-height: 60px;
}
.s3__pager {
  position: absolute;
  top: 227px;
  left: 1696px;
  width: 308px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}
.s3__pager-row {
  display: flex;
  align-items: center;
  gap: 39px;
  position: relative;
}
.s3__pager-arrow {
  width: 36px;
  height: 35px;
  cursor: pointer;
}
.s3__pager-nums {
  font-family: 'Alexandria', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #848484;
  white-space: pre;
  position: relative;
  z-index: 2;
}
.s3__pager-nums span { cursor: pointer; transition: color .15s ease; }
.s3__pager-nums span:hover { color: #d4d4d4; }
.s3__pager-nums .is-active { color: #ff3d2c; position: relative; }
.s3__pager-indicator {
  position: absolute;
  top: 50%;
  left: 130px;
  width: 45px;
  height: 41px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  transition: left .2s ease;
}
.s3__bottom {
  position: absolute;
  top: 720px;
  left: 498px;
  width: 1408px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}
.s3__previous, .s3__next {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Alexandria', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #32a98c;
  cursor: pointer;
  user-select: none;
}
.s3__previous .tri, .s3__next .tri { width: 12px; height: 20px; }
.s3__previous {
  position: relative;
  left: 80px;
}
.s3__next {
  position: relative;
  left: 36px;
  gap: 10px;
  padding: 3px 6px;
}
.s3__cta {
  position: absolute;
  top: -6px;
  left: 752px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 302px;
  height: 80px;
}
.s3__cta img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* ============ Back to top ============ */
.back-to-top {
  position: absolute;
  top: 3681px;
  left: 498px;
  width: 1504px;
  height: 141px;
  z-index: 4;
}
.back-to-top img { width: 1504px; height: 141px; display: block; }

/* ============ Footer ============ */
.page-footer {
  position: absolute;
  top: 3900px;
  left: 0;
  width: 2500px;
  height: 202px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;
  z-index: 3;
}
.page-footer__logo {
  width: 249px;
  height: 123px;
  /* 单色 logo 重上色为 #e8e5cd：
     content 用纯色渐变替换掉原白色位图（字符串 "" 会被忽略、白位图仍会显示，必须用合法 <image> 值），
     再用 mask 把这块纯色裁成 logo 形状 */
  content: linear-gradient(#e8e5cd, #e8e5cd);
  background-color: #e8e5cd;
  -webkit-mask: url('../img/common/footer/logo_footer.webp') no-repeat center / contain;
  mask: url('../img/common/footer/logo_footer.webp') no-repeat center / contain;
}
.page-footer__links {
  font-family: 'Alexandria', 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #ffffff;
  white-space: pre;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ============ Language menu ============ */
.lang-menu {
  position: absolute;
  /* 切图原始尺寸 193×221；居中对齐到 globe icon 下方：
     图标中心距右 = 310 + 202 + 47 + 13 = 572 → right = 572 - 96 = 476 */
  top: 88px;
  right: 476px;
  width: 193px;
  height: 221px;
  background-image: url('../img/common/header/lang_menu_bg.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  /* 顶部 ~13px 是缺口（指向 globe），下方 4 行 × 52px = 208 */
  padding: 13px 12px 0;
  display: flex;
  flex-direction: column;
  z-index: 1100;
  font-family: 'Alexandria', 'Inter', sans-serif;
  /* 动效与 M 端多语言下拉一致：淡入 + 下滑 8px */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  pointer-events: none;
}
.lang-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}
.lang-menu__item {
  flex: 0 0 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4c5051;
  cursor: pointer;
  white-space: nowrap;
  /* 内容载入动效：复用逐项 stagger（color 即时，opacity/transform 逐项延迟） */
  opacity: 0;
  transform: translateY(-10px);
  transition: color .15s ease, opacity .3s ease, transform .3s ease;
}
.lang-menu.is-open .lang-menu__item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s, calc(var(--i, 0) * 60ms + 120ms), calc(var(--i, 0) * 60ms + 120ms);
}
.lang-menu__item:hover { color: #4c5051; }
.lang-menu__item.is-active {
  color: #ff4a26;
  font-weight: 700;
}

/* Scroll-reveal parallax (S1/S2/S3 titles & core elements) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* club 嵌入模式（html.club-embed，开关见各 news 页头部内联脚本）：宿主页面自带导航与语言选择，
   这里把固定顶栏和语言下拉整条隐藏。页面主体是绝对定位画布、顶栏本就浮在其上层，
   隐藏后内容位置不变、不会留空白。 */
html.club-embed .header-fixed-layer,
html.club-embed .lang-menu {
  display: none;
}