/* 使用CSS变量统一管理颜色和其他常用值 */
:root {
    --primary-color: rgba(0,0,0,0.7);
    --secondary-color: #666;
    --max-width: 900px;
    --gradient-colors: #eafde1, #fffbb7, #d6edc8, #eafde1;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* 优化性能的渐变动画 */
    background: linear-gradient(120deg, var(--gradient-colors));
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    color: rgba(0,0,0,0.7);
    overflow-y: scroll;
    will-change: background-position; /* 提示浏览器优化动画性能 */
}

@keyframes gradientShift {
    0% {background-position:0% 50%}
    50% {background-position:100% 50%}
    100% {background-position:0% 50%}
}

#container {
    max-width: 900px;
    margin: 40px auto 80px;
    padding: 0 20px;
    line-height: 1.6;
    font-size: 18px;
}

/* 使用更现代的选择器 */
#container > * {
    max-width: 100%;
}

h1 {
    font-weight: 700;
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 0.6em;
}

h2 {
    margin-top: 1.6em;
    font-weight: 600;
}

ul {
    padding-left: 1.2em;
}

li {
    margin-bottom: 0.4em;
}

#thanks {
    text-align: center;
    margin-top: 2em;
    font-weight: 600;
    font-size: 1.2rem;
}

#footer {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 14px;
    color: rgba(0,0,0,0.5);
}

.section-title {
    color: #666;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
    text-align: center;
}

.intro-text {
    text-align: center;
    margin-bottom: 2em;
}

/* 添加到你的 styles.css 文件中 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为需要添加动画的文字元素添加以下样式 */
.animate-text {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
    will-change: opacity, transform;
}

/* 可以添加动画延迟，让文字依次出现 */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* 添加响应式设计 */
@media (max-width: 768px) {
    #container {
        padding: 0 15px;
        margin: 20px auto 40px;
    }

    h1 {
        font-size: 2rem;
    }
}
.particle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: rgba(243, 143, 234, 0.5); /* 调整透明度 */
border-radius: 50%;
    pointer-events: none;
    animation: particleFade 0.4s forwards; /* 缩短动画时间 */
    transform: translate(-50%, -50%);
    filter: blur(1.5px);
}

@keyframes particleFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5); /* 调整放大比例 */
    }
}

.fade-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}
#toast {
    position: fixed;
    top: -60px; /* 初始隐藏 */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 204, 0, 0.3); /* 半透明黄 */
    backdrop-filter: blur(10px); /* 毛玻璃模糊 */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px; /* 胶囊形 */
    padding: 12px 30px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 15px rgba(255, 204, 0, 0.3);
    border: 1px solid rgba(255, 204, 0, 0.5);
    z-index: 10000;
    transition: top 0.5s ease;
    user-select: none;
    cursor: default;
    white-space: nowrap;
}

#toast.show {
    top: 20px; /* 滑入 */
}

/* --- 资源库炫光按钮样式 Start --- */

/* 按钮主体 */
.aurora-btn {
    position: fixed; /* 固定在窗口右上角 */
    top: 20px;
    right: 20px;
    padding: 10px 24px;
    text-decoration: none;
    border-radius: 50px; /* 胶囊形状 */
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 15px;
    z-index: 999; /* 保证在内容之上，但在开屏动画之下 */
    overflow: hidden; /* 隐藏溢出的光效 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* 核心：流动渐变背景 (深蓝 -> 浅青 -> 深蓝) */
    background: linear-gradient(90deg, #4facfe, #00f2fe, #4facfe);
    background-size: 200% auto;
    animation: flowLight 3s linear infinite; /* 流动动画 */

    /* 初始光晕 */
    box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
}

/* 流动动画关键帧 */
@keyframes flowLight {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* 鼠标悬停状态：更亮，轻微上浮 */
.aurora-btn:hover {
    box-shadow: 0 8px 25px rgba(0, 242, 254, 0.6);
    transform: translateY(-2px) scale(1.05);
    color: #fff;
}

/* 按钮内部文字层级提升 */
.aurora-btn span {
    position: relative;
    z-index: 2;
}

/* 点击时的波纹特效层 */
.aurora-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: none; /* 默认无过渡 */
}

/* 点击激活状态 */
.aurora-btn:active {
    transform: scale(0.95); /* 轻微回弹 */
    box-shadow: 0 2px 10px rgba(79, 172, 254, 0.3);
}

/* 点击时的波纹扩散动画 */
.aurora-btn:active::after {
    width: 300px; /* 扩散范围 */
    height: 300px;
    opacity: 0;
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.5s ease-out;
}

/* 移动端适配：防止按钮挡住标题，适当缩小 */
@media (max-width: 768px) {
    .aurora-btn {
        top: 15px;
        right: 15px;
        padding: 8px 18px;
        font-size: 13px;
    }
}
/* --- 资源库炫光按钮样式 End --- */