/* ============================================
   新闻中心页面样式
   ============================================ */

/* 全局重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.news-page {
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, sans-serif;
    background-color: #000000;
    color: #fff;
    overflow-x: hidden;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
}

/* ============ 流星背景效果 ============ */
.background-visuals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

.background-visuals.meteor-background {
    background: transparent;
}

#meteorCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   新闻中心Banner区域
   ============================================ */
.news-banner-section {
    position: relative;
    width: 100%;
    max-width: 1414px;
    margin: 0 auto;
    padding-top: min(80px, calc(80 / 1414 * 100vw));
    padding-bottom: min(80px, calc(80 / 1414 * 100vw));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Banner内容（标题和副标题）- 与视频重叠，1414px及以上距离顶部190px */
.news-banner-content {
    position: absolute;
    top: min(190px, calc(190 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    text-align: center;
}

/* 光晕背景容器 - 覆盖整个区域，以视频中心为基准 */
.news-glow-container {
    position: absolute;
    top: min(50px, calc(50 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
    overflow: visible;
}

/* 光晕圆圈 - 以视频中心为基准定位 (210px + 视频高度322px = 532px) */
.glow-circle {
    position: absolute;
    left: 50%;
    top: min(532px, calc(532 / 1414 * 100vw));
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background: radial-gradient(ellipse 50.00% 50.00% at 50.00% 50.00%, rgba(10, 130, 255, 0) 56%, rgba(0, 60, 241, 0.70) 100%);

    opacity: 0;
    animation: glowSync 6s linear infinite;
}

/* 光晕同步扩散动画 - 三层等比例间距向外扩散且逐渐透明 */
@keyframes glowSync {
    0% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }
    12% {
        transform: translate(-50%, -50%) scale(0.76);
        opacity: 0.32;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.18;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: 0;
    }
}

/* 第一个光晕 - 最大，响应式尺寸 */
.glow-1 {
    width: min(1180px, 90vw);
    height: min(1180px, 90vw);
    opacity: 1;
    z-index: 1;
    animation: glowSync 6s linear infinite;
}

/* 第二个光晕 - 中等，响应式尺寸 */
.glow-2 {
    width: min(940px, 74vw);
    height: min(940px, 74vw);
    opacity: 1;
    z-index: 2;
    animation: glowSync 6s linear infinite;
}

/* 第三个光晕 - 最小，响应式尺寸 */
.glow-3 {
    width: min(700px, 58vw);
    height: min(700px, 58vw);
    opacity: 1;
    z-index: 3;
    animation: glowSync 6s linear infinite;
}

/* 中心图标/视频 - 距离顶部210px */
.news-center-icon {
    position: relative;
    z-index: 4;
    margin-top: min(210px, calc(210 / 1414 * 100vw));
}

.news-center-icon img,
.news-center-icon video {
    width: min(683px, calc(683 / 1414 * 100vw));
    height: auto;
    max-height: min(644px, calc(644 / 1414 * 100vw));
    display: block;
    margin: 0 auto;
}

/* 新闻中心标题 - 与副标题间距16px */
.news-title {
    font-family: 'PingFang SC Semibold','Inter',  sans-serif;
    font-size: min(55px, calc(55 / 1414 * 100vw));
    font-weight: 700;
    letter-spacing: min(2.75px, calc(2.75 / 1414 * 100vw));
    background: linear-gradient(90deg, rgba(0, 133, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    background-clip: text;
    margin-bottom: min(16px, calc(16 / 1414 * 100vw));
}

/* 副标题 */
.news-subtitle {
    font-family: 'PingFang SC Semibold', sans-serif;
    font-size: min(25px, calc(25 / 1414 * 100vw));
    font-weight: 400;
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 10%, rgba(255, 255, 255, 1) 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.4;
}

/* ============================================
   新闻列表区域
   ============================================ */
.news-list-section {
    width: 100%;
    max-width: 1414px;
    margin: 0 auto;
    /* padding-bottom: min(100px, calc(100 / 1414 * 100vw)); */
    overflow: hidden;
    background-image: url('/assets/design/news/news-bg.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: min(1414px, calc(1414 / 1414 * 100vw)); auto;
}

.news-container {
    max-width: min(1101px, calc(1101 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(40px, calc(40 / 1414 * 100vw));
}

/* Tab切换 */
.news-tabs {
    display: flex;
    gap: 0;
    margin-bottom: min(50px, calc(50 / 1414 * 100vw));
    width: min(317px, calc(317 / 1414 * 100vw));
    height: min(68px, calc(68 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.04);
    border-radius: min(40px, calc(40 / 1414 * 100vw));
    border: 0.5px solid rgba(214.54, 234.36, 255, 0.70);
    padding: min(9px, calc(9 / 1414 * 100vw));
    position: relative;
}

.news-tab-item {
    flex: 1;
    height: min(50px, calc(50 / 1414 * 100vw));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 400;
    color: #fff;
    border-radius: min(30px, calc(30 / 1414 * 100vw));
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.news-tab-active {
    background: radial-gradient(ellipse 155.27% 239.57% at 3.01% -18.86%, #003CF1 0%, rgba(0, 0, 0, 0) 51%, #0A82FF 95%);
    border: 1px solid linear-gradient(180deg, rgba(10, 130, 255, 1) 0%, rgba(6, 78, 153, 1) 99.519%);
    border-image: linear-gradient(180deg, rgba(10, 130, 255, 1) 0%, rgba(6, 78, 153, 1) 99.519%) 1;
    z-index: 1;
}

/* 新闻卡片包装容器 */
.news-cards-wrapper {
    position: relative;
    width: min(1101px, calc(1101 / 1414 * 100vw));
    margin: 0 auto;
}

/* 新闻卡片列表容器 */
.news-cards-container {
    display: flex;
    flex-direction: column;
    gap: min(64px, calc(64 / 1414 * 100vw));
}

/* 新闻卡片项 */
.news-card-item {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0.6;
    width: min(1020px, calc(1020 / 1414 * 100vw));
    height: min(193px, calc(193 / 1414 * 100vw));
    position: relative;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    overflow: hidden;
}

/* 渐变边框效果 */
.news-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    padding: min(1px, calc(1 / 1414 * 100vw));
    background: linear-gradient(180deg, #0A82FF 0%, #064E99 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.news-card-item:hover {
    opacity: 1;
    transform: translateY(min(-5px, calc(-5 / 1414 * 100vw)));
    z-index: 10;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    overflow: hidden;
}

/* 第一个卡片 - 激活态/鼠标滑过效果 */
.news-card-first {
    opacity: 1;
}

/* 新闻卡片内层 */
.news-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    /* border-radius: min(10px, calc(10 / 1414 * 100vw)); */
    overflow: hidden;
}

/* 第一个卡片的蓝色渐变背景 */
.news-card-first .news-card-inner {
    background: radial-gradient(ellipse 155.27% 239.57% at 3.01% -18.86%, #003CF1 0%, rgba(0, 0, 0, 0) 51%, #0A82FF 95%);
}

/* 新闻卡片图片 */
.news-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: min(386px, calc(386 / 1414 * 100vw));
    height: min(193px, calc(193 / 1414 * 100vw));
    object-fit: cover;
    /* border-top-left-radius: min(10px, calc(10 / 1414 * 100vw)); */
    /* border-bottom-left-radius: min(10px, calc(10 / 1414 * 100vw)); */
}

/* 新闻卡片信息 */
.news-card-info {
    position: absolute;
    top: 0;
    left: min(356px, calc(356 / 1414 * 100vw));
    right: 0;
    height: 100%;
    padding: 0;
}

/* 新闻标题 */
.news-card-title {
    position: absolute;
    top: min(25px, calc(25 / 1414 * 100vw));
    left: min(70px, calc(70 / 1414 * 100vw));
    width: calc(100% - min(70px, calc(70 / 1414 * 100vw)));
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 400;
    color: #fff;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC Medium";
}

/* 新闻描述 */
.news-card-description {
    position: absolute;
    top: min(80px, calc(80 / 1414 * 100vw));
    left: min(70px, calc(70 / 1414 * 100vw));
    width: calc(100% - min(70px, calc(70 / 1414 * 100vw)));
    font-size: min(15px, calc(15 / 1414 * 100vw));
    font-weight: 400;
    letter-spacing: min(0.30px, calc(0.30 / 1414 * 100vw));
    color: #EEEEEE;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC Medium";
}

/* 查看更多按钮 */
.news-card-more {
    position: absolute;
    top: min(136px, calc(136 / 1414 * 100vw));
    left: min(70px, calc(70 / 1414 * 100vw));
    width: min(145px, calc(145 / 1414 * 100vw));
    height: min(35px, calc(35 / 1414 * 100vw));
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    border: 1px solid rgba(0, 133, 255, 0.8);
    /* border-image: linear-gradient(90deg, #003CF1 0%, #0085FF 100%) 1; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-card-more span {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 400;
    letter-spacing: min(0.32px, calc(0.32 / 1414 * 100vw));
    color: #EEEEEE;
}

/* 分页区域 */
.news-pagination {
    margin-top: min(64px, calc(64 / 1414 * 100vw));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 分页小圆点容器 */
.pagination-dots-container {
    display: flex;
    align-items: center;
    gap: min(12px, calc(12 / 1414 * 100vw));
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

/* 分页小圆点 */
.pagination-dot {
    width: min(10px, calc(10 / 1414 * 100vw));
    height: min(10px, calc(10 / 1414 * 100vw));
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* 当前页小圆点 */
.pagination-dot.active {
    background-color: #fff;
    /* transform: scale(1.2); */
    border-radius: 100%;
    box-shadow: 0 0 min(8px, calc(8 / 1414 * 100vw)) rgba(255, 255, 255, 0.5);
}

/* 小圆点悬停效果 */
.pagination-dot:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.6);
}

/* 新闻卡片容器 - 支持拖动 */
.news-cards-wrapper {
    position: relative;
    width: min(1101px, calc(1101 / 1414 * 100vw));
    max-width: 100%;
    margin: 0 auto;
    cursor: grab;
    user-select: none;
    overflow: hidden;
}

.news-cards-wrapper:active {
    cursor: grabbing;
}

/* 新闻卡片滑动轨道 */
.news-cards-track {
    display: flex;
    width: 300%;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(min(-1101px, calc(-1101 / 1414 * 100vw)));
}

/* 每个页面容器 */
.news-cards-page {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding-top: 10px;
    min-height: min(500px, calc(500 / 1414 * 100vw));
}

.news-cards-left {
    order: 1;
}

.news-cards-center {
    order: 2;
}

.news-cards-right {
    order: 3;
}

/* 页面容器内部的新闻卡片容器 */
.news-cards-page .news-cards-container {
    /* padding-bottom: min(100px, calc(100 / 1414 * 100vw)); */
}

/* 新闻卡片容器内部 - 用于滑动动画 */
.news-cards-inner {
    display: none; /* 旧版本已废弃 */
}

/* ============================================
   滚动渐入动画效果（参考首页）
   ============================================ */

/* 基础动画类：初始隐藏状态 */
.scroll-animate-up {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 300ms;
}

.scroll-animate-left {
    opacity: 0;
    transform: translateX(-220px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 400ms;
}

.scroll-animate-right {
    opacity: 0;
    transform: translateX(220px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 800ms;
}

/* 激活状态：显示并移除偏移 */
.scroll-animate-up.visible,
.scroll-animate-left.visible,
.scroll-animate-right.visible {
    opacity: 1;
    transform: translate(0);
}

/* ============================================
   响应式设计
   ============================================ */
@media (max-width: 1200px) {
    .news-container {
        max-width: 100%;
        padding: 0 min(20px, calc(20 / 1414 * 100vw));
    }

    .news-cards-wrapper,
    .news-cards-container {
        width: 100%;
        max-width: min(1095px, calc(1095 / 1414 * 100vw));
    }

    .news-card-item {
        width: 100% !important;
    }
}

@media (max-width: 1024px) {
    .news-list-section {
        background-size: 100% auto;
    }
}