/* ====================================================================
 * 道坛网主题系统 - 基础架构
 * Theme System Base Architecture
 *
 * 所有主题都基于这套CSS变量系统
 * 后台可通过切换不同的theme-*.css文件来更换整站风格
 * ==================================================================== */

:root {
    /* ===== 核心色彩变量 ===== */
    /* 背景层次 */
    --bg-primary: #000000;           /* 主背景 */
    --bg-secondary: #000000;         /* 次级背景 */
    --bg-elevated: #000000;          /* 悬浮元素背景 */
    --bg-card: #000000;              /* 卡片背景 */
    --bg-overlay: rgba(0, 0, 0, 0.72);

    /* 边框 */
    --border-subtle: rgba(255,255,255,0.1);    /* 微妙边框 */
    --border-normal: rgba(255,255,255,0.2);    /* 常规边框 */
    --border-strong: rgba(255,255,255,0.4);    /* 强调边框 */

    /* 文字 */
    --text-primary: #ffffff;         /* 主文字 */
    --text-secondary: #cccccc;       /* 次级文字 */
    --text-muted: #888888;           /* 弱化文字 */
    --text-accent: #ffffff;          /* 强调文字 */

    /* 主题色 */
    --accent-primary: #ffffff;       /* 主强调色 */
    --accent-secondary: #ffffff;     /* 次强调色 */
    --accent-tertiary: #ffffff;      /* 第三强调色 */

    /* 发光效果 */
    --glow-primary: rgba(255,255,255,0.3);
    --glow-secondary: rgba(255,255,255,0.2);
    --glow-intense: rgba(255,255,255,0.5);

    /* 渐变 */
    --gradient-primary: linear-gradient(180deg, #000 0%, #000 100%);
    --gradient-secondary: linear-gradient(180deg, #000 0%, #000 100%);
    --gradient-radial: radial-gradient(circle, #000 0%, #000 100%);

    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);

    /* ===== 兼容旧版样式别名 ===== */
    --bg: var(--bg-primary);
    --bg-alt: var(--bg-secondary);
    --card: var(--bg-card);
    --card-2: var(--bg-elevated);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --border: var(--border-normal);
    --accent: var(--accent-primary);
    --accent-2: var(--accent-secondary);
    --accent-hover: var(--accent-bright, var(--accent-primary));
    --accent-glow: var(--glow-primary);
    --accent-ghost: var(--glow-secondary);
    --input-bg: rgba(255, 255, 255, 0.04);

    /* ===== 催眠学参数 ===== */
    /* 动画频率（基于脑波和心率） */
    --pulse-alpha: 2.5s;             /* α波频率 (8-13Hz) 放松专注 */
    --pulse-theta: 4s;               /* θ波频率 (4-8Hz) 深度放松 */
    --pulse-heartbeat: 1s;           /* 心跳频率 (60 BPM) */
    --rotate-hypnotic: 60s;          /* 催眠旋转速度 */

    /* 黄金比例 */
    --ratio-golden: 1.618;
    --ratio-golden-inv: 0.618;

    /* ===== 布局变量 ===== */
    --container-max: 1200px;
    --topnav-h: 54px;
    --spacing-unit: 8px;

    /* ===== 字体 ===== */
    --font-taoist: "KaiTi", "楷体", "STKaiti", "AR PL UKai CN", "FangSong", "仿宋", "SimSun", serif;
    --font-modern: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ===== 过渡效果 ===== */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    color-scheme: dark;
}

/* ===== 催眠学动画库 ===== */

/* α波脉冲 - 促进专注和放松 */
@keyframes pulse-alpha {
    0%, 100% {
        opacity: 0.85;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* θ波脉冲 - 深度放松和潜意识接受 */
@keyframes pulse-theta {
    0%, 100% {
        opacity: 0.8;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.1);
    }
}

/* 心跳节奏 - 建立信任和安全感 */
@keyframes pulse-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.03); }
    28% { transform: scale(1); }
    42% { transform: scale(1.02); }
    70% { transform: scale(1); }
}

/* 催眠旋转 - 轻微催眠效果 */
@keyframes rotate-hypnotic {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 斐波那契螺旋引导 - 自然视线流动 */
@keyframes spiral-guide {
    0% {
        transform: rotate(0deg) translateX(0px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) translateX(100px);
        opacity: 0;
    }
}

/* 向心渐变 - 引导注意力到中心 */
@keyframes focus-center {
    0%, 100% {
        box-shadow:
            inset 0 0 20px var(--glow-primary),
            0 0 10px var(--glow-primary);
    }
    50% {
        box-shadow:
            inset 0 0 40px var(--glow-intense),
            0 0 20px var(--glow-intense);
    }
}

/* 呼吸光晕 - 模拟自然呼吸节奏 */
@keyframes breathe-glow {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--glow-primary));
    }
    50% {
        filter: drop-shadow(0 0 25px var(--glow-intense));
    }
}

/* 波纹扩散 - 吸引注意力 */
@keyframes ripple-expand {
    0% {
        transform: scale(0.95);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 粒子上升 - 营造神圣感 */
@keyframes particle-rise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(var(--drift-x, 0));
        opacity: 0;
    }
}

/* ===== 黄金比例布局辅助类 ===== */
.golden-ratio-container {
    display: grid;
    grid-template-columns: 1fr var(--ratio-golden-inv);
}

.golden-ratio-reverse {
    display: grid;
    grid-template-columns: var(--ratio-golden-inv) 1fr;
}

/* ===== 催眠效果应用类 ===== */
.hypnotic-pulse {
    animation: pulse-alpha var(--pulse-alpha) ease-in-out infinite;
}

.deep-relax-pulse {
    animation: pulse-theta var(--pulse-theta) ease-in-out infinite;
}

.heartbeat-rhythm {
    animation: pulse-heartbeat var(--pulse-heartbeat) ease-in-out infinite;
}

.hypnotic-rotate {
    animation: rotate-hypnotic var(--rotate-hypnotic) linear infinite;
}

.focus-attention {
    animation: focus-center 3s ease-in-out infinite;
}

.breathe-effect {
    animation: breathe-glow 4s ease-in-out infinite;
}

/* ===== 视线引导系统 ===== */
.visual-flow-down {
    position: relative;
}

.visual-flow-down::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--accent-primary) 50%,
        transparent 100%
    );
    opacity: 0.3;
    animation: flow-down 3s ease-in-out infinite;
}

@keyframes flow-down {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* ===== 对称性和重复 - 潜意识安全感 ===== */
.symmetric-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.symmetric-layout::before,
.symmetric-layout::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    opacity: 0.3;
}

.symmetric-layout::before {
    left: 10%;
}

.symmetric-layout::after {
    right: 10%;
}

/* ===== 主页专用动画（兼容旧版） ===== */
@keyframes hypnotic-pulse {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

@keyframes incense-float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-3px) translateX(1px);
    }
    50% {
        transform: translateY(-6px) translateX(-1px);
    }
    75% {
        transform: translateY(-3px) translateX(1px);
    }
}

/* 烛光闪烁效果 */
@keyframes candle-flicker {
    0%, 100% {
        opacity: 0.95;
        box-shadow:
            0 0 18px var(--glow-primary),
            0 0 36px var(--glow-secondary),
            inset 0 0 12px var(--glow-primary);
    }
    50% {
        opacity: 1;
        box-shadow:
            0 0 22px var(--glow-intense),
            0 0 44px var(--glow-primary),
            inset 0 0 16px var(--glow-intense);
    }
}

/* 符文发光效果 */
@keyframes talisman-glow {
    0%, 100% {
        opacity: 0.8;
        text-shadow: 0 0 8px var(--glow-primary);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 16px var(--glow-intense);
    }
}

/* 标题呼吸效果 */
@keyframes candle-title {
    0%, 100% {
        text-shadow:
            2px 2px 0 var(--bg-primary),
            0 0 18px var(--glow-primary),
            0 0 40px var(--glow-secondary);
    }
    50% {
        text-shadow:
            2px 2px 0 var(--bg-primary),
            0 0 24px var(--glow-intense),
            0 0 50px var(--glow-primary);
    }
}