@import "variables-pc.css";
@import "nav-bg-black.css";
@import "scrollbar-dark.css";

/* ==========================================================================
   downloadV2 - 下载页 V2（深色主题，与 indexV2 保持一致）
   涵盖 downloadV2.html 及其 include 片段
   （pages-navigation / brand-list / contact-information / pages-footer）
   中出现的所有 class；继承 base.css 的部分以空占位形式列出，便于覆盖。
   ========================================================================== */

.content-wrapper {
    background-image: linear-gradient(90deg, rgba(8, 22, 48, 0.00) 0%, rgba(10, 20, 48, 0.24) 26%, rgba(21, 13, 50, 0.30) 50%, rgba(65, 27, 24, 0.24) 77%, rgba(72, 29, 19, 0.00) 100%), linear-gradient(180deg, #01040A 0%, #131422 100%);
    position: relative;
    /* 纵向 flex + 最小视口高度：内容不足一屏时
       让 .last-section 始终吸附在页面最底部（见下方 .last-section） */
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

/* ---------- 顶部导航（face/desktop/pages-navigation.html） ---------- */
.navigator, .navigator .title, .menu-item {
    color: var(--color-text-inverse);
}

.navigator .menu .download-link {
    border-bottom: 2px #FF6F08 solid;
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.lang-btn {
    border: 1px solid #FFFFFF;
}

.lang-btn.active {
    background-color: #FFFFFF;
    color: #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.download-bg-wrapper {
    position: absolute;
    width: 100%;
    height: 75.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

.download-bg-wrapper:before {
    content: "";
    position: absolute;
    z-index: 8;
    width: 5rem;
    height: 29.13rem;
    background: #FFEADA;
    filter: blur(3rem);
    top: 19rem;
}

img.download-bg {
    max-height: 92%;
    width: 100%;
    filter: blur(1rem);
    opacity: 0; /* 动画开始前隐藏，避免首帧闪现 */
    animation: download-bg-enter 1.6s var(--ease-out) forwards,
    download-bg-float 16s ease-in-out 1.6s infinite alternate;
}

/* ---------- 背景光晕（bg.svg 蝶形光斑）出场效果 ---------- */

/* 入场：淡入 + 轻微放大，随页面一同出现 */
@keyframes download-bg-enter {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 入场后缓慢漂浮/呼吸，呼应“蝶”的意象；alternate 往复，无跳变 */
@keyframes download-bg-float {
    from {
        transform: scale(1) translate(0, 0);
    }
    to {
        transform: scale(1.04) translate(-1.5rem, 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    img.download-bg {
        opacity: 1;
        animation: none;
    }
}


/* ---------- 页面根容器 ---------- */
.download-v2 {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;
}

/* ---------- 首屏 Hero ---------- */
.download-hero {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 3.5rem;
}

.download-hero-brand {
    margin: var(--spacing-12) 0 0;
    font-size: 1.75rem;
    font-weight: var(--font-weight-medium);
    color: #7BCAFF;
    text-align: center;
    letter-spacing: var(--letter-spacing-wide);
}

.download-hero-content {
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
}

h1.download-hero-title {
    margin: var(--spacing-14) 0 0;
    font-size: 4.25rem;
    line-height: var(--line-height-tight);
    text-align: center;
    color: transparent;
    background-image: linear-gradient(90deg, #FFFFFF 12%, #2BAAFF 57%, #FFFFFF 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    position: relative;
}

h2.download-hero-subtitle {
    margin: var(--spacing-4) 0 0;
    font-size: 3rem;
    font-weight: var(--font-weight-medium);
    text-align: center;
    color: #FFFFFF;
}

h4.download-hero-tagline {
    margin: var(--spacing-5) 0 0;
    font-size: 1.5rem;
    font-weight: var(--font-weight-normal);
    text-align: center;
    color: #E7E6FF;
}

/* 注册成功提示（带 telephone 参数时展示） */
h2.download-register-tip {
    margin: var(--spacing-2) 0 0;
    font-size: 2rem;
    font-weight: var(--font-weight-medium);
    text-align: center;
    color: #FFFFFF;
}

/* “效率倍增”高亮（与 indexV2 保持一致的发光效果） */
span.highlight-wrapper {
    position: relative;
    color: #fa851e;
    z-index: 5;
    margin-left: 0.5rem;
}

.download-hero-title span.highlight {
    background: linear-gradient(90deg, #FFD147 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 4.25rem;
    position: absolute;
    left: 8.4rem;
    top: -0.1rem;
    z-index: 10;
}

/* ---------- 客户端下载卡片 ---------- */
.download-card-list {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 4.5rem;
}

.download-card {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 37.5rem;
    padding: 3.81rem 0 4.06rem;
    background: rgba(20, 60, 126, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.50);
    border-radius: 1.88rem;
}

.download-card:hover {
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.download-card-windows {
}

.download-card-macos {
}

.download-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.download-os-icon {
    width: 4.63rem;
    height: 4.38rem;
}

.download-os-name {
    font-size: 3.75rem;
    color: #B092FF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
}

.download-card-macos .download-os-name {
    color: #FFFFFF;
}

.download-card-info {
    margin-top: 1.5rem;
    text-align: center;
}

.download-card-title {
    margin: 0;
    font-size: 1.88rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
}

.download-card-desc {
    margin: 0.44rem 0 0;
    font-size: 1.5rem;
    color: #919191;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 1.13rem 0;
    border-radius: 1rem;
    background-image: linear-gradient(90deg, #2762EB 0%, #7B3AED 100%);
    font-size: 1.88rem;
    color: #FFFFFF !important;
    transition: var(--transition-normal);
    width: 20rem;
}

.download-btn:hover {
    opacity: var(--opacity-hover);
    box-shadow: var(--shadow-md);
}

.download-btn-icon {
    width: 1.13rem;
    height: 1.08rem;
}

/* ---------- 品牌墙（face/brand-list.html） ----------
   .brand-* 样式在共享的 face/css/brand-list.css 中 */
.section-content {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;
    margin-bottom: 11rem;
}

.section-title h3 {
    text-align: center;
    color: transparent;
    background-image: linear-gradient(90deg, #FFFFFF 31%, #2BAAFF 57%, #FFFFFF 62%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3rem;
    font-weight: 500;
    margin: 9.13rem 0 0;
}

h4.section-title-subtitle {
    margin: 1rem 0 0;
    font-size: 2rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
}

/* ---------- 底部区域（contact-information.html + pages-footer.html） ---------- */
/* 在 .content-wrapper 的纵向 flex 中，margin-top:auto 吞掉剩余空间，
   内容不足一屏（如宽度 <1024px 缩放后）也始终贴在页面最底部 */
.last-section {
    margin-top: auto;
    margin-bottom: -1rem;
}

.brand-list {
    margin-top: 4.25rem;
}