@charset "utf-8";

/* ============================================================
 * 自定义字体 — Bebas Neue Pro Expanded Bold
 * 用于 S1-S3 大标题 + 介绍标题；不覆盖 zh-CN / zh-TW / th（字体包不含 CJK / 泰文字符，按需走默认 fallback）
 * ============================================================ */
@font-face {
    font-family: 'BebasNeueProExpanded';
    src: url('../font/bebas-neue-pro-expanded-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
 * Motion tokens — 全局动效节奏 / 缓动曲线（warline-motion-optimization）
 * ============================================================ */
:root {
    --motion-fast: 160ms;
    --motion-normal: 240ms;
    --motion-slow: 700ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
 * Layer 0 — 全局根 #page-root
 * 由 JS 在 resize/load 时设置 transform / width / height / 类名 / 两个 CSS 变量
 *   --pc-scale (始终为 1)
 *   --edge-gap (无缩放区 60px；缩放区 60/pageScale；超宽屏沿用 60px)
 * ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; cursor: pointer; }
html, body { height: 100%; overflow: hidden; background: #1e2423; font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif; }
img { display: block; max-width: 100%; }

#page-root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transform-origin: top left;
    background: #1e2423;
    /* 默认值，避免 JS 还没跑就用上 */
    --pc-scale: 1;
    --edge-gap: 60px;
}

/* ============================================================
 * Swiper 全屏铺满
 * ============================================================ */
.outerSwiper {
    width: 100%;
    height: 100%;
    transition: transform .6s ease;
    will-change: transform;
}
#page-root.is-footer-visible .outerSwiper {
    transform: translateY(-352px);
}
.outerSwiper .swiper-slide { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* ============================================================
 * Layer 1 — 背景层 .sX-bg-*
 * 默认 cover，跟随 page-root 整体缩放；超宽屏锁定 2560×1080 居中
 * ============================================================ */
.sX-bg-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

.s1-bg-l1 {
    background-image: url('../img/common/hero/hero-bg-base.webp');
    background-position: center center;
}
.s1-bg-l2 {
    object-fit: cover;
    object-position: center bottom;
    width: 100%;
    height: 100%;
}
.s1-bg-l3 {
    background-image: url('../img/common/hero/hero-bg-pattern.webp');
    background-position: center center;
}

/* S2 背景层 — 7 张角色背景叠加，通过 .is-active 切换显示 */
.s2-bg-stack {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #1e2423;
}
.s2-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0;
    pointer-events: none;
}
.s2-bg.is-active {
    opacity: 1;
}

/* 超宽屏 (vw > 2560) — 由 JS 在 page-root 上挂 .is-over-design
 * 之前这里把背景锁定为 2560×1080 居中，导致两侧出现空白。
 * 现在改为继续走 cover：背景图随 viewport 等比放大铺满，超宽屏不再露底。 */
#page-root.is-over-design .sX-bg-base,
#page-root.is-over-design .s2-bg,
#page-root.is-over-design .s3-bg,
#page-root.is-over-design .s4-bg {
    background-size: cover;
    background-attachment: scroll;
}

/* ============================================================
 * Layer 2 — header.tab-bar (随 page-root 整体缩放)
 * 视觉边距由 --edge-gap 控制 → 缩放区会被 JS 反向补偿
 * ============================================================ */
.tab-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 110px;
    z-index: 1000;
    padding: 0 var(--edge-gap, 60px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-bar-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 黑色渐变 60%→0% 从上到下；用 !important 覆盖 runtime-config 写入的 inline background-image */
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%) !important;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.tab-bar-logo {
    width: 290px;
    height: 65px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.tab-bar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tab-bar-right {
    display: flex;
    align-items: center;
    gap: 81.5px;
}

.lang-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    color: #f5f5f5;
    transition: color 0.16s ease;
}
/* lang-icon 改为 mask div，色取 currentColor，跟随 .lang-switch.color 一起 hover 变色 */
.lang-switch .lang-icon {
    display: block;
    width: 38px;
    height: 34px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url('../img/common/header/icon-lang.webp');
    mask-image: url('../img/common/header/icon-lang.webp');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.lang-switch .lang-label {
    display: none;
}
.lang-switch .lang-current {
    font-size: 27px;
    line-height: 1;
    color: inherit;
    white-space: nowrap;
}
.lang-switch:hover { color: #f2ff84; }

/* 语言切换下拉面板（参考 kangningxu-w3-web .lang-dropdown）：
 * 默认 visibility hidden + pointer-events none；.is-open 时背景+边框淡入；
 * 每项 opacity:0 translateY(20px) 起步，按 nth-child 错开 0.03s 延迟入场 */
.lang-box {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 280px;
    max-height: 420px;
    overflow-y: auto;
    background: rgba(5, 8, 6, 0);
    border: 1px solid rgba(255, 255, 255, 0);
    visibility: hidden;
    pointer-events: none;
    z-index: 1100;
    cursor: default;
    transition: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.lang-box.is-open {
    visibility: visible;
    pointer-events: auto;
    background: rgba(5, 8, 6, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    transition: background 0.3s ease, border-color 0.3s ease, visibility 0s 0s;
}
.lang-box .lang-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    font-size: 16px;
    color: #e0e0e0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Noto Sans SC', 'Inter', sans-serif;
    opacity: 0;
    transform: translateY(20px);
    transition: color 0.15s;
}
.lang-box .lang-item:last-child { border-bottom: none; }
.lang-box.is-open .lang-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
                color 0.15s;
}
.lang-box.is-open .lang-item:nth-child(1)  { transition-delay: 0.03s; }
.lang-box.is-open .lang-item:nth-child(2)  { transition-delay: 0.06s; }
.lang-box.is-open .lang-item:nth-child(3)  { transition-delay: 0.09s; }
.lang-box.is-open .lang-item:nth-child(4)  { transition-delay: 0.12s; }
.lang-box.is-open .lang-item:nth-child(5)  { transition-delay: 0.15s; }
.lang-box.is-open .lang-item:nth-child(6)  { transition-delay: 0.18s; }
.lang-box.is-open .lang-item:nth-child(7)  { transition-delay: 0.21s; }
.lang-box.is-open .lang-item:nth-child(8)  { transition-delay: 0.24s; }
.lang-box.is-open .lang-item:nth-child(9)  { transition-delay: 0.27s; }
.lang-box.is-open .lang-item:nth-child(10) { transition-delay: 0.30s; }
.lang-box.is-open .lang-item:nth-child(11) { transition-delay: 0.33s; }
.lang-box.is-open .lang-item:nth-child(12) { transition-delay: 0.36s; }
.lang-box.is-open .lang-item:nth-child(13) { transition-delay: 0.39s; }
.lang-box.is-open .lang-item:nth-child(14) { transition-delay: 0.42s; }
.lang-box .lang-item:hover { color: #c8d62e; }
.lang-box .lang-item.is-active { color: #c8d62e; font-weight: 600; }

.btn-store {
    width: 280.5px;
    height: 65px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.btn-store img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
 * Layer 3 — 视口锚定元素 (.swiper-slide 直属子级)
 * 以视口为基准，跟随 page-root 整体缩放
 * ============================================================ */
.s1-benefit-screen {
    position: absolute;
    right: var(--edge-gap, 60px);
    bottom: 78px;
    width: 214px;
    height: 214px;
    z-index: 20;
    display: block;
}
.s1-benefit-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.s1-cta {
    position: absolute;
    bottom: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: flex-end;
    gap: 11px;
}

.cta-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cta-col-store {
    width: 348px;
    position: relative;
    top: 4px;
    align-items: center;
}
/* 优惠胶囊：放在 store 按钮外（上方），胶囊底边 = 按钮顶边。
 * 高度统一锁到 zh_CN 在 348 宽下的渲染高度（≈62px），宽度按各 locale 切图原比例自适应，
 * 保证多语言胶囊视觉高度一致、无变形。 */
.cta-offer {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}
.cta-offer-img {
    display: block;
    width: auto;
    height: 62px;
    max-width: none;
}
.cta-store {
    width: 348px;
    height: 180px;
    display: block;
    position: relative;
    overflow: hidden;
    /* mask 用按钮素材自身的 alpha 通道：扫描伪元素被裁剪到按钮形状内，
     * 不会再溢出到 a 的矩形透明边角。参考 garena delta force nav_center_btn
     * 的 mask-image / mask 技巧。各 locale 的 cta-store.webp 形状一致（仅文字不同），
     * 写死 zh_CN 路径作为 mask 不影响其他 locale 视觉。 */
    -webkit-mask-image: url('../img/zh_CN/hero/cta-store.webp');
    mask-image: url('../img/zh_CN/hero/cta-store.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.cta-store img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 科技扫描循环高光：起点按钮右边框，终点按钮左边框，纯水平运动；
 * 整带宽度 = 按钮宽度，3 段渐变 80%-0%-0%（前亮拖尾）；
 * 色值 #f2ff84；2.15s 一圈，ease-in 加速曲线 */
.cta-store::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        90deg,
        rgba(242, 255, 132, 1)   0%,
        rgba(242, 255, 132, 0.6) 18%,
        rgba(242, 255, 132, 0.2) 38%,
        rgba(242, 255, 132, 0)   60%,
        rgba(242, 255, 132, 0)   100%
    );
    transform: translate(100%, 0);
    filter: blur(2px);
    mix-blend-mode: soft-light;
    /* 加速度在前 + 尾段缓速：cubic-bezier(0.2, 0.8, 0.2, 1)
     * 前段速度上升快，越靠近终点越慢；扫到终点后 keyframes 内静止段实现"底部停留" */
    animation: ctaStoreScanRTL 1.43s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
/* 以"色块最左侧 x"为基准：
 *   0%   色块最左 = 按钮右边框 x（color band 紧贴按钮右外侧，未入可视区）
 *   100% 色块最左 = 按钮左边框 x（color band 最左与按钮左缘对齐，整带横穿按钮）
 * 元素 right:0 + width:100% 时，translateX(0) 等价"色块左缘 = 按钮左缘"，
 * translateX(100%) 等价"色块左缘 = 按钮右缘"；无终点停留，扫到底立刻循环。 */
@keyframes ctaStoreScanRTL {
    0%   { transform: translate(100%, 0); }
    100% { transform: translate(0, 0); }
}

.cta-col-mobile {
    width: 256px;
    gap: 11px;
}
.cta-col-mobile a {
    width: 100%;
    height: 78px;
    display: block;
}
.cta-col-mobile a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cta-pc {
    width: 218px;
    height: 168px;
    display: block;
    flex-shrink: 0;
}
.cta-pc img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* hover 时把按钮"白色区域"染成 #f2ff84：用 mix-blend-mode: multiply 叠黄色覆盖层，
 * 白像素 × #f2ff84 = #f2ff84，黑像素 × #f2ff84 = 黑（保留底色）。
 * isolation: isolate 把 blend 限制在按钮自身堆叠上下文内，不污染外层背景。 */
.cta-appstore,
.cta-google,
.cta-pc {
    position: relative;
    isolation: isolate;
}
.cta-appstore::after,
.cta-google::after,
.cta-pc::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #f2ff84;
    mix-blend-mode: multiply;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
    /* 用按钮自身 alpha 作 mask，把黄色覆盖层裁到按钮真实轮廓，
     * 避免 <a> 256×78 / contain letterbox 区域露出"多余描边" */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.cta-appstore::after {
    -webkit-mask-image: url('../img/zh_CN/hero/cta-appstore.webp');
    mask-image: url('../img/zh_CN/hero/cta-appstore.webp');
}
.cta-google::after {
    -webkit-mask-image: url('../img/zh_CN/hero/cta-google.webp');
    mask-image: url('../img/zh_CN/hero/cta-google.webp');
}
.cta-pc::after {
    -webkit-mask-image: url('../img/zh_CN/hero/cta-pc.webp');
    mask-image: url('../img/zh_CN/hero/cta-pc.webp');
}
.cta-appstore:hover::after,
.cta-google:hover::after,
.cta-pc:hover::after { opacity: 1; }

/* ============================================================
 * Layer 4 — 设计画布层 .slide-canvas
 * 2560×1080，居中，scale(var(--pc-scale,1))；内部用 Figma 1:1 px 坐标
 * ============================================================ */
.slide-canvas {
    width: 2560px;
    height: 1080px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--pc-scale, 1));
    transform-origin: center center;
    z-index: 10;
    pointer-events: none;
}
.slide-canvas > * { pointer-events: auto; }

/* ----- S1 内画布元素 ----- */
.s1-slogan {
    position: absolute;
    left: 438px;
    top: 325px;
    width: 742px;
    height: 314px;
}
.s1-slogan img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
 * ----- S2 内画布元素 (角色轮播)
 *   设计画布坐标 (2560×1080)，1640px 内容容器（与 S3 一致）：
 *     content 横向边界 left:460 right:460（即 x ∈ [460, 2100]，宽 1640）
 *     - .s2-info     left:460  top:112.6  w:392
 *     - .s2-selector right:460 top:112.6  w:226.65（已移入 .slide-canvas，跟随画布缩放）
 * ============================================================ */
.s2-info {
    position: absolute;
    left: 460px;
    top: 112.6px;
    width: 392px;
    display: flex;
    flex-direction: column;
    gap: 69px;
    color: #fefefe;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
}

.s2-section-title {
    display: flex;
    align-items: flex-start;
    position: relative;
    height: 61px;
}
.s2-title-bar {
    width: 3.5px;
    height: 54.25px;
    margin-top: 6.9px;
    background: url('../img/common/character/ui/title-bar.svg') no-repeat center / contain;
    flex-shrink: 0;
}
.s2-title-text {
    margin-left: 19px;
    margin-top: 6.5px;
    font-size: 55px;
    font-weight: 700;
    color: #fefefe;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

.s2-detail {
    display: flex;
    flex-direction: column;
    gap: 19px;
    align-items: flex-start;
}
.s2-detail-head {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: flex-start;
}
.s2-character-name {
    font-size: 56px;
    font-weight: 700;
    color: #fefefe;
    line-height: 1;
    white-space: nowrap;
    margin: 0;
    text-shadow: 0 2px 4px rgba(63, 56, 43, 0.1);
}
.s2-detail-divider {
    width: 364.6px;
    height: 1.605px;
    background: url('../img/common/character/ui/divider.svg') no-repeat center / 100% 100%;
}

.s2-skill-list {
    display: flex;
    gap: 13px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.s2-skill-item {
    width: 82px;
    height: 82px;
    flex-shrink: 0;
}
.s2-skill-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.s2-character-desc {
    width: 375px;
    margin: 0;
    font-size: 17px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 100;
    text-align: left;
    text-wrap: pretty;
    hyphens: manual;
    -webkit-hyphens: manual;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    text-spacing-trim: space-all;
    hanging-punctuation: allow-end;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
}

/* ----- 右侧 角色选择（已移入 .slide-canvas，使用画布坐标，跟随 --pc-scale 缩放）
 *   水平：right:460px — 与 1640px 内容容器右边界对齐（与 .s2-info left:460 / S3 .s3-bottom 同口径）
 *   垂直：top:112.6px — 与 .s2-info / .s2-section-title 顶部对齐
 * ----- */
.s2-selector {
    position: absolute;
    right: 460px;
    top: 112.6px;
    width: 226.65px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 31px;
}

/* 箭头与轮播图（.s2-thumb-window 缩略图列）水平中线对齐：
 *   .s2-selector width 226.65、align-items:flex-end → thumb-window(210) 居右，
 *   其几何中心 = 226.65 - 210/2 = 121.65（选择器内 x 坐标）。
 *   箭头同样靠右贴齐选择器右边界，再用 margin-right:(210-40)/2=85px 把 40 宽箭头
 *   推到 thumb-window 正中央，箭头中心 = 226.65 - 85 - 20 = 121.65 ✓
 * 颜色用 mask + background-color 控制：默认白、:hover 荧光绿。
 * 素材文件实际是 SVG（仅扩展名 .png），mask-image 沿其 alpha 通道剪形。
 */
.s2-arrow {
    width: 40px;
    height: 30.49px;
    border: none;
    background-color: #FFFFFF;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-end;
    margin-right: 85px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform .15s ease, background-color .2s ease;
}
.s2-arrow:hover {
    transform: scale(1.08);
    background-color: #929944;
}
.s2-arrow:active {
    transform: scale(0.96);
}
.s2-arrow-up {
    -webkit-mask-image: url('../img/common/character/ui/arrow-up.svg');
    mask-image: url('../img/common/character/ui/arrow-up.svg');
}
.s2-arrow-down {
    -webkit-mask-image: url('../img/common/character/ui/arrow-down.svg');
    mask-image: url('../img/common/character/ui/arrow-down.svg');
}

/* 缩略图窗口：固定显示 4 项 (4*154 + 3*22 = 682px) */
.s2-thumb-window {
    width: 210px;
    height: 682px;
    overflow: hidden;
    position: relative;
}
.s2-thumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    transition: transform .35s ease;
}
.s2-thumb-item {
    position: relative;
    width: 210px;
    height: 154px;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    transition: filter .25s ease;
}
/* 未选中态：60% 黑色蒙版罩在卡片最上层（img + 名称都被压暗） */
.s2-thumb-item:not(.is-active)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 4;
}
.s2-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s2-thumb-name {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    pointer-events: none;
    z-index: 3;
}
.s2-thumb-item:hover:not(.is-active)::before {
    background: rgba(0, 0, 0, 0.4);
}
.s2-thumb-item.is-active {
    overflow: visible;
}
/* 视觉对齐：weapon-card-frame.webp 切图整体 536×347，实心金属边框 bbox 518×329，
 * 四边各有 9px 透明阴影外溢。让 ::after 比 item 大出 (536/518) 与 (347/329) 倍，
 * 实心边框正好贴合 .s2-thumb-item (210×154) 的可视边界。
 *   横向负 inset = 210 × (536-518)/518 / 2 ≈ 3.65px
 *   纵向负 inset = 154 × (347-329)/329 / 2 ≈ 4.21px
 */
.s2-thumb-item.is-active::after {
    content: '';
    position: absolute;
    top: -4.21px;
    right: -3.65px;
    bottom: -4.21px;
    left: -3.65px;
    background: url('../img/common/character/ui/weapon-card-frame.webp') no-repeat center / 100% 100%;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 6px rgba(0, 0, 0, 0.55));
}

/* ============================================================
 * ----- S3 内画布元素 (军备武器轮播)
 *   设计画布坐标 (2560×1080)：
 *     - .s3-section-title  left:457 top:112.6   (与 S2 标题一致)
 *     - .s3-bottom         bottom:60 居中       (军备名 + 卡片轮播)
 *     - 卡片单张：默认 260×165；选中 268×173.5；gap 22px
 * ============================================================ */
.s3-bg-stack {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #1e2423;
}
.s3-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.s3-bg.is-active {
    opacity: 1;
}

.s3-section-title {
    position: absolute;
    left: 457px;
    top: 112.6px;
    display: flex;
    align-items: flex-start;
    height: 61px;
    z-index: 5;
}
.s3-title-bar {
    width: 3.5px;
    height: 54.25px;
    margin-top: 6.9px;
    background: url('../img/common/character/ui/title-bar.svg') no-repeat center / contain;
    flex-shrink: 0;
}
.s3-title-text {
    margin-left: 19px;
    margin-top: 6.5px;
    font-size: 55px;
    font-weight: 700;
    color: #fefefe;
    line-height: 1;
    white-space: nowrap;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    text-transform: uppercase;
}

/* Figma: 容器 absolute bottom-60 left-1/2 -translate-x-1/2 w-2560 px-460 flex-col gap-77 items-start
 *   → 我们的 .slide-canvas 同样是 2560 宽，所以等价于 left:460 right:460 padding=0 */
.s3-bottom {
    position: absolute;
    left: 460px;
    right: 460px;
    bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 77px;
    z-index: 5;
    color: #fefefe;
    font-family: 'Inter', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
    pointer-events: none;
}
.s3-bottom > * { pointer-events: auto; }

/* 容器宽度按内容自适应到 .s3-bottom 内宽 (max-width 100%)，
 * 让多语言长名（俄/德/葡/土）双行完整显示，不省略不裁切。
 * 字体栈把 Noto Sans SC 提到 JP 前面：父级 .s3-bottom 的栈是 JP-first，
 * 简中"复仇者/轻型坦克"等汉字会回退到日文字形（细节笔画与简体差异），
 * 视觉上像"变形"；这里覆盖为 SC-first 让汉字走简中字形。 */
.s3-weapon-name {
    margin: 0;
    width: max-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    top: 0;
    color: #ffffff;
    font-weight: 700;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    text-shadow: 0 2px 4px rgba(63, 56, 43, 0.1);
    transition: opacity .25s ease;
}
.s3-weapon-desc {
    display: block;
    font-size: 60px;
    line-height: 1;
    white-space: nowrap;
}
.s3-weapon-type {
    display: block;
    font-size: 60px;
    line-height: 1;
    white-space: nowrap;
}
.s3-weapon-desc:empty,
.s3-weapon-type:empty { display: none; }

/* 无人机（X-47B / MQ-28）介绍标题整体上移 490px，其他武器位置不变；
   position:relative + top 避免影响 .s3-bottom 流式布局，也不会与 slideIn 动画的 translateX 冲突 */
.s3-weapon-name[data-weapon-key="weapon_05"],
.s3-weapon-name[data-weapon-key="weapon_06"] {
    top: -330px;
}

/* arrow ↔ card-window ↔ arrow，arrow 贴 .s3-bottom 左右边缘（≈ canvas x=460 / x=2100） */
.s3-carousel-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 箭头资源是未旋转的"上/下"三角（arrow-up.png / arrow-down.svg 原始 40×30.49）。
 * 盒子按原始尺寸来，mask 在 layout 阶段铺满；transform: rotate(-90deg) 仅作用视觉，
 * 旋转后视觉尺寸自然变成 30.49w × 40h（且不会被裁）。 */
.s3-arrow {
    width: 40px;
    height: 30.49px;
    border: none;
    background-color: #FFFFFF;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform .15s ease, background-color .2s ease;
}
.s3-arrow:hover { background-color: #929944; }
.s3-arrow-left {
    -webkit-mask-image: url('../img/common/character/ui/arrow-up.svg');
    mask-image: url('../img/common/character/ui/arrow-up.svg');
    transform: rotate(-90deg);
}
.s3-arrow-left:hover  { transform: rotate(-90deg) scale(1.08); }
.s3-arrow-left:active { transform: rotate(-90deg) scale(0.96); }
.s3-arrow-right {
    -webkit-mask-image: url('../img/common/character/ui/arrow-down.svg');
    mask-image: url('../img/common/character/ui/arrow-down.svg');
    transform: rotate(-90deg);
}
.s3-arrow-right:hover  { transform: rotate(-90deg) scale(1.08); }
.s3-arrow-right:active { transform: rotate(-90deg) scale(0.96); }

/* 5 卡可视窗口（与 S2 .s2-thumb-window 同款逻辑，横向版）：
 *   width = 5 * 260 + 4 * 22 = 1388px；6 件武器中第 6 张藏在右侧，靠 active=4/5 时
 *   .s3-card-list translateX(-282px) 一格滑入 */
.s3-card-window {
    width: 1388px;
    height: 165px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.s3-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 22px;
    align-items: center;
    transition: transform .35s ease;
}
.s3-card-item {
    position: relative;
    width: 260px;
    height: 165px;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    transition: filter .25s ease, width .25s ease, height .25s ease;
}
/* 未选中态：60% 黑色蒙版罩在卡片最上层（img + 名称都被压暗） */
.s3-card-item:not(.is-active)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 4;
}
.s3-card-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s3-card-name {
    /* 名称严格保持在卡片图宽度内：left/right:0 撑满卡片宽，padding 防贴边，
     * white-space + overflow + text-overflow 单行省略号；多语言长名（如德/俄/葡）超长会末尾"..."截断 */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    pointer-events: none;
    z-index: 3;
}
.s3-card-item:hover:not(.is-active)::before {
    background: rgba(0, 0, 0, 0.4);
}
.s3-card-item.is-active {
    overflow: visible;
}
/* 选中态边框：复用 S2 的 weapon-card-frame.webp（210×154 切图带 9px 透明阴影外溢，
 * 对 260×165 的卡片按比例外扩 inset：横向 ≈ 4.52px，纵向 ≈ 4.51px）。
 */
.s3-card-item.is-active::after {
    content: '';
    position: absolute;
    top: -4.51px;
    right: -4.52px;
    bottom: -4.51px;
    left: -4.52px;
    background: url('../img/common/character/ui/weapon-card-frame.webp') no-repeat center / 100% 100%;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 6px rgba(0, 0, 0, 0.55));
}

/* ============================================================
 * ----- S4 内画布元素 (游戏特色 4 张轮播 / 可视 3 张)
 *   设计画布坐标 (2560×1080)：
 *     - .s4-section-title  left:457 top:112.6   (与 S2/S3 标题同款)
 *     - 卡片单张：394 × 760，gap 65px；3 可视 → 窗口 3*394 + 2*65 = 1312px
 *     - .s4-stage 居中放置；.s4-arrow 51.215 × 67.175 在 stage 左右
 *     - .s4-progress 居中底部 progress bar
 * ============================================================ */
.s4-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #1e2423;
}

.s4-section-title {
    position: absolute;
    left: 457px;
    top: 112.6px;
    display: flex;
    align-items: flex-start;
    height: 61px;
    z-index: 5;
}
.s4-title-bar {
    width: 3.5px;
    height: 54.25px;
    margin-top: 6.9px;
    background: url('../img/common/character/ui/title-bar.svg') no-repeat center / contain;
    flex-shrink: 0;
}
.s4-title-text {
    margin-left: 19px;
    margin-top: 6.5px;
    font-size: 55px;
    font-weight: 700;
    color: #fefefe;
    line-height: 1;
    white-space: nowrap;
    font-family: 'Inter', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
    text-transform: uppercase;
}

/* Figma 卡片组：left:624 top:212；stage 维持 figma 原稿尺寸 760 */
.s4-stage {
    position: absolute;
    left: 460px;
    right: 460px;
    top: 212px;
    height: 760px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
}
/* 滑轨模式：window 1312px (3 cards visible)；list 是 flex 横轨，DOM 6 个 li
 *   = [clone-of-item3, item0, item1, item2, item3, clone-of-item0]
 * trackPos = 当前居中 li 在 6 节点里的索引（1..4 对应真实 item0..3；0、5 是克隆）。
 * translateX = -(trackPos - 1) * 459px；到达 0 / 5 克隆位时 transitionend 做无动画 snap。
 */
.s4-card-window {
    width: 1312px;
    height: 760px;
    position: relative;
    flex-shrink: 0;
    margin: 0 auto;
    overflow: hidden;
}
.s4-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 65px;
    transition: transform .4s ease;
    will-change: transform;
}
.s4-card-list.no-anim { transition: none; }
/* snap 期间连带禁用 ::after 的遮罩过渡，避免 is-pos 重排时遮罩慢淡入淡出造成"闪烁" */
.s4-card-list.no-anim .s4-card-item::after { transition: none; }
.s4-card-item {
    position: relative;
    width: 394px;
    height: 760px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1;
    transition: filter .25s ease;
}
.s4-card-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 黑色渐变蒙层：左右卡外侧 60% → 内侧（靠中间）0%；中心卡蒙层 opacity 0 */
.s4-card-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    opacity: 1;
    z-index: 2;
    transition: background .3s ease, opacity .3s ease;
}
.s4-card-item.is-pos-left::after,
.s4-card-item.is-pos-right::after {
    background: rgba(0, 0, 0, 0.6);
}
.s4-card-item.is-pos-center {
    z-index: 3;
}
.s4-card-item.is-pos-center::after { opacity: 0; }

/* 箭头：Figma 51.215 × 67.175 PNG（含 alpha），用 mask + bg-color 实现 hover 上色 */
.s4-arrow {
    width: 51.215px;
    height: 67.175px;
    border: none;
    background-color: #FFFFFF;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform .15s ease, background-color .2s ease;
}
.s4-arrow:hover { background-color: #929944; transform: scale(1.08); }
.s4-arrow:active { transform: scale(0.96); }
.s4-arrow-left {
    -webkit-mask-image: url('../img/common/s4/arrow-selected.svg');
    mask-image: url('../img/common/s4/arrow-selected.svg');
}
.s4-arrow-right {
    -webkit-mask-image: url('../img/common/s4/arrow-default.svg');
    mask-image: url('../img/common/s4/arrow-default.svg');
}

/* 当前条 progress bar — Figma 156.7 × 3.85 居中底部
 * 4 张 → 全宽 156.7px，每张占 156.7/4 = 39.175px */
/* 4-dot 进度指示器：参考 kangningxu-w3-web m-s4-dots，宽形胶囊，active 加宽 + 高亮色 */
.s4-progress {
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}
.s4-dot {
    display: block;
    height: 4px;
    width: 28px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.4);
    transition: width 0.25s ease, background 0.25s ease;
}
.s4-dot.is-active {
    width: 56px;
    background: #c8d62e;
}

/* ============================================================
 * 页脚 overlay（参考 lilith pgame footer 交互模式）
 *   - 不是独立 swiper-slide，而是紧贴 swiper 内容下沿的 absolute 段
 *   - 默认 top:100% → 自然落在 page-root 视口下方（被 overflow:hidden 裁掉）
 *   - 触发态由 #page-root.is-footer-visible 同时给 .outerSwiper 与本元素
 *     translateY(-352px)：S4 整屏向上让位 352px，页脚作为"贴在 S4 内容
 *     底部"的一段一并上移、从底部浮出。这就是 lilith 那条
 *     `pc_home_main { margin-top:-574px }` 把 main 上拉露出尾部 footer 的模式
 *   - 展开态上滑：先去掉 .is-footer-visible 收回，再让 swiper 回 S3
 * ============================================================ */
.site-footer-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 352px;
    z-index: 500;
    background: #141414;
    transition: transform .6s ease;
    will-change: transform;
    pointer-events: none;
}
#page-root.is-footer-visible .site-footer-overlay {
    transform: translateY(-352px);
    pointer-events: auto;
}
.site-footer {
    /* 内容整体 scale(0.7)；容器仍占 352px，logo + 文案视觉等比缩小到 70% */
    background: #141414;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    color: #ffffff;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    text-align: center;
    width: 100%;
    height: 100%;
    transform: scale(0.7);
    transform-origin: center center;
}
.site-footer-logo {
    width: 339px;
    /* 去除高度限制，按图片原始比例自适应展示；尺寸为原 357px 缩小 5% */
}
.site-footer-logo img {
    width: 100%;
    height: auto;
    display: block;
}
.site-footer-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.site-footer-links {
    margin: 0;
    font-size: 28px;
    line-height: 46px;
    font-weight: 700;
    color: #ffffff;
}
.site-footer-link {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity .15s ease;
}
.site-footer-link:hover { opacity: 0.75; }
.site-footer-sep {
    margin: 0 0.4em;
    color: #ffffff;
    text-decoration: none;
}
.site-footer-copyright {
    margin: 0;
    font-size: 28px;
    line-height: 46px;
    font-weight: 700;
    color: #ffffff;
    white-space: pre-line; /* 保留 config 里的 \n 作为换行 */
}

/* ============================================================
 * 公测福利弹框 .benefit-modal
 *   - 触发：.s1-benefit-screen 点击 → JS 添加 .is-open
 *   - 遮罩：80% 黑（rgba(0,0,0,0.8)）覆盖全屏
 *   - 居中卡片，宽度自适应（按 modal 切图原比例渲染）
 *   - 关闭：右上 × 按钮 / 遮罩点击 / ESC 键
 * ============================================================ */
.benefit-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.benefit-modal[hidden] { display: none; }
.benefit-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, visibility 0s linear 0s;
}
.benefit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}
/* 设计稿尺寸 (Figma 10450-2)：panel 1114×785；内容块 left:125 top:66 w:864；
   内部垂直堆叠 gap 68：title40 → subtitle26 → 3 张 256×205.333 卡片 gap48 → 按钮 240×103 文字32 */
.benefit-modal-panel {
    position: relative;
    z-index: 1;
    width: 1114px;
    height: 785px;
    max-width: 92vw;
    max-height: 92vh;
    background: url('../img/common/benefit-modal/modal-bg.webp') center / 100% 100% no-repeat;
    transform: scale(0.92);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.benefit-modal.is-open .benefit-modal-panel { transform: scale(1); }

.benefit-modal-content {
    position: absolute;
    left: 125px;
    top: 66px;
    width: 864px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 68px;
}
.benefit-modal-title {
    margin: 0;
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}
.benefit-modal-subtitle {
    margin: 0;
    color: #ffffff;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    white-space: nowrap;
}

.benefit-modal-rewards {
    display: flex;
    gap: 48px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: center;
}
.benefit-modal-reward {
    width: 256px;
    height: 205.333px;
    background: #6b6b6b;
    overflow: hidden;
    flex-shrink: 0;
}
.benefit-modal-reward img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benefit-modal-cta {
    /* btn-download.webp 原生 260×77；整图作为背景 100%×100% 铺满，保证 chevron / 下划线完整不被裁切 */
    min-width: 320px;
    height: 108px;
    padding: 0 120px;
    box-sizing: border-box;
    border: 0;
    background-color: #283820;
    background-image: url('../img/common/benefit-modal/btn-download.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
    flex-shrink: 0;
}
.benefit-modal-cta:hover { transform: scale(1.04); filter: brightness(1.08); }
.benefit-modal-cta-label {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}

/* × 图标已烧在 modal-bg.webp 右上角，按钮做透明热区盖在 × 上即可 */
.benefit-modal-close {
    position: absolute;
    top: 62px;
    right: 67px;
    width: 50px;
    height: 50px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: opacity .15s ease;
}
.benefit-modal-close:hover { opacity: 0.7; }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* ============================================================
 * CTA 反馈（hover scale + edge glow，active press）— warline brief Task 3
 *   主 CTA = .cta-store；次级 = 平台按钮 / PC 下载 / Store 按钮
 *   仅 transform / filter，不改 layout
 * ============================================================ */
.cta-store,
.cta-pc,
.cta-col-mobile a,
.btn-store,
.s1-benefit-screen {
    transition: transform var(--motion-fast) var(--ease-out),
                filter var(--motion-fast) var(--ease-out);
    will-change: transform;
}
.cta-store:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 0 16px rgba(242, 255, 132, 0.45))
            drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
.cta-store:active { transform: scale(0.98); }

.cta-pc:hover,
.cta-col-mobile a:hover {
    transform: scale(1.02);
    filter: brightness(1.08);
}
.cta-pc:active,
.cta-col-mobile a:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}
.btn-store:hover,
.btn-store:active {
    transform: none;
    filter: none;
}
.s1-benefit-screen:hover { transform: scale(1.05); filter: brightness(1.08); }
.s1-benefit-screen:active { transform: scale(0.96); }

/* 头部 logo / 语言按钮 hover */
.tab-bar-logo,
.lang-switch {
    transition: filter var(--motion-fast) var(--ease-out),
                opacity var(--motion-fast) var(--ease-out);
}
.tab-bar-logo:hover { filter: brightness(1.12); }
/* lang-switch hover 颜色由更上方的 .lang-switch:hover { color: #f2ff84 } 统一控制，
 * icon (mask + bg currentColor) 与 .lang-current (color: inherit) 一起跟随 */

/* ============================================================
 * 首屏 staged entrance — warline brief Task 1
 *   .section1.is-entered 依次淡入背景 / 标语 / CTA / 平台按钮
 *   .section1.has-played 表示已播过一次（locale-change 重渲不再播）
 * ============================================================ */
.outerSwiper .section1.is-entering .s1-bg-l1,
.outerSwiper .section1.is-entering .s1-bg-l2,
.outerSwiper .section1.is-entering .s1-bg-l3 {
    animation: s1BgZoom 1100ms var(--ease-out) both;
}
.outerSwiper .section1.is-entering .s1-slogan {
    animation: s1FadeUp 700ms var(--ease-out) 200ms both;
}
.outerSwiper .section1.is-entering .cta-offer {
    animation: s1FadeUpCentered 600ms var(--ease-out) 420ms both;
}
.outerSwiper .section1.is-entering .cta-store {
    animation: s1FadeUp 600ms var(--ease-out) 420ms both;
}
.outerSwiper .section1.is-entering .cta-col-mobile a:nth-of-type(1) {
    animation: s1FadeUp 500ms var(--ease-out) 500ms both;
}
.outerSwiper .section1.is-entering .cta-col-mobile a:nth-of-type(2) {
    animation: s1FadeUp 500ms var(--ease-out) 600ms both;
}
.outerSwiper .section1.is-entering .cta-pc {
    animation: s1FadeUp 500ms var(--ease-out) 700ms both;
}
.outerSwiper .section1.is-entering .s1-benefit-screen {
    animation: s1FadeUp 500ms var(--ease-out) 760ms both;
}
@keyframes s1BgZoom {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes s1FadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 与 s1FadeUp 同款，但保留 translateX(-50%)，给 .cta-offer 这类自身已水平居中的元素用，
 * 避免动画期间 transform 被覆盖导致元素先跳到 left:50% 起点再回位。 */
@keyframes s1FadeUpCentered {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
 * 轮播方向感（officer / weapon / feature）— warline brief Task 7/8/9
 *   方向类由 JS 在切换瞬间挂在 .swiper-slide 上，动画结束后移除
 * ============================================================ */
.section2.is-anim-next .s2-character-name,
.section2.is-anim-next .s2-character-desc { animation: slideInRight 320ms var(--ease-out) both; }
.section2.is-anim-prev .s2-character-name,
.section2.is-anim-prev .s2-character-desc { animation: slideInLeft 320ms var(--ease-out) both; }
.section2.is-anim-next .s2-skill-list { animation: fadeUp 320ms var(--ease-out) 80ms both; }
.section2.is-anim-prev .s2-skill-list { animation: fadeUp 320ms var(--ease-out) 80ms both; }

.section3.is-anim-next .s3-weapon-name { animation: slideInRight 320ms var(--ease-out) both; }
.section3.is-anim-prev .s3-weapon-name { animation: slideInLeft 320ms var(--ease-out) both; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ============================================================
 * Reduced motion — 全局退化
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .cta-store::after { animation: none !important; }
}

/* ============================================================
 * S2-S4 大标题 + 介绍标题：使用 Bebas Neue Pro Expanded Bold
 * 排除 zh-CN / zh-TW / th 三种语言（字体包不含 CJK / 泰文，会触发缺字回退）
 * runtime-config.js 在切换语言时把 document.documentElement.lang 设为带短横线的 locale（zh-CN / zh-TW / th 等）
 * 注意：.s3-title-text / .s4-title-text 本体声明了 font-family，必须直接覆盖它们（不能只覆盖父级）
 * ============================================================ */
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .s2-title-text,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .s2-character-name,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .s3-title-text,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .s3-weapon-name,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .s3-weapon-desc,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .s3-weapon-type,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .s4-title-text,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .benefit-modal-title,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .benefit-modal-subtitle,
html:not([lang="zh-CN"]):not([lang="zh-TW"]):not([lang="th"]) .benefit-modal-cta-label {
    font-family: 'BebasNeueProExpanded', 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
}

/* 非中文（简/繁）下，武器介绍标题（desc + type）改为同一行展示，
 * 中文（简/繁）维持原先的双行堆叠（desc 在上、type 在下）。 */
html:not([lang="zh-CN"]):not([lang="zh-TW"]) .s3-weapon-name {
    flex-direction: row;
    align-items: baseline;
    gap: 24px;
    flex-wrap: nowrap;
}

/* 首屏苹果下载 / PC 下载（当前阶段未开放）
 * 注意：filter 只作用在按钮 img 上，不要套在 .download-btn 上——
 * 否则 .coming-soon-badge 也会被 grayscale 拖掉荧光绿。 */
.download-btn.is-coming-soon {
    position: relative;
    opacity: 1;
    cursor: default;
    overflow: hidden;
    /* 抑制继承自 .cta-col-mobile a / .cta-pc 的 transform/filter transition + will-change，
     * 避免 hover 触发空过渡导致按钮"抖一下" */
    transition: none;
    will-change: auto;
}
.download-btn.is-coming-soon > img {
    transition: none;
}
.download-btn.is-coming-soon > img {
    filter: grayscale(1) brightness(0.6);
    position: relative;
    z-index: 0;
}
.download-btn.is-coming-soon:hover > img,
.download-btn.is-coming-soon:active > img {
    filter: grayscale(1) brightness(0.6);
}

/* 未开放按钮：禁用 hover/active 放大 / 发光（保留蒙版 + 角标 hover 提示） */
.download-btn.is-coming-soon:hover,
.download-btn.is-coming-soon:active {
    transform: none;
    filter: none;
}
.download-btn.is-coming-soon:hover::after,
.download-btn.is-coming-soon:active::after {
    opacity: 0;
}

/* 默认：中性灰 + 斜纹覆盖层（线宽 6px、间隔 6px，周期 12px）
 * hover：底色叠加为 60% 黑色蒙版，斜纹保留 */
.download-btn.is-coming-soon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(40, 40, 40, 0.5);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.020) 0,
        rgba(255, 255, 255, 0.020) 6px,
        transparent 6px,
        transparent 12px
    );
    transition: none;
    pointer-events: none;
}
.download-btn.is-coming-soon:hover::before {
    background-color: rgba(0, 0, 0, 0.6);
}

/* 未开放下载按钮角标：纯文本胶囊，hover 才显示。
 * 支付 Store 按钮已开放，不再共用该提示。 */
.download-btn.is-coming-soon .coming-soon-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1.25;
    background: transparent;
    width: max-content;
    max-width: 98%;
    z-index: 3;
    pointer-events: none;
    filter: none;
    opacity: 0;
    transition: none;
}
.download-btn.is-coming-soon:hover .coming-soon-badge {
    opacity: 1;
}
.download-btn.is-coming-soon .coming-soon-text {
    display: inline-block;
    padding: 6px 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #f2ff84;
    background: rgba(7, 14, 10, 0.92);
    border: 1px solid #f2ff84;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-align: center;
}
/* 中文 / 繁体强制一行（文案短，绝不允许在「，」处折行） */
:lang(zh) .download-btn.is-coming-soon .coming-soon-text {
    white-space: nowrap;
}

.coming-soon-tip {
    background: rgba(7, 12, 10, 0.88);
    border: 1px solid rgba(242, 255, 132, 0.8);
    color: #f3ffd0;
    padding: 8px 12px;
    font-size: 13px;
    box-shadow: 0 0 18px rgba(242, 255, 132, 0.16);
}

.btn-store {
    position: relative;
    overflow: hidden;
}