@charset "utf-8";

/* ============================================================================
   奇遇动物城 官网 · PC 滚动长页
   设计源：Figma 4:190（qie-1、首页.psd）—— 一张 2560 宽 × 7384 高的整页设计画布，
   纵向依次为 头图 / 下一站是动物城 / 谁是你的新室友 / 奇遇，无限可能 / 动物城头条 / 底部信息。

   缩放模型：整页按视口宽度等比缩放（pageScale = vw / 2560），缩放只发生在 #page-root
   自身 transform（transform-origin: top left，--pc-scale 恒为 1），页面纵向自然滚动。
   缩放后 #page-root 视觉宽恒等于视口宽，因此横向永不出现裁切或滚动条；
   设计里超出画布的出血（KV 3567 宽、烟花 3875 宽等）由 #page-root 的 overflow 裁掉，
   与 Figma 画框的裁切行为一致。

   文字：设计稿标注 Inter Regular，但正文内容是中文、Inter 无中文字形；
   现按业务方提供的「资源圆体 CN Bold」渲染（见下方 @font-face），系统黑体只作兜底；
   字距只落设计显式给出的那一处。
   ========================================================================== */

/* ── 正文字体：资源圆体 CN Bold（用户提供的字体包） ─────────────────────
   页面上所有由 CSS 渲染的文字都走它；标题 / 按钮 / 标语那些是设计切图，本来就带字形。
   字库按本站文案 + GB2312 常用字裁过子集（原包 13.9MB → 1.1MB），运营改文案也不会缺字；
   font-display: swap 保证字体没到位时先用系统字显示，不留空白。 */
@font-face {
  font-family: 'Resource Han Rounded CN';
  src: url('../font/resource-han-rounded-cn-bold.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; cursor: pointer; }

/* ── 不拖蓝色选区 ──────────────────────────────────────────────────────
   页面绝大部分是图和按钮，双击 / 拖动时浏览器会把它们当文字选中、拖出一片蓝底，
   点两下图就"变蓝"很像页面坏了。整页默认不可选，只给真正需要复制的几处单独放开：
   输入框、资讯详情的标题与正文、页脚的合规与备案文案。
   ------------------------------------------------------------------- */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input,
textarea,
.nsheet__d-title,
.nsheet__d-body,
.s5-legal {
  -webkit-user-select: text;
  user-select: text;
}

html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  position: relative;
  min-height: var(--page-h, 100vh);
  overflow-x: hidden;
  font-family: 'Resource Han Rounded CN', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #fbeee4;
}
img { display: block; }
ul, li { list-style: none; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* 仅供读屏与搜索引擎，不参与视觉 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Layer 0：缩放根 —— 决定整页缩放（结构常量，勿改）
   ========================================================================== */
#page-root {
  position: absolute;
  top: 0; left: 0;
  width: 2560px;
  height: 7384px;
  overflow: hidden;
  transform-origin: top left;
  transform: scale(var(--page-scale, 1));
}

/* 每屏＝设计画布上的一段，内部一律 Figma 1:1 px 绝对坐标。
   刻意不裁剪：设计里背景与角色本来就跨屏溢出，靠 DOM 先后顺序自然叠压。 */
.sec { position: absolute; left: 0; width: 2560px; }
.sec > * { position: absolute; }
/* 「整块即一张图」的容器才让图撑满 —— 必须限定 :only-child：
   轮播点（底条 + 当前点）、视频卡（相框 + 封面）、播放钮（胶囊 + 三角）这类
   一个容器里放两张不同尺寸图的地方，撑满会把小图拉成大图的尺寸。 */
.sec > div > img:only-child,
.sec > a > img:only-child,
.sec > button > img:only-child { width: 100%; height: 100%; }

#hero     { top: 0;      height: 1272px; }
#map      { top: 1272px; height: 1313px; }
#friend   { top: 2585px; height: 1464px; }
#gameplay { top: 4049px; height: 1401px; }
#news     { top: 5450px; height: 1189px; }
#footer   { top: 6639px; height: 745px; }

/* ============================================================================
   第 1 屏 · 头图
   ========================================================================== */
/* KV 按设计原位：(-500,-3) 3567×1427，左右各 500 px 出血由 #page-root 裁掉 */
.hero-bg {
  left: -500px; top: -3px;
  width: 3567px; height: 1427px;
  background-image: url("../img/hero/hero_kv.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}
.hero-slogan { left: -20px; top: 667px; width: 1143px; height: 745px; pointer-events: none; }
.hero-play   { left: 1206px; top: 312px; width: 145px; height: 141px; }
.hero-play img { transition: transform .25s ease; }
.hero-play:hover img { transform: scale(1.08); }
.hero-btn img {
  transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 4px 8px rgba(4, 0, 0, .18));
}
.hero-btn:hover img {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 8px 14px rgba(4, 0, 0, .26));
}
/* 头图只放「立即预约」一颗按钮，落点沿用设计里单按钮那一版（与原按钮组右缘对齐） */
.hero-btn--cta { left: 1839px; top: 1036px; width: 566px; height: 148px; }

/* ============================================================================
   第 2 屏 · 下一站是动物城
   ========================================================================== */
.s1-bg        { left: 0;      top: 0;     width: 2560px; height: 1868px; pointer-events: none; }
.s1-polaroid  { left: 208px;  top: 203px; width: 1357px; height: 1001px; pointer-events: none; }
/* 景点卡轮播：卡片是一整张切图（标题与介绍都烧在图里），一屏只露一张，
   切换用淡入淡出 —— 卡片自带白边且整体斜排，横向滑动会在容器边缘露出相邻卡片的角。 */
.s1-photo { left: 1025px; top: 396px; width: 1209px; height: 861px; overflow: hidden; z-index: 0; }
.s1-photo .swiper-slide { width: 100%; height: 100%; }
.s1-photo .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.s1-arrow { width: 80px; height: 80px; transition: transform .2s ease; }
.s1-arrow:hover { transform: scale(1.1); }
.s1-arrow--left  { left: 1064px; top: 664px; width: 80px; height: 81px; }
.s1-arrow--right { left: 2108px; top: 733px; }
.s1-char  { left: 165px;  top: 332px; width: 1137px; height: 1146px; pointer-events: none; }
.s1-title { left: 1086px; top: 257px; width: 1147px; height: 234px; pointer-events: none; }
.s1-deco  { left: 2120px; top: 451px; width: 207px;  height: 270px; pointer-events: none; }

/* ============================================================================
   第 3 屏 · 谁是你的新室友
   —— 整屏跟着选中的室友换肤：设计稿给了 5 套完整素材（第 1 位在 4:190，2~5 位在 17:680），
      背景 / 标题 / 中部装饰 / 爪印 / 立绘 / 名字牌 / 介绍文案七块全部随人替换。
      下面写的是**第 1 位（金条）**的落位，也就是不跑 JS 时的静态默认；
      介绍 / 立绘 / 装饰这三块每位的尺寸与坐标都不同，切换时由 js/home_pc.js 的
      S2_LAYOUT 表写成行内样式覆盖（坐标同样是设计画布 1:1 px）。
   ========================================================================== */
/* z-index: 0 是必需的：扫入时新背景那一层要靠 z-index 压住旧背景，而 .s2-bg 若不自成
   层叠上下文，那个 z-index 会跑到整屏这一级去比，新背景就会盖住立绘 / 标题 / 头像列
   （实测：扫过的地方内容整片消失）。给容器一个 z-index 把层级关系关在容器内部。 */
.s2-bg    { left: 0;     top: 0;    width: 2560px; height: 1901px; z-index: 0; pointer-events: none; }
/* 立绘 / 名字牌 / 介绍文案的整组容器：切换时整组一起淡出下沉、换完再浮起。
   透明度必须挂在这一层 —— 三块各自淡的话，半透明那几帧里角色会透出背后的文字、
   文字也会透出角色，看着就是图层上下穿插。整组淡入淡出时组内仍然互相遮挡，不会穿帮。
   容器本身不占位（撑满本屏），三块的坐标照旧是设计画布 1:1 px。 */
.s2-detail {
  left: 0; top: 0;
  width: 2560px; height: 100%;
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .68s var(--ease-back);
}
/* .sec > * / .sec > div > img:only-child 只管到直接子代，多套了一层就得在这里补上 */
.s2-detail > div { position: absolute; }
.s2-detail > div > img:only-child { width: 100%; height: 100%; }

.s2-intro { left: 785px; top: 496px; width: 784px; height: 674px; pointer-events: none; }
/* 立绘的橙色硬投影按 alpha 走，用 drop-shadow 而不是 box-shadow。
   设计只给第 1 位画了这层投影，其余 4 位没有 —— 切换时由 JS 按人开关。 */
.s2-char {
  left: 1448px; top: 368px;
  width: 696px; height: 1331px;
  filter: drop-shadow(-27.251px 9.919px 0 #ffbf6b);
  pointer-events: none;
}
.s2-name  { left: 1920px; top: 1089px; width: 247px;  height: 192px; pointer-events: none; }
.s2-paw   { left: 709px;  top: 1055px; width: 141px;  height: 126px; pointer-events: none; }
.s2-deco  { left: 621px;  top: 752px;  width: 1485px; height: 578px; pointer-events: none; }
.s2-title { left: 440px;  top: 142px;  width: 1174px; height: 333px; pointer-events: none; }
/* 当前选中指示三角：选中项恒在中间槽，三角固定在设计给的位置 */
.s2-tri   { left: 628px;  top: 856px;  width: 32px;   height: 47px;  pointer-events: none; }

/* 换肤图层：背景 / 标题 / 装饰 / 爪印这四块换的是同一位置的另一张图，
   所以用两张图轮流当上层做交叉淡入 —— 新图淡入的同时旧图淡出，中途不会露出底色，
   也不会像「先淡出再淡入」那样中间黑一下。第二层由业务 JS 在首次切换时克隆补上。
   这条选择器要压过上面 .sec > div > img:only-child 的撑满规则，故带 .sec 前缀。 */
.sec .s2-skin {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .42s var(--ease-out);
}
.sec .s2-skin.is-top { opacity: 1; }

/* 背景这一块不走淡入，走「扫入」：一条斜裁切线从左下角快速扫到右上角，
   新背景沿这条线扫进来、旧背景沿**同一条线**同步扫出去。
   两个多边形顶点数必须相同，clip-path 才补间；顶点写到框外是为了让裁切线在框内
   始终是完整的一整条斜线（不会露出多边形的角）。裁切线的斜率跟着框的长宽走，
   所以它是从本屏左下角扫向右上角，而不是固定 45°。

   ⚠️ 旧背景必须「扫出」，不能留着等扫完再撤 —— 背景图的**上沿有一整条镂空**
   （设计意图是从这里透出上一屏的画面）。旧图若还垫在下面，镂空处透出来的是旧背景；
   等扫完再撤旧图，那一条就会当场换成上一屏的画面，看着就是扫过之后闪一下色。
   两层各占裁切线一侧、同步走，镂空处任何时刻都只透出一层，就不会闪。
   旧图那侧刻意多留 0.4% 的重叠，避免两块裁切在交界处各自反锯齿、留下一条发亮的细缝。 */
.sec .s2-skin--wipe {
  opacity: 1;
  z-index: 2;
  transition: none;
  clip-path: polygon(-200% -100%, 200% 300%, 200% 500%, -200% 500%);
}
.sec .s2-skin--wipe.is-top {
  clip-path: polygon(-200% -300%, 200% 100%, 200% 500%, -200% 500%);
  transition: clip-path .46s cubic-bezier(.3, .85, .3, 1);
}
/* 旧图：同一条裁切线，留的是尚未扫到的右上侧。
   这里**故意不写 opacity**：旧图的不透明度全靠 is-top 给。写了 opacity: 1 的话，
   收尾摘掉 is-top 时它不会立刻消失，非要等这条规则也被摘掉才归 0，
   而那一刻过渡列表已经换回 opacity，旧背景就会整张浮出来再淡掉 —— 就是「扫完闪一下」。 */
.sec .s2-skin--wipeout {
  transition: none;
  clip-path: polygon(-200% -99.6%, 200% 300.4%, 200% -400%, -200% -400%);
}
.sec .s2-skin--wipeout.is-out {
  clip-path: polygon(-200% -299.6%, 200% 100.4%, 200% -400%, -200% -400%);
  transition: clip-path .46s cubic-bezier(.3, .85, .3, 1);
}

/* 左侧室友头像：循环轮播 —— 选中的那位恒在中间槽（设计稿就是 4、5、[1]、2、3 这个排布），
   切换时**整列一起上下滑动一格**，滑出视野的那端在裁剪框外补进新的一个，
   所以看不到头像在列首尾之间穿场。
   槽位等距 129（由设计稿 5 个头像的中心间距取平均，与设计落位相差 ≤11px），
   一共渲染 9 个节点：中间 5 个是可见的，上下各 2 个是滑动用的缓冲，被裁剪框挡住。
   裁剪框覆盖设计里这一列的可见范围 y 560~1220。 */
.s2-thumbs {
  left: 440px; top: 560px;
  width: 200px; height: 660px;
  overflow: hidden;
  pointer-events: none;
}
.s2-track { position: absolute; inset: 0; }
.s2-thumb {
  position: absolute;
  left: 89.5px;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: left .3s ease;
}
.s2-thumb.is-active { left: 99.5px; } /* 设计里选中态水平略微外扩 */
.s2-thumb--s0 { top: -188px; }
.s2-thumb--s1 { top: -59px; }
.s2-thumb--s2 { top: 70px; }
.s2-thumb--s3 { top: 199px; }
.s2-thumb--s4 { top: 328px; }  /* 中间＝选中槽 */
.s2-thumb--s5 { top: 457px; }
.s2-thumb--s6 { top: 586px; }
.s2-thumb--s7 { top: 715px; }
.s2-thumb--s8 { top: 844px; }
/* 悬停放大作用在图片上，不叠加到定位用的 translate(-50%,-50%) 上 */
.s2-thumb img { display: block; transition: transform .2s ease, filter .2s ease; }
.s2-thumb:not(.is-active):hover img { transform: scale(1.08); filter: brightness(1.08); }
.s2-thumb:not(.is-active):active img { transform: scale(1.02); }
/* 归位那一帧要关掉所有过渡：整列滑完后节点会重新分配「谁在中间」，
   选中态比未选中态水平偏右 10px，若不关过渡，刚落定的那个会横向补间一下（看着像闪动）。 */
.s2-thumb.is-jumping,
.s2-thumb.is-jumping img { transition: none !important; }
/* 尚未提供立绘与文案的室友：头像照常切换，只是右侧内容暂时换不了 */
.s2-thumb.is-empty { cursor: pointer; }

/* ============================================================================
   第 4 屏 · 奇遇，无限可能
   ========================================================================== */
.s3-bg    { left: -15px; top: 0;    width: 2603px; height: 1697px; pointer-events: none; }
/* 设计里标题画在三张卡之后（最上层），这里按同样的叠压顺序抬到卡片之上 */
.s3-title { left: 751px; top: 218px; width: 1105px; height: 236px; pointer-events: none; z-index: 6; }

/* 三卡轮播：中间卡按设计落在 (688,428) 1203×844，两侧卡缩小并轻微外推，
   尺寸与偏移都取自设计稿左右两张卡的实测值（左 0.677、右 0.570）。 */
/* 容器＝裁剪框：中心仍是设计的 1289.5（卡片落位不变），左右边界刚好包住
   设计里三张卡的横向范围 322~2237。循环起来之后队列里还有更外侧的卡，
   靠这个框把它们挡在视野外，卡片从框的边缘滑入滑出。 */
.s3-swiper {
  left: 319.5px; top: 428px;
  width: 1940px; height: 844px;
  overflow: hidden;
}
.s3-swiper .swiper-wrapper { align-items: center; }
/* 设计里同时只出现三张卡（左小 / 中大 / 右小），所以只有当前与紧邻的两张可见，
   队列里更外侧的淡出；切换时位移、缩放、淡入淡出一起走，形成轮播动效。 */
.s3-slide {
  position: relative;
  width: 1203px; height: 844px;
  flex-shrink: 0;
  transform-origin: center center;
  transition: transform .45s ease, opacity .45s ease;
  opacity: 0;
  z-index: 1;
}
/* 设计里相框先画、场景图后画：场景图压在相框之上，相框只露出四周边框 */
.s3-slide__frame { position: absolute; left: 0; top: 0; width: 1203px; height: 844px; z-index: 1; }
/* 没在正中展示的卡片，框内的场景图压一层 60% 黑色蒙版（外框保持原色）：用 brightness(.4) 实现，
   效果与盖 60% 黑色等价，且只压图片自身像素；切到正中时随位移、缩放一起提亮 */
.s3-slide__photo {
  position: absolute; left: 26px; top: 27px; width: 1164px; height: 790px; z-index: 2;
  filter: brightness(.4);
  transition: filter .45s ease;
}
.s3-swiper .swiper-slide-active { z-index: 3; opacity: 1; }
.s3-swiper .swiper-slide-active .s3-slide__photo { filter: none; }
.s3-swiper .swiper-slide-prev { z-index: 2; opacity: 1; transform: translateX(20px) scale(.677); }
.s3-swiper .swiper-slide-next { z-index: 2; opacity: 1; transform: translateX(24.5px) scale(.57); }

/* 箭头切图带一圈 5px 的白色圆角外描边（画布四周各扩 5），尺寸与落点同步外扩 5，
   黄色箭头本体仍在设计坐标 454 / 2085、817 上 */
.s3-arrow { width: 59px; height: 81px; z-index: 5; transition: transform .2s ease; }
.s3-arrow:hover { transform: scale(1.12); }
.s3-arrow--left  { left: 449px;  top: 812px; }
.s3-arrow--right { left: 2080px; top: 812px; }

/* 设计里轮播点也画在三张卡之后，抬到卡片之上（与箭头同层级） */
.s3-dots { left: 1109px; top: 1269px; width: 343px; height: 44px; pointer-events: none; z-index: 6; }
.s3-dots__off { position: absolute; left: 0; top: 10px; width: 343px; height: 26px; }
.s3-dots__on  { position: absolute; left: 40.5px; top: 0; width: 47px; height: 44px; transition: left .35s ease; }

/* ============================================================================
   第 5 屏 · 动物城头条
   ========================================================================== */
.s4-firework { left: -608px; top: 0;    width: 3875px; height: 1725px; pointer-events: none; }
.s4-deco     { left: 1188px; top: 305px; width: 1132px; height: 1166px; pointer-events: none; }
/* 设计里标题画在视频卡与资讯列表之后（最上层），按同样的叠压顺序抬上来 */
.s4-title    { left: 269px;  top: 208px; width: 1014px; height: 322px; pointer-events: none; z-index: 6; }

/* 视频卡：相框在下、封面在上，播放按钮独立定位 */
.s4-video { left: 298px; top: 392px; width: 1010px; height: 842px; pointer-events: none; }
.s4-video__frame { position: absolute; left: 0;    top: 0;    width: 1010px; height: 842px; }
.s4-video__cover { position: absolute; left: 35px; top: 29px; width: 919px;  height: 700px; }
.s4-play { left: 755px; top: 1075px; width: 203px; height: 46px; transition: transform .2s ease; }
.s4-play:hover { transform: scale(1.06); }
.s4-play__pill { position: absolute; left: 0;    top: 0;    width: 203px; height: 46px; }
.s4-play__tri  { position: absolute; left: 39px; top: 10px; width: 35px;  height: 35px; }

/* 分类栏：胶囊底 → 网点装饰 → 文字，叠压顺序与设计一致 */
/* 胶囊底按切图真实比例给高（177×60），落点由 js/home_pc.js 的 moveTabPill 算 ——
   切图上面三成是两只耳朵，按整张图居中会整体偏高一截，得让**主体**的中线压住文字中线 */
.s4-tab-pill {
  left: 1346.5px; top: 369.4px; width: 193px; height: 65.42px;
  /* 这一屏的分类栏、资讯条都跟着底座斜 3.19°，胶囊按同一角度转，才不会看着是歪的 */
  transform: rotate(3.19deg);
  filter: drop-shadow(-1.59px 2.544px 0 #fff);
  transition: left .3s ease, top .3s ease, width .3s ease;
  pointer-events: none;
}
/* 分类文字与下面的资讯条文字、选中胶囊同角度：跟着底座斜 3.19°（绕文字中心转） */
.s4-tab {
  transform: translateX(-50%) rotate(3.19deg);
  font-size: 31.999px;
  line-height: 56.457px;
  white-space: nowrap;
  color: #774940;
  transition: color .25s ease;
  z-index: 3;
}
.s4-tab.is-active { color: #fff; }
/* 悬浮态：未选中的分类划过时垫一枚奶油色胶囊，文字保持原来的棕色。
   宽度比选中态那枚窄一点，免得划过相邻分类时压到当前选中的粉色胶囊上。 */
.s4-tab::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 170px; height: 46px;
  /* 跟着分类文字一起斜，这里不再单独旋转（会叠成两倍） */
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #ebdfc2;
  opacity: 0;
  transition: opacity .22s ease;
  z-index: -1;
}
.s4-tab:not(.is-active):hover::before { opacity: 1; }
/* 点中的那一刻立刻撤掉奶油胶囊，不留淡出 —— 鼠标还停在原地，
   淡出的奶油会盖在刚落位的粉色胶囊上，看着就是两个色块重合闪一下 */
.s4-tab.is-active::before { opacity: 0; transition: none; }
.s4-tab--latest { left: 1443px; top: 381px; }
.s4-tab--news   { left: 1631px; top: 390px; }
.s4-tab--notice { left: 1821px; top: 402px; }
.s4-more {
  left: 2102px; top: 417px;
  /* 与左边三个分类同一行、同角度 */
  transform: translateX(-50%) rotate(3.19deg);
  font-size: 31.999px;
  line-height: 56.457px;
  white-space: nowrap;
  color: #774940;
  z-index: 3;
}
.s4-more:hover { color: #d2a358; }

/* 资讯列表：4 条按设计稿逐条定位（设计本身是轻微斜排，位置不统一） */
.s4-list { left: 0; top: 0; width: 2560px; height: 1189px; pointer-events: none; }
.s4-row {
  position: absolute;
  pointer-events: auto;
  transition: transform .2s ease;
}
.s4-row--1 { left: 1338px; top: 454px; width: 835px; height: 154px; }
.s4-row--2 { left: 1331px; top: 587px; width: 834px; height: 153px; }
.s4-row--3 { left: 1324px; top: 719px; width: 834px; height: 154px; }
.s4-row--4 { left: 1316px; top: 852px; width: 834px; height: 153px; }
.s4-row:hover { transform: translateX(6px); }
.s4-row__bg  { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 条目底纹这张切图里的卡片本身是斜的（实测顶边 3.19°，四条一致），
   条目内的分类 / 书签图标 / 标题 / 日期都按同一角度走，各自绕左上角旋转 ——
   设计稿给的落点坐标不变，只让文字方向与卡片平行。 */
.s4-row__cat,
.s4-row__title,
.s4-row__date {
  position: absolute;
  font-size: 26.666px;
  line-height: 56.457px;
  white-space: nowrap;
  transform: rotate(3.19deg);
  transform-origin: left top;
}
/* 条目内的文字整组比设计坐标上提 13：原来日期的字底贴着白卡底边（上方留白约 25、下方为 0），
   上提后上下留白各约 12，文字在卡片里居中。 */
.s4-row__cat    { left: 30px;  top: 1px;   color: #774940; }
/* 书签图标与标题文字取同一条中线（沿卡片倾斜方向对齐）：
   标题行框中心在 y≈81，图标高 32、且两者各绕自身左上角转 3.19°，
   换算下来图标 top 取 62 才与标题真正齐平。 */
.s4-row__bullet {
  position: absolute;
  left: 25px; top: 62px;
  width: 26px; height: 32px;
  transform: rotate(3.19deg);
  transform-origin: left top;
}
.s4-row__title  { left: 79px;  top: 53px;  color: #774940; }
.s4-row__date   { left: 652px; top: 87px;  color: #d2a358; }

/* ============================================================================
   第 6 屏 · 底部信息
   ========================================================================== */
.s5-bg { left: -16px; top: 0; width: 2605px; height: 1587px; pointer-events: none; }
.s5-links {
  left: 804px; top: 226px;
  font-size: 30px;
  line-height: 42.556px;
  color: #fff;
  white-space: pre;
}
.s5-links a { transition: opacity .2s ease; }
.s5-links a:hover { opacity: .75; }
.s5-legal {
  left: 804px; top: 285px;
  width: 1496px;
  font-size: 24px;
  line-height: 42.556px;
  color: #bebebe;
  white-space: pre-line;
}
.s5-lilith    { left: 262px;  top: 341px; width: 410px; height: 147px; pointer-events: none; }
/* 资质图标这一排整体比设计稿下移 50px：备案文案实际比设计多折了一行、底边落到 583，
   照设计的 561 摆会直接压在最后一行字上。三枚同排同幅下移，横向对齐不动。 */
.s5-badge--2  { left: 804px;  top: 612px; width: 201px; height: 77px; }
.s5-badge--1  { left: 1031px; top: 611px; width: 201px; height: 76px; }
.s5-rating    { left: 1257px; top: 611px; width: 60px;  height: 76px; pointer-events: none; }
.s5-badge { transition: opacity .2s ease; }
.s5-badge:hover { opacity: .85; }

/* ============================================================================
   跨屏装饰：设计稿里这两个角色在所有区块之上，所以单独一层放在最后
   ========================================================================== */
.deco-layer { position: absolute; left: 0; top: 0; width: 2560px; height: 7384px; pointer-events: none; }
.deco-layer > div { position: absolute; }
.deco-layer img { width: 100%; height: 100%; }
.deco-boy  { left: -95px;  top: 3811px; width: 390px; height: 514px; }
.deco-girl { left: 2175px; top: 5225px; width: 533px; height: 415px; }

/* ============================================================================
   导航栏：滚动长页里吸顶常驻，放在缩放根之外、自带同一份缩放。
   容器宽 2560，缩放后恰好等于视口宽，所以左簇用设计 x 值贴左缘、
   右簇用设计到画布右缘的距离贴右缘，两侧与设计稿逐像素一致。
   ========================================================================== */
.tab-bar {
  position: fixed;
  top: 0; left: 0;
  width: 2560px;
  height: 140px;
  transform-origin: top left;
  transform: scale(var(--page-scale, 1));
  z-index: 1000;
}
.tab-bar > *,
.nav-menu > *,
.nav-social > * { position: absolute; }
/* 只让「整块即一张图」的容器把图撑满；导航图标 / 胶囊各有自己的设计尺寸，不走这条 */
.tab-bar__bg img,
.nav-logo img,
.nav-social__item img,
.nav-divider img { width: 100%; height: 100%; }

/* 顶部渐变底纹：设计里超出画布左右各 735 / 731 px，opacity 30%。
   这张切图本身是个实心矩形，底边是硬切的；停在页面最顶端（首屏）时给它加一层
   底部渐隐遮罩，让暗色往下自然化开、不压出一条硬边线。遮罩范围换算：
   图高 566、可见区是底部 139px（top:-427），从图内 90%（≈可见区 y=82）起淡出到底。
   往下滚动后取消遮罩，回到实底状态。 */
.tab-bar__bg {
  left: 50%; margin-left: -2013px; top: -427px;
  width: 4026px; height: 566px;
  opacity: .3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 90%, rgba(0, 0, 0, 0) 100%);
}
.tab-bar.is-scrolled .tab-bar__bg {
  -webkit-mask-image: none;
  mask-image: none;
}

.nav-logo {
  left: 121px; top: 32px;
  width: 159px; height: 82px;
  filter: drop-shadow(0 2px 2px rgba(4, 0, 0, .25));
  transition: transform .25s ease;
}
.nav-logo:hover { transform: scale(1.04); }

/* ── 主导航 5 项 ───────────────────────────────────────────────────────────
   每项＝图标 + 文字，命中区取「已点击」粉色胶囊的尺寸（146×67），胶囊正好裹住这两者；
   图标与文字在项内按设计稿偏移落位，当前项额外铺上胶囊底。
   ------------------------------------------------------------------------ */
.nav-menu { position: static; }
.nav-item { width: 146px; height: 67px; }
.nav-item__pill {
  position: absolute;
  left: 0; top: 0;
  width: 146px; height: 67px;
  opacity: 0;
  transition: opacity .25s ease;
}
.nav-item.is-active .nav-item__pill { opacity: 1; }
.nav-item__icon {
  position: absolute;
  left: 16px;
  filter: drop-shadow(0 2px 1px rgba(4, 0, 0, .35));
  transition: transform .25s ease, filter .25s ease;
}
.nav-item:not(.is-active):hover .nav-item__icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 1px rgba(4, 0, 0, .35)) brightness(1.18);
}
/* 文字：line-height 133.328px 是设计稿行高，配 top:-29px 让字形中心落在 y≈73.7（与图标居中对齐） */
.nav-item__label {
  position: absolute;
  top: -29px;
  font-size: 31.999px;
  line-height: 133.328px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 1px rgba(4, 0, 0, .35);
  transition: transform .25s ease;
}
.nav-item:not(.is-active):hover .nav-item__label { transform: translateY(-2px); }

.nav-item--home     { left: 338px; top: 36px; }
.nav-item--map      { left: 502px; top: 36px; }
.nav-item--friend   { left: 663px; top: 36px; }
.nav-item--gameplay { left: 823px; top: 36px; }
.nav-item--news     { left: 985px; top: 36px; }

.nav-item--home     .nav-item__label { left: 59px; }
.nav-item--map      .nav-item__label { left: 56px; }
.nav-item--friend   .nav-item__label { left: 57px; }
.nav-item--gameplay .nav-item__label { left: 57px; }
.nav-item--news     .nav-item__label { left: 56px; }

/* 图标尺寸与项内偏移都按设计稿逐项落，不做统一 */
.nav-item__icon--home     { width: 38px; height: 33px; top: 20px; }
.nav-item__icon--map      { width: 32px; height: 37px; top: 18px; }
.nav-item__icon--friend   { width: 32px; height: 37px; top: 17px; }
.nav-item__icon--gameplay { width: 36px; height: 26px; top: 23px; }
.nav-item__icon--news     { width: 34px; height: 33px; top: 20px; }

/* ── 社交渠道 ─────────────────────────────────────────────────────────── */
.nav-social { position: static; }
.nav-social__item {
  filter: drop-shadow(0 2px 2px rgba(4, 0, 0, .25));
  transition: transform .25s ease, filter .25s ease;
}
.nav-social__item:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 2px rgba(4, 0, 0, .25)) brightness(1.18);
}
/* 从左到右：B站 / 小红书 / TapTap / 微信 / QQ / 抖音 / 渠道待确认 / 微博
   —— B 站排到第一个后，只把前三个的落点按各自图标宽度重排，图标之间的间距沿用设计原值。
   语言切换下线后右上角整组（社媒 / 分隔条 / BGM）右移 57，与下面两条同一位移，见分隔条那节。 */
.nav-social__item--bilibili  { right: 756px; top: 55px; width: 37px; height: 34px; }
.nav-social__item--xhs       { right: 652px; top: 57px; width: 81px; height: 30px; }
.nav-social__item--tap       { right: 566px; top: 56px; width: 60px; height: 33px; }
.nav-social__item--douyin    { right: 370px; top: 52px; width: 37px; height: 41px; }
.nav-social__item--channel-x { right: 306px; top: 53px; width: 33px; height: 39px; }
.nav-social__item--weibo     { right: 236px; top: 55px; width: 42px; height: 35px; }

/* 微信与 QQ 群都不外跳：hover 展开二维码气泡卡，两者复用同一套卡片。
   .nav-qr 的上半段是透明桥接区，兜住图标底缘到卡片顶缘之间的空隙，鼠标移过去不闪断。 */
.nav-wechat, .nav-qq { position: absolute; }
.nav-wechat { right: 498px; top: 56px; width: 42px; height: 35px; }
.nav-qq     { right: 436px; top: 54px; width: 35px; height: 38px; }
.nav-wechat__icon, .nav-qq__icon {
  width: 100%; height: 100%;
  filter: drop-shadow(0 2px 2px rgba(4, 0, 0, .25));
  transition: transform .25s ease, filter .25s ease;
}
.nav-wechat:hover .nav-wechat__icon,
.nav-qq:hover .nav-qq__icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 2px rgba(4, 0, 0, .25)) brightness(1.18);
}
.nav-qr {
  position: absolute;
  left: -46px; top: 35px;
  width: 131px; height: 194px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav-wechat:hover .nav-qr,
.nav-qq:hover .nav-qr {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* QQ 图标比微信窄 7px、高 3px：卡片按它自己的宽度重新居中、贴住它的底缘 */
.nav-qr--qq { left: -48px; top: 38px; }
.nav-qr__card {
  position: absolute;
  left: 0; top: 27px;
  width: 131px; height: 167px;
  filter: drop-shadow(0 6px 12px rgba(4, 0, 0, .22));
}
.nav-qr__code {
  position: absolute;
  left: 6px; top: 52px;
  width: 119px; height: 119px;
}
/* 卡片底部说明文案：设计给了 16px / #fd7fa0 / 字距 -0.8px（全页唯一显式字距），居中对齐 */
.nav-qr__caption {
  position: absolute;
  left: 67px; top: 170px;
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 16.129px;
  color: #fd7fa0;
  letter-spacing: -0.8px;
  white-space: nowrap;
}

/* ── 分隔条 / BGM 开关 ────────────────────────────────────────────────── */
/* 右上角一组（社媒 / 分隔条 / BGM）整体右移 57：原落点给最右侧的语言切换留了位置，
   语言切换下线后那块空着，右移后最右的 BGM 右边距 121 与左侧 logo 的 left 121 对齐，两侧留白一致 */
.nav-divider {
  right: 197px; top: 52px;
  width: 4px; height: 41px;
  opacity: .8;
  pointer-events: none;
}
.nav-bgm {
  right: 121px; top: 51px;
  width: 36px; height: 41px;
  filter: drop-shadow(0 2px 2px rgba(4, 0, 0, .25));
  transition: transform .25s ease, opacity .25s ease;
}
.nav-bgm:hover { transform: translateY(-2px); }
/* 开 / 关各用一张图（与手机版同一套做法），不再靠压暗区分；
   两张切图宽度不同，各按自己的尺寸在按钮里居中叠放 */
.nav-bgm__off { position: absolute; left: 0; top: 0; width: 36px; height: 41px; }
.nav-bgm__on  { position: absolute; left: 2px; top: 0; width: 32px; height: 41px; }
.nav-bgm .nav-bgm__on { display: none; }
.nav-bgm[aria-pressed="true"] .nav-bgm__off { display: none; }
.nav-bgm[aria-pressed="true"] .nav-bgm__on { display: block; }

/* ============================================================================
   宣传片播放浮层：固定在视口，不跟随页面缩放
   ========================================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
.video-modal__box { position: relative; width: 1120px; max-width: 82vw; }
.video-modal__player { width: 100%; display: block; background: #000; border-radius: 12px; }
.video-modal__close {
  position: absolute;
  right: -56px; top: -56px;
  width: 48px; height: 48px;
  font-size: 40px;
  line-height: 44px;
  color: #fff;
  opacity: .85;
}
.video-modal__close:hover { opacity: 1; }

/* ============================================================================
   交互动效
   页面调性是 Q 版动物 + 糖果色，所以动效走「轻快 + 微回弹」：
   元素滚进视口时按内容主次依次落位，常驻的角色装饰做慢速漂浮，
   点选类反馈保持已有的轻微放大。全部用 CSS 过渡与关键帧，不引第三方动画库。

   两条落地规则：
   1) 自身或 hover 已经占用 transform 的元素（斜排文字、箭头、分类标签、
      头像槽位等）只做淡入，避免两套 transform 互相覆盖；
   2) 初始态一律挂在 .js-anim 与 .sec:not(.is-in) 下 —— 脚本没跑起来时
      页面照常完整显示，不会白屏；进入视口后规则失配，元素自然回到设计坐标。
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.25, 1.18, .4, 1); /* 只留很浅的回弹，滚动中不显拖沓 */
  --anim-step: 55ms;
}

/* ── 入场：每个元素各自进入视野时浮现 ───────────────────────────────
   触发单位是**元素**不是整屏：整屏统一开关会让滚动中长时间没反应、到点又一起蹦出来。
   元素级触发天生对齐（元素在哪就什么时候播），滚动时一个接一个浮现，观感连贯。
   节奏 55ms 一档，位移幅度收在 40px 上下，避免"跳"。 */
.js-anim .anim-el {
  transition: opacity .5s var(--ease-out), transform .68s var(--ease-back);
  transition-delay: calc(var(--d, 0) * var(--anim-step));
}
/* will-change 只挂在「还没落位」的元素上：落位后撤掉，避免几十个常驻合成层拖累滚动 */
.js-anim .anim-el:not(.is-in) { opacity: 0; will-change: opacity, transform; }

/* 标题类：从上方落下 */
.js-anim .s1-title:not(.is-in),
.js-anim .s2-title:not(.is-in),
.js-anim .s3-title:not(.is-in),
.js-anim .s4-title:not(.is-in) { transform: translateY(-40px); }

/* 左侧内容：从左侧推入 */
.js-anim .hero-slogan:not(.is-in),
.js-anim .s1-char:not(.is-in),
.js-anim .s2-intro:not(.is-in),
.js-anim .s2-thumbs:not(.is-in),
.js-anim .s4-video:not(.is-in) { transform: translateX(-56px); }

/* 右侧内容：从右侧推入 */
.js-anim .s1-polaroid:not(.is-in),
.js-anim .s1-photo:not(.is-in),
.js-anim .s1-deco:not(.is-in),
.js-anim .s2-char:not(.is-in),
.js-anim .s2-name:not(.is-in),
/* 资讯条摆在白纸卡（.s4-deco）上，两者是一体的：同方向、同延时、同一个触发点
   （触发同步在 home_pc.js 的 ANIM_PAIRS 里做），信息与背景卡一起出现 */
.js-anim .s4-list:not(.is-in),
.js-anim .s4-deco:not(.is-in) { transform: translateX(56px); }

/* 底部承接类：从下方浮起 */
.js-anim .hero-btn--cta:not(.is-in),
.js-anim .s3-dots:not(.is-in),
.js-anim .s4-tab-pill:not(.is-in),
.js-anim .s5-links:not(.is-in),
.js-anim .s5-legal:not(.is-in),
.js-anim .s5-lilith:not(.is-in),
.js-anim .s5-badge:not(.is-in),
.js-anim .s5-rating:not(.is-in) { transform: translateY(40px); }

/* 已被自身 / hover 占用 transform 的：只淡入，不叠位移 */

/* ── 入场：同屏内的先后次序 ────────────────────────────────────────── */
/* 底部信息（条款链接 / 合规文案 / 发行方字标 / 资质 / 评级）整块同一档、同时从下方升起，
   不再分先后一个个冒出来（落位时机由 js/home_pc.js 的 ANIM_PAIRS 绑成一组） */
.js-anim .s1-title, .js-anim .s2-title,
.js-anim .s3-title, .js-anim .s4-title,
.js-anim .hero-slogan, .js-anim .s5-links,
.js-anim .s5-legal, .js-anim .s5-lilith,
.js-anim .s5-badge, .js-anim .s5-rating { --d: 0; }

.js-anim .hero-play, .js-anim .s1-char, .js-anim .s1-polaroid,
.js-anim .s2-char, .js-anim .s2-deco, .js-anim .s3-swiper,
.js-anim .s4-video, .js-anim .s4-deco, .js-anim .s4-list { --d: 1; }

.js-anim .hero-btn--cta, .js-anim .s1-photo, .js-anim .s2-intro,
.js-anim .s2-thumbs, .js-anim .s3-arrow, .js-anim .s4-play,
.js-anim .s4-tab-pill, .js-anim .s4-tab,
.js-anim .s4-more { --d: 2; }

.js-anim .s2-name, .js-anim .s2-paw,
.js-anim .s2-tri, .js-anim .s3-dots { --d: 3; }

.js-anim .s1-arrow, .js-anim .s1-deco { --d: 4; }

/* ── 常驻微动效：慢速漂浮 / 呼吸，给静态插画一点生气 ──────────────── */
@keyframes a2FloatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}
@keyframes a2Breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes a2Sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
.deco-boy  { animation: a2FloatY 5.6s ease-in-out infinite; }
.deco-girl { animation: a2FloatY 6.8s ease-in-out infinite .9s; }
.hero-play { animation: a2Breathe 2.8s ease-in-out infinite; }
.s2-paw    { animation: a2Sway 4.4s ease-in-out infinite; transform-origin: center center; }

/* ── 导航：当前项的胶囊底弹入 ──────────────────────────────────────── */
.nav-item__pill {
  transform: scale(.7);
  transition: opacity .26s var(--ease-out), transform .42s var(--ease-back);
}
.nav-item.is-active .nav-item__pill { transform: scale(1); }

/* ── 第 3 屏：换室友时右侧内容的转场 ──
   挂在整组容器上，组内三块保持互相遮挡，不会在半透明时穿帮 */
.sec .s2-detail.is-swapping {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .2s var(--ease-out), transform .28s var(--ease-out);
}

/* ── 第 5 屏：切分类后资讯条逐条淡入浮起 ──────────────────────────── */
@keyframes a2FadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.s4-row { animation: a2FadeUp .42s var(--ease-out) backwards; }
.s4-row--1 { animation-delay: 0ms; }
.s4-row--2 { animation-delay: 70ms; }
.s4-row--3 { animation-delay: 140ms; }
.s4-row--4 { animation-delay: 210ms; }

/* ── 无障碍：系统开启「减少动态效果」时全部关掉 ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .deco-boy, .deco-girl, .hero-play, .s2-paw, .s4-row { animation: none !important; }
  .js-anim .sec * { transition: none !important; }
}
/* 入场初始态由脚本兜底：开了「减少动态效果」时直接把所有区块标记为已落位，
   不能在这里用通配 opacity/transform 复位 —— 那会把第 4 屏里本该淡出的卡也一起点亮。 */

/* ============================================================================
   预约弹窗（Figma 43:2）—— 表单态 + 成功态
   卡片按设计 990×791 的画布 1:1 摆，整体缩放跟着页面走（--page-scale），
   两端共用同一套 DOM 与 class（见 m/index.html 与 css/home_mobile.css）。
   ========================================================================== */
.rsv {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 1 个设计 px：跟页面同一档缩放，两头夹住免得超宽屏过大、窄屏过小 */
  --rsv-u: calc(clamp(0.42, var(--page-scale, 1), 0.85) * 1px);
}
.rsv__mask { position: absolute; inset: 0; background: rgba(20, 8, 12, .62); }
.rsv__card {
  position: relative;
  width: calc(990 * var(--rsv-u));
  height: calc(791 * var(--rsv-u));
}
.rsv__card > * { position: absolute; }
/* 只有「按钮 / 链接里那张图」才撑满容器；卡片的直接子图（底板 / 烟花 / 标题 / 虚线）
   各有各的落位尺寸，别被这条通配压掉 */
.rsv__card button > img,
.rsv__card a > img,
.rsv__card .rsv__social > img { width: 100%; height: 100%; }
.rsv__fw    { left: calc(-179 * var(--rsv-u)); top: calc(-67 * var(--rsv-u)); width: calc(1324 * var(--rsv-u)); height: calc(906 * var(--rsv-u)); pointer-events: none; }
.rsv__bg    { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* 关闭按钮的图形烧在卡片底板里，这里只在它上面盖一块透明热区 */
.rsv__close { left: calc(866 * var(--rsv-u)); top: calc(6 * var(--rsv-u)); width: calc(70 * var(--rsv-u)); height: calc(70 * var(--rsv-u)); z-index: 3; }
.rsv__title { left: calc(311 * var(--rsv-u)); top: calc(59 * var(--rsv-u)); width: calc(368 * var(--rsv-u)); height: calc(91 * var(--rsv-u)); pointer-events: none; }

/* 平台多选：设计给了选中 / 未选中两枚圆点切图 */
.rsv__plats { left: 0; top: calc(199 * var(--rsv-u)); width: 100%; height: calc(48 * var(--rsv-u)); }
.rsv__plat {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rsv-u));
  font-size: calc(31.999 * var(--rsv-u));
  line-height: calc(47.998 * var(--rsv-u));
  color: #6b3f00;
  white-space: nowrap;
  cursor: pointer;
}
.rsv__plat--android { left: calc(153 * var(--rsv-u)); }
.rsv__plat--ios     { left: calc(445 * var(--rsv-u)); }
.rsv__plat--pc      { left: calc(669 * var(--rsv-u)); }
.rsv__plat-input, .rsv__agree-input { position: absolute; opacity: 0; width: 0; height: 0; }
.rsv__radio, .rsv__check {
  flex: none;
  width: calc(29 * var(--rsv-u));
  height: calc(28 * var(--rsv-u));
  background: url('../img/rsv/radio_off.webp') center / 100% 100% no-repeat;
}
.rsv__plat-input:checked + .rsv__radio,
.rsv__agree-input:checked + .rsv__check { background-image: url('../img/rsv/radio_on.webp'); }
.rsv__check { background-image: url('../img/rsv/check_off.webp'); }

/* 输入框：底纹是切图，输入框本身透明压在上面 */
.rsv__field { height: auto; }
.rsv__field--phone { left: calc(81 * var(--rsv-u)); top: calc(266 * var(--rsv-u)); width: calc(808 * var(--rsv-u)); height: calc(89 * var(--rsv-u)); }
.rsv__field--code  { left: calc(81 * var(--rsv-u)); top: calc(393 * var(--rsv-u)); width: calc(510 * var(--rsv-u)); height: calc(88 * var(--rsv-u)); }
.rsv__field-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.rsv__field input {
  position: absolute;
  left: calc(76 * var(--rsv-u));
  top: 0;
  width: calc(100% - 100 * var(--rsv-u));
  height: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: calc(31.999 * var(--rsv-u));
  color: #6b3f00;
  outline: none;
}
.rsv__field input::placeholder { color: #7b7b7b; }

.rsv__getcode { left: calc(628 * var(--rsv-u)); top: calc(391 * var(--rsv-u)); width: calc(260 * var(--rsv-u)); height: calc(88 * var(--rsv-u)); cursor: pointer; }
.rsv__getcode-text {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(31.999 * var(--rsv-u));
  color: #fff;
  white-space: nowrap;
}
.rsv__getcode[disabled] { cursor: default; filter: grayscale(.35) brightness(.95); }

.rsv__agree {
  left: calc(81 * var(--rsv-u)); top: calc(519 * var(--rsv-u));
  display: flex;
  align-items: center;
  gap: calc(18 * var(--rsv-u));
  font-size: calc(31.999 * var(--rsv-u));
  line-height: calc(47.998 * var(--rsv-u));
  color: #bba586;
  white-space: nowrap;
  cursor: pointer;
}
.rsv__submit { left: calc(227 * var(--rsv-u)); top: calc(625 * var(--rsv-u)); width: calc(514 * var(--rsv-u)); height: calc(94 * var(--rsv-u)); cursor: pointer; }
.rsv__submit img, .rsv__getcode img { transition: transform .2s ease; }
.rsv__submit:hover img, .rsv__getcode:not([disabled]):hover img { transform: translateY(-2px) scale(1.02); }

.rsv__tip {
  left: 0; top: calc(726 * var(--rsv-u));
  width: 100%;
  text-align: center;
  font-size: calc(24 * var(--rsv-u));
  line-height: calc(36 * var(--rsv-u));
  color: #e0557a;
}

/* ── 成功态 ─────────────────────────────────────────────────────────── */
.rsv__card--done .rsv__title { left: calc(310 * var(--rsv-u)); top: calc(94 * var(--rsv-u)); width: calc(369 * var(--rsv-u)); }
.rsv__note { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.rsv__note > * { position: absolute; }
/* 虚线切图比落位框宽，按设计的 object-cover 取中段 */
.rsv__dash { top: calc(299 * var(--rsv-u)); width: calc(138 * var(--rsv-u)); height: calc(8 * var(--rsv-u)); object-fit: cover; }
.rsv__dash--l { left: calc(110 * var(--rsv-u)); }
.rsv__dash--r { left: calc(720 * var(--rsv-u)); }
.rsv__note-1, .rsv__note-2 {
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(34.665 * var(--rsv-u));
  line-height: 1.2;
  letter-spacing: calc(-0.867 * var(--rsv-u));
  color: #888;
  white-space: nowrap;
}
.rsv__note-1 { top: calc(287 * var(--rsv-u)); }
.rsv__note-2 { top: calc(340 * var(--rsv-u)); }

.rsv__socials { left: 0; top: 0; width: 100%; height: 100%; }
.rsv__social { position: absolute; }
.rsv__social--xhs       { left: calc(204 * var(--rsv-u)); top: calc(490 * var(--rsv-u)); width: calc(196 * var(--rsv-u)); height: calc(70 * var(--rsv-u)); }
.rsv__social--tap       { left: calc(462 * var(--rsv-u)); top: calc(488 * var(--rsv-u)); width: calc(145 * var(--rsv-u)); height: calc(75 * var(--rsv-u)); }
.rsv__social--bilibili  { left: calc(676 * var(--rsv-u)); top: calc(484 * var(--rsv-u)); width: calc(87 * var(--rsv-u));  height: calc(79 * var(--rsv-u)); }
.rsv__social--wechat    { left: calc(106 * var(--rsv-u)); top: calc(599 * var(--rsv-u)); width: calc(98 * var(--rsv-u));  height: calc(82 * var(--rsv-u)); }
.rsv__social--qq        { left: calc(281 * var(--rsv-u)); top: calc(595 * var(--rsv-u)); width: calc(84 * var(--rsv-u));  height: calc(89 * var(--rsv-u)); }
.rsv__social--douyin    { left: calc(441 * var(--rsv-u)); top: calc(590 * var(--rsv-u)); width: calc(86 * var(--rsv-u));  height: calc(99 * var(--rsv-u)); }
.rsv__social--channel-x { left: calc(606 * var(--rsv-u)); top: calc(594 * var(--rsv-u)); width: calc(78 * var(--rsv-u));  height: calc(92 * var(--rsv-u)); }
.rsv__social--weibo     { left: calc(762 * var(--rsv-u)); top: calc(599 * var(--rsv-u)); width: calc(100 * var(--rsv-u)); height: calc(80 * var(--rsv-u)); }
.rsv__social img { transition: transform .2s ease; }
.rsv__social:hover img { transform: scale(1.08); }

/* ============================================================================
   触屏特效：点屏幕时在落点放一段星星爆开的逐帧动画
   整层不接收点击（pointer-events: none），压在最上面也不挡任何操作。
   ========================================================================== */
.tapfx {
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  pointer-events: none;
}
.tapfx__item {
  position: absolute;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px; /* 以落点为中心 */
  background-repeat: no-repeat;
  will-change: background-position, opacity;
}

/* ============================================================================
   加载页（Figma 50:92）：进站时盖住整屏，中间的小物件循环切换，
   「加载中…」的点持续跳动；页面资源加载完自动淡出。
   卡片按设计 336×336 的画布 1:1 摆，--ld-u 就是 1 个设计 px。
   ========================================================================== */
.loading {
  /* 1 个设计 px：跟页面同一档缩放，两头夹住免得超宽屏过大、窄屏过小 */
  --ld-u: calc(clamp(0.5, var(--page-scale, 1), 1) * 1px);
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fab6d6; /* 背景图解码完成前的兜底底色，取自背景图均值 */
  transition: opacity .45s ease, visibility .45s;
}
.loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loading__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.loading__card {
  position: relative;
  width: calc(336 * var(--ld-u));
  height: calc(336 * var(--ld-u));
}
.loading__card-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.loading__items { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 每个小物件的落位与尺寸都不同，按设计逐个摆；配置里多加的用居中兜底 */
.loading__item {
  position: absolute;
  left: 50%; top: 45%;
  width: calc(150 * var(--ld-u));
  height: calc(150 * var(--ld-u));
  margin: calc(-75 * var(--ld-u)) 0 0 calc(-75 * var(--ld-u));
  opacity: 0;
  transform: scale(.86);
  transition: opacity .22s ease, transform .28s cubic-bezier(.25, 1.18, .4, 1);
}
.loading__item.is-on { opacity: 1; transform: none; }
.loading__item img { width: 100%; height: 100%; }
.loading__item--1 { left: calc(84 * var(--ld-u)); top: calc(92 * var(--ld-u)); width: calc(167 * var(--ld-u)); height: calc(128 * var(--ld-u)); }
.loading__item--2 { left: calc(83 * var(--ld-u)); top: calc(88 * var(--ld-u)); width: calc(168 * var(--ld-u)); height: calc(132 * var(--ld-u)); }
.loading__item--3 { left: calc(87 * var(--ld-u)); top: calc(95 * var(--ld-u)); width: calc(160 * var(--ld-u)); height: calc(125 * var(--ld-u)); }
.loading__item--4 { left: calc(94 * var(--ld-u)); top: calc(68 * var(--ld-u)); width: calc(148 * var(--ld-u)); height: calc(152 * var(--ld-u)); }
.loading__item--5 { left: calc(103 * var(--ld-u)); top: calc(87 * var(--ld-u)); width: calc(129 * var(--ld-u)); height: calc(133 * var(--ld-u)); }
.loading__item--6 { left: calc(108 * var(--ld-u)); top: calc(127 * var(--ld-u)); width: calc(119 * var(--ld-u)); height: calc(93 * var(--ld-u)); }
.loading__item--7 { left: calc(91 * var(--ld-u)); top: calc(67 * var(--ld-u)); width: calc(153 * var(--ld-u)); height: calc(153 * var(--ld-u)); }
.loading__item--8 { left: calc(99 * var(--ld-u)); top: calc(69 * var(--ld-u)); width: calc(137 * var(--ld-u)); height: calc(151 * var(--ld-u)); }
.loading__item--9 { left: calc(90 * var(--ld-u)); top: calc(80 * var(--ld-u)); width: calc(155 * var(--ld-u)); height: calc(140 * var(--ld-u)); }
.loading__item--10 { left: calc(104 * var(--ld-u)); top: calc(71 * var(--ld-u)); width: calc(127 * var(--ld-u)); height: calc(149 * var(--ld-u)); }
.loading__item--11 { left: calc(100 * var(--ld-u)); top: calc(75 * var(--ld-u)); width: calc(135 * var(--ld-u)); height: calc(145 * var(--ld-u)); }
.loading__item--12 { left: calc(84 * var(--ld-u)); top: calc(112 * var(--ld-u)); width: calc(165 * var(--ld-u)); height: calc(108 * var(--ld-u)); }
.loading__item--13 { left: calc(96 * var(--ld-u)); top: calc(71 * var(--ld-u)); width: calc(143 * var(--ld-u)); height: calc(149 * var(--ld-u)); }
.loading__item--14 { left: calc(96 * var(--ld-u)); top: calc(80 * var(--ld-u)); width: calc(141 * var(--ld-u)); height: calc(140 * var(--ld-u)); }
.loading__item--15 { left: calc(95 * var(--ld-u)); top: calc(63 * var(--ld-u)); width: calc(144 * var(--ld-u)); height: calc(157 * var(--ld-u)); }
.loading__item--16 { left: calc(95 * var(--ld-u)); top: calc(80 * var(--ld-u)); width: calc(144 * var(--ld-u)); height: calc(140 * var(--ld-u)); }
.loading__item--1, .loading__item--2, .loading__item--3, .loading__item--4,
.loading__item--5, .loading__item--6, .loading__item--7, .loading__item--8,
.loading__item--9, .loading__item--10, .loading__item--11, .loading__item--12,
.loading__item--13, .loading__item--14, .loading__item--15, .loading__item--16 { margin: 0; }

.loading__label {
  position: absolute;
  left: calc(173 * var(--ld-u));
  top: calc(237 * var(--ld-u));
  transform: translateX(-50%);
  font-size: calc(33.333 * var(--ld-u));
  line-height: calc(56.741 * var(--ld-u));
  letter-spacing: calc(-1.667 * var(--ld-u));
  color: #f80ca3;
  white-space: nowrap;
}
/* 「…」持续跳动：三颗点依次亮起 */
@keyframes ldDot { 0%, 70%, 100% { opacity: .2; } 35% { opacity: 1; } }
.loading__dot { font-style: normal; animation: ldDot 1.2s ease-in-out infinite; }
.loading__dot:nth-of-type(2) { animation-delay: .18s; }
.loading__dot:nth-of-type(3) { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .loading__item { transition: none; }
  .loading__dot { animation: none; opacity: 1; }
}

/* ============================================================================
   按下反馈：可点的东西按下去要有回应
   原来只有悬浮态，鼠标按下那一刻元素纹丝不动，点击感很弱。
   统一往下压一档，按下用 90ms 快速收，松开走各自原本的时长。
   ========================================================================== */
.hero-play:active img { transform: scale(.94); transition-duration: .09s; }
.hero-btn:active img {
  transform: translateY(2px) scale(.965);
  filter: drop-shadow(0 2px 4px rgba(4, 0, 0, .3));
  transition-duration: .09s;
}
.s1-arrow:active { transform: scale(.88); transition-duration: .09s; }
.s3-arrow:active { transform: scale(.9); transition-duration: .09s; }
.s4-play:active  { transform: scale(.93); transition-duration: .09s; }
.s4-row:active   { transform: translateX(6px) scale(.985); transition-duration: .09s; }
.s4-tab:active   { transform: translateX(-50%) rotate(3.19deg) scale(.93); }
.s4-more:active  { transform: translateX(-50%) rotate(3.19deg) scale(.93); color: #d2a358; }
.s5-links a:active { opacity: .5; }
.s5-badge:active { opacity: .7; transform: scale(.95); }
.nav-logo:active { transform: scale(.94); transition-duration: .09s; }
/* 导航项：悬浮态的选择器更"重"，按下态得同等重量才压得住（鼠标按下时必然也在悬浮） */
.nav-item:not(.is-active):active .nav-item__icon,
.nav-item.is-active:active .nav-item__icon { transform: translateY(1px) scale(.88); transition-duration: .09s; }
.nav-item:not(.is-active):active .nav-item__label,
.nav-item.is-active:active .nav-item__label { transform: translateY(1px); transition-duration: .09s; }
.nav-social__item:active { transform: translateY(1px) scale(.88); transition-duration: .09s; }
.nav-bgm:active { transform: translateY(1px) scale(.9); transition-duration: .09s; }
.s2-thumb:not(.is-active):active img { transform: scale(.94); transition-duration: .09s; }
.rsv__submit:active img,
.rsv__getcode:not([disabled]):active img,
.rsv__social:active img { transform: scale(.9); transition-duration: .09s; }
.rsv__plat:active .rsv__radio,
.rsv__agree:active .rsv__check { transform: scale(.84); }

/* ── 加载页 → 页面的衔接 ─────────────────────────────────────────────
   加载页盖着时页面先不显形；它开始淡出的同时页面渐显，首屏内容随后落位，
   衔接成一段连贯的入场，而不是"帘子一撤，页面早就摆好在那了"。 */
#page-root, .tab-bar { transition: none; }
html.is-loading #page-root,
html.is-loading .tab-bar { opacity: 0; transition: none; }

/* ============================================================================
   加载页 → 页面的幕布过渡
   六条色块先自上而下铺满盖住屏幕（谢幕），加载页在幕后撤走，
   色块再依次滑出下方露出页面（开场）。动画一律线性，节奏才均匀。
   ========================================================================== */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 4100; /* 压在加载页之上，盖住的过程才看得见 */
  display: flex;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.curtain.is-running { visibility: visible; }
.curtain i {
  flex: 1 0 auto;
  width: calc(100% / 6 + 1px); /* 多 1px 压住分栏缝 */
  height: 100%;
  transform: translateY(-101%);
  transition: transform .17s linear;
}
.curtain.is-cover i { transform: translateY(0); }
.curtain.is-open i { transform: translateY(101%); }
.curtain i:nth-child(1) { background: #fea4bc; transition-delay: 0ms; }
.curtain i:nth-child(2) { background: #ffdd81; transition-delay: 35ms; }
.curtain i:nth-child(3) { background: #8adfe3; transition-delay: 70ms; }
.curtain i:nth-child(4) { background: #fcdeeb; transition-delay: 105ms; }
.curtain i:nth-child(5) { background: #ffc38d; transition-delay: 140ms; }
.curtain i:nth-child(6) { background: #a9e4d2; transition-delay: 175ms; }

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
}