/* 导入字体 */
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Raleway:wght@500&display=swap');*/

/* 全局样式设置 */
body, html {
    width: 100%; /* 使 body 和 html 占据全屏宽度 */
    height: 100%; /* 使 body 和 html 占据全屏高度 */
    margin: 0; /* 清除默认的 margin */
    padding: 0; /* 清除默认的 padding */
    font-family: 'Roboto', sans-serif; /* 使用 Roboto 字体 */
    background: linear-gradient(120deg, #232526 0%, #1e3c72 100%);
    color: white; /* 全局文字颜色为白色 */
    overflow: hidden; /* 隐藏溢出内容 */
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 使子元素在垂直方向排列 */
    justify-content: center; /* 垂直方向居中 */
    align-items: center; /* 水平方向居中 */
    text-align: center; /* 文本居中 */
    background-size: 200% 200%; /* 背景图片双倍大小以便动画使用 */
    animation: backgroundAnimation 10s ease infinite; /* 背景动画 */
    position: relative;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    left: 50%;
    top: 40%;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(0,198,255,0.18) 0%, rgba(30,60,114,0) 70%);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

/* 背景渐变动画 */
@keyframes backgroundAnimation {
    0%, 100% { background-position: 0% 50%; } /* 动画起始和结束位置 */
    50% { background-position: 100% 50%; } /* 动画中间位置 */
}

/* 顶部导航栏 */
.top-bar {
    position: absolute;
    top: 20px; /* 距顶部20px */
    left: 20px; /* 距左侧20px */
    display: flex;
    align-items: center; /* 垂直居中 */
}

/* 顶部导航栏中的 logo */
.top-bar img {
    width: 50px; /* 固定 logo 宽度为50px */
}

/* 顶部导航栏中的文字 */
.top-bar .logo-text {
    font-size: 1.8em; /* 字体大小 */
    font-weight: bold; /* 加粗字体 */
    margin-left: 10px; /* 距离 logo 10px */
    color: white; /* 文字颜色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文字阴影 */
    text-decoration: none; /* 去除文字下划线 */
}

/* 页面头部区域 */
.header {
    width: 100%; /* 占据全宽 */
    max-width: 1200px; /* 最大宽度为1200px */
    margin-bottom: 30px; /* 底部外边距为30px */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    box-sizing: border-box; /* 包含内边距和边框 */
    padding: 0 20px; /* 内边距，确保内容不紧贴边缘 */
}

/* 文字内容容器 */
.text-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 水平两端对齐 */
    flex-wrap: nowrap; /* 不换行 */
    width: 100%; /* 占据全宽 */
    max-width: 100%; /* 最大宽度为100% */
    box-sizing: border-box; /* 包含内边距和边框 */
    padding: 0 20px; /* 内边距，确保内容不紧贴边缘 */
}

/* 优化后的文字发光效果 */
@keyframes glow {
    0% {
        text-shadow: 0 0 5px rgba(255, 78, 80, 0.5),
                     0 0 10px rgba(255, 78, 80, 0.3),
                     0 0 15px rgba(255, 78, 80, 0.2); /* 减弱发光效果，避免覆盖背景 */
    }
    100% {
        text-shadow: 0 0 5px rgba(31, 142, 241, 0.5),
                     0 0 10px rgba(31, 142, 241, 0.3),
                     0 0 15px rgba(31, 142, 241, 0.2); /* 减弱发光效果，避免覆盖背景 */
    }
}

.text-small, .text-large {
    animation: glow 3s cubic-bezier(0.4, 0.0, 0.2, 1) infinite alternate; /* 使用 cubic-bezier 让动画更顺滑 */
    white-space: nowrap; /* 避免文字换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 文字过多时显示省略号 */
    margin: 0; /* 清除默认的 margin */
}

/* 较小的文字样式 */
.text-small {
    font-size: 1.2vw; /* 根据视口宽度调整字体大小 */
    color: #ffffff; /* 白色文字 */
}

/* 较大的文字样式 */
.text-large {
    font-size: 4vw; /* 根据视口宽度调整字体大小 */
    max-width: 100%; /* 最大宽度为100% */
    font-weight: bold; /* 加粗字体 */
    color: #ffffff; /* 白色文字 */
}

/* 盾牌光晕动画 */
@keyframes shieldGlow {
    0% { filter: drop-shadow(0 0 50px rgba(255, 78, 80, 0.5)); } /* 减弱的红色阴影 */
    100% { filter: drop-shadow(0 0 50px rgba(31, 142, 241, 0.5)); } /* 减弱的蓝色阴影 */
}

.floating-shield img {
    width: 100%;
    filter: drop-shadow(0 0 50px rgba(255, 78, 80, 0.5)); /* 初始状态的阴影 */
    animation: shieldGlow 3s cubic-bezier(0.4, 0.0, 0.2, 1) infinite alternate; /* 盾牌光晕动画 */
}

/* 盾牌浮动动画 减少浮动高度，动画更自然 */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.floating-shield {
    transform-origin: center;
    width: 200px;
    height: 200px;
    margin: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* 显示统计信息的区域 */
.stats {
    display: flex;
    justify-content: space-around; /* 水平等间距分布 */
    align-items: center; /* 垂直居中 */
    margin-top: 50px; /* 上边距50px */
    width: 100%; /* 占据全宽 */
    max-width: 800px; /* 最大宽度800px */
}

/* 单个统计项样式 */
.stat-item {
    text-align: center; /* 文字居中 */
    margin: 0 20px; /* 左右外边距20px */
}

/* 统计项中的标题和文本 */
.stat-item h2, .stat-item p {
    display: inline-block; /* 内联块状元素 */
    vertical-align: middle; /* 垂直对齐到中间 */
    margin: 0 10px; /* 左右外边距10px */
}

/* 统计项中的文本样式 */
.stat-item p {
    font-size: 1.5em; /* 字体大小 */
    color: #dddddd; /* 浅灰色文字 */
}

/* 底部的联系方式区域 */
.contact-footer {
    position: absolute;
    bottom: 0; /* 固定在底部 */
    width: 100%; /* 占据全宽 */
    text-align: center; /* 文字居中 */
    padding: 30px 0; /* 上下内边距10px */
    background-color: rgba(0, 0, 0, 0.2); /* 半透明黑色背景 */
}

/* 联系方式链接区域 */
.contact-links {
    display: flex;
    justify-content: center; /* 水平居中 */
    margin-top: 10px; /* 上边距10px */
}

/* 单个联系方式链接样式 */
.contact-links a {
    margin: 0 10px; /* 左右外边距10px */
    text-decoration: none; /* 去除下划线 */
    color: #ffffff; /* 白色文字 */
    font-size: 1em; /* 字体大小 */
    text-align: center; /* 文字居中 */
}

/* 联系方式图标样式 */
.contact-links i {
    font-size: 1.5em; /* 图标字体大小 */
    vertical-align: middle; /* 垂直居中 */
    margin-right: 5px; /* 右侧外边距5px */
}

/* 备案信息链接样式 */
.footer a {
    color: #000000; /* 黑色文字 */
    text-decoration: none; /* 去除下划线 */
    font-weight: bold; /* 加粗字体 */
}

/* 备案信息链接悬停样式 */
.footer a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* 底部文字样式 */
.footer {
    font-size: 0.9em; /* 字体大小 */
    margin-top: 10px; /* 上边距10px */
}

/* 针对手机端进行布局和字体大小调整 */
@media (max-width: 768px) {
    .header {
        flex-direction: column; /* 垂直布局，避免内容挤压 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
    }

    .text-container {
        flex-direction: column; /* 改为垂直布局 */
        align-items: center; /* 垂直居中 */
        text-align: center; /* 文字居中 */
    }

    .floating-shield {
        width: 100px; /* 固定盾牌图标宽度 */
        height: 100px; /* 固定盾牌图标高度 */
        margin: 0 10px; /* 设置左右外边距 */
        flex-shrink: 0; /* 阻止图标缩小 */
    }

    .text-small {
        font-size: 3vw; /* 根据视口宽度调整字体大小 */
    }

    .text-large {
        font-size: 6vw; /* 根据视口宽度调整字体大小 */
        max-width: 100%; /* 允许最大宽度为100% */
        white-space: nowrap; /* 避免文字换行 */
        overflow: visible; /* 确保文本不被裁剪 */
        text-overflow: clip; /* 去除溢出的文本 */
    }

    .stat-item h2 {
        font-size: 6vw; /* 根据视口宽度调整字体大小 */
    }

    .stat-item p {
        font-size: 3vw; /* 根据视口宽度调整字体大小 */
    }

    .contact-links a {
        font-size: 2.5vw; /* 根据视口宽度调整字体大小 */
    }

    .contact-links i {
        font-size: 4vw; /* 根据视口宽度调整字体大小 */
    }

    .footer {
        font-size: 2.5vw; /* 根据视口宽度调整字体大小 */
    }
}

/* 针对平板及以上设备的布局和样式 */
@media (min-width: 769px) {
    .header {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    .text-container {
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: space-between; /* 水平两端对齐 */
        flex-wrap: nowrap; /* 不换行 */
    }
    .floating-shield {
        width: 200px; /* 盾牌宽度 */
        height: 200px; /* 盾牌高度 */
    }
}

/* styles.css */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.loading-spinner {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #3498db;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes breathe {
    0%   { transform: scale(1); }
    10%  { transform: scale(1.035); }
    20%  { transform: scale(1.07); }
    30%  { transform: scale(1.095); }
    40%  { transform: scale(1.11); }
    50%  { transform: scale(1.12); }
    60%  { transform: scale(1.11); }
    70%  { transform: scale(1.095); }
    80%  { transform: scale(1.07); }
    90%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}

.glass {
    background: rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 4px 32px 0 rgba(0,0,0,0.12);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 24px 32px;
    position: relative;
    z-index: 1;
}