/* ============================================================
 * 枫叶之秋（maple）自定义主题
 * 秋日暖橙配色 + 枫叶缓缓飘落（纯 CSS 动画，无 JS）
 * 颜色全部引用主题 CSS 变量，随主题自动联动
 * ============================================================ */

/* ---------- 站名 / 大标题：秋日渐变文字 ---------- */
header h1[class*="bg-gradient"],
h1[class*="bg-gradient"] {
    background-image: linear-gradient(120deg, var(--primary-vivid), var(--secondary-vivid)) !important;
}

/* ---------- 主按钮：枫叶暖橙渐变 ---------- */
.btn-primary,
.submit-btn,
.comment-submit,
.gradient-btn,
.fab-btn,
.credits-btn,
.back-btn:hover {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.35) !important;
}

/* ---------- 链接 / 强调色 ---------- */
a,
.page-title,
.card h2,
.stat-label {
    color: var(--primary);
}
a:hover {
    color: var(--secondary);
}

/* ---------- 底部导航：秋日高亮 ---------- */
.bottom-nav {
    background: rgba(255, 251, 246, 0.92) !important;
}
.nav-item.active {
    color: var(--primary) !important;
}
.nav-slider {
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
}

/* ============================================================
 * 枫叶飘落（两层：小密快 + 大疏慢）
 * 使用 background-position 循环动画，无缝下落
 * ============================================================ */
body::before,
body::after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30;
    background-repeat: repeat;
}

/* 第一层：小而密，下落较快 */
body::before {
    background-image:
        radial-gradient(ellipse 4px 6px at 8% 12%, rgba(var(--primary-rgb), 0.7), transparent 70%),
        radial-gradient(ellipse 4px 6px at 26% 47%, rgba(var(--secondary-rgb), 0.65), transparent 70%),
        radial-gradient(ellipse 4px 6px at 41% 23%, rgba(var(--primary-rgb), 0.65), transparent 70%),
        radial-gradient(ellipse 4px 6px at 57% 68%, rgba(var(--primary-rgb), 0.6), transparent 70%),
        radial-gradient(ellipse 4px 6px at 74% 31%, rgba(var(--secondary-rgb), 0.65), transparent 70%),
        radial-gradient(ellipse 4px 6px at 89% 82%, rgba(var(--primary-rgb), 0.6), transparent 70%),
        radial-gradient(ellipse 4px 6px at 14% 90%, rgba(var(--primary-rgb), 0.55), transparent 70%),
        radial-gradient(ellipse 4px 6px at 63% 7%, rgba(var(--secondary-rgb), 0.6), transparent 70%),
        radial-gradient(ellipse 4px 6px at 94% 55%, rgba(var(--primary-rgb), 0.7), transparent 70%),
        radial-gradient(ellipse 4px 6px at 34% 76%, rgba(var(--primary-rgb), 0.65), transparent 70%);
    background-size: 100% 360px;
    animation: maple-fall-1 12s linear infinite;
}

/* 第二层：大而疏，下落较慢 */
body::after {
    background-image:
        radial-gradient(ellipse 5px 9px at 18% 22%, rgba(var(--primary-rgb), 0.6), transparent 70%),
        radial-gradient(ellipse 5px 9px at 45% 55%, rgba(var(--secondary-rgb), 0.55), transparent 70%),
        radial-gradient(ellipse 5px 9px at 72% 18%, rgba(var(--primary-rgb), 0.55), transparent 70%),
        radial-gradient(ellipse 5px 9px at 88% 64%, rgba(var(--primary-rgb), 0.5), transparent 70%),
        radial-gradient(ellipse 5px 9px at 32% 88%, rgba(var(--secondary-rgb), 0.55), transparent 70%),
        radial-gradient(ellipse 5px 9px at 8% 58%, rgba(var(--primary-rgb), 0.6), transparent 70%);
    background-size: 100% 520px;
    animation: maple-fall-2 18s linear infinite;
}

/* 下落动画：Y 方向移动一个完整周期（无缝循环），X 方向轻微飘摆 */
@keyframes maple-fall-1 {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -40px 360px, -40px 360px, -40px 360px, -40px 360px, -40px 360px, -40px 360px, -40px 360px, -40px 360px, -40px 360px, -40px 360px; }
}
@keyframes maple-fall-2 {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 30px 520px, 30px 520px, 30px 520px, 30px 520px, 30px 520px, 30px 520px; }
}

/* 尊重系统"减弱动效"设置：关闭飘落动画，保留静态点缀 */
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none;
        opacity: 0.35;
    }
}