/* 1. 基础设定：取消所有初始动画 */
html, body {
    transition: none !important;
}

/* 2. 这里的背景色作为“第二道防线”，确保 CSS 加载后维持颜色 */
html.light-mode {
    background-color: #ffffff !important;
}

html.dark-mode {
    background-color: #1a1a1a !important;
}

/* 3. 修正你之前的 .html 错误 */
html.light-mode .post-title, 
html.light-mode .article-title {
    background-image: linear-gradient(to right, #ff0000, #ff8c00, #ffff00, #008000, #0000ff, #4b0082, #ee82ee) !important;
}
/* ... 其余代码保持不变 ... */

/* 让所有文章标题变成彩虹色 */
.post-title, .article-title {
    display: inline-block !important;
    
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    transition: transform 0.3s ease !important;
}

/* 鼠标悬停时稍微放大一点，增加互动感 */
.post-title:hover, .article-title:hover {
    transform: scale(1.05);
}

.post-item {
    transition: all 0.3s ease;
    border-radius: 8px; /* 加点圆角 */
}

.post-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 悬停时出现柔和阴影 */
    transform: translateY(-5px); /* 悬停时轻轻上浮 */
}

.post-content img {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

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

.post-title, .article-title {
    background-size: 200% auto !important; /* 背景放大，才有滑动的空间 */
    animation: rainbow_animation 3s linear infinite !important; /* 3秒循环一次 */
}



/* 深色模式下的样式 - 更有荧光感 */
html.dark-mode .post-title, 
html.dark-mode .article-title {
    background-image: linear-gradient(to right, #00f2fe, #4facfe, #00f2fe) !important; /* 这种青蓝色在黑色背景下非常高级 */
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5) !important; /* 增加一点发光效果 */
}

html.dark-mode img {
    filter: brightness(0.8) contrast(1.2); /* 把图片调暗一点，但增加对比度保持清晰 */
    transition: filter 0.3s ease;
}
html.dark-mode img:hover {
    filter: brightness(1); /* 鼠标指上去时恢复亮度 */
}

/* 只有当页面加载完成后，再开启那些华丽的过渡 */
/* 或者将 transition 加在具体的组件上，而不是用 * 选择器 */

/* 针对标题等特殊渐变效果的过渡 */
.post-title, .article-title {
    transition: all 1s ease !important;
}


/* 1. 暴力全局隐藏，涵盖所有状态 */
* {
    cursor: none !important;
}

/* 2. 针对跳转时的特殊处理 */
html, body {
    cursor: none !important;
}

/* 3. 针对正在加载中的状态也隐藏光标 */
html.loading * {
    cursor: none !important;
}


#cursor-dot, #cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none; /* 绝对不能删，否则点不到链接 */
    z-index: 9999;
    border-radius: 50%;
    /* 核心：永远居中 */
    transform: translate(-50%, -50%); 
    /* 平滑尺寸变化 */
    transition: width 0.2s ease-out, height 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out; 
}

/* 小点样式 */
#cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    opacity: 0.9;
    z-index: 99999;
}

/* 大圈样式 */
#cursor-ring {
    width: 30px;
    height: 30px;
    /* 使用 rgba 实现半透明，0.1 是透明度 */
    background-color: var(--primary-color);
    opacity: 0.1;
    border: none; /* 去掉之前的空心环边框 */
}

#cursor-dot.hidden,
#cursor-ring.hidden {
    opacity: 0 !important; /* 使用 important 确保它绝对消失 */
}

/* --- 点击时的重合效果 --- */

/* 小圆变大 */
#cursor-dot.active {
    width: 18px;
    height: 18px;
    opacity: 0.5;
}

/* 大圆变小，并增加透明度（可选） */
#cursor-ring.active {
    width: 18px; /* 与小圆尺寸完全一致 */
    height: 18px;
    opacity: 0.3; /* 点击时颜色加深，产生合并感 */
}

/* --- 深色模式下的光标专属样式 --- */
html.dark-mode #cursor-dot {
    width: 7px;
    height: 7px;
    background-color: #00f2fe !important;
    /* 增加一个青蓝色的核心光 */
    box-shadow: 0 0 9px #00f2fe, 0 0 11px rgba(79, 172, 254, 0.4) !important;
}

html.dark-mode #cursor-ring {
    width: 28px;
    height: 28px;
    background-color: rgba(35, 195, 254, 0.8) !important;
    /* 增加一种淡淡的霓虹环绕感 */
    box-shadow: 0 0 32px rgba(33, 233, 255, 0.7) !important;
    /* 重点：让大圆划过的地方有微弱的模糊感，模拟发光气柱 */
    backdrop-filter: blur(1px);
}

/* 点击时的荧光增强 */
html.dark-mode #cursor-dot.active{
    width: 16px;
    height: 16px;
    background-color: #0bd6e1dc !important;
    box-shadow: 0 0 16px #4facfeac, 0 0 20px rgba(0, 242, 254, 0.6) !important;
    opacity: 0.7 ;
}
html.dark-mode #cursor-ring.active {
    width: 16px;
    height: 16px;
    background-color: #0ecad4b7 !important;
    box-shadow: 0 0 18px #4facfec0, 0 0 20px rgba(0, 242, 254, 0.4) !important;
    opacity: 0.5 ;
}


/* 折叠框容器 */
details {
    box-sizing: border-box;
    border: 1px solid var(--border-color); /* 使用主题定义的边框颜色 */
    border-radius: 8px;
    padding: 0;
    margin: 1rem 0;
    display: block; /* 强制块级化，防止一些布局引擎下的高度计算错误 */
    overflow: hidden;
    transition: border-color 0.3s ease;
    background-color: var(--background-color-transparent);
}

/* 内容容器：我们需要给内容包一个 div，方便测量高度 */
.details-content {
    box-sizing: border-box;
    padding: 15px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 鼠标悬停在容器上时的反馈 */
details:hover {
    border-color: var(--primary-color);
}

/* 标题样式（未展开时） */
details summary {
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-color);
    outline: none; /* 去掉点击时的蓝色边框 */
    list-style: none; /* 隐藏原生小三角（部分浏览器） */
    display: flex;
    align-items: center;
}

/* 自定义展开/折叠的小图标（利用伪元素） */
details summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 10px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: var(--primary-color);
}

/* 展开后的图标旋转 */
details[open] summary::before {
    transform: rotate(90deg);
}

/* 展开后的文字颜色 */
details[open] summary {
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 10px;
    color: var(--primary-color);
}

/* 展开状态下的内容样式 */
details[open] .details-content {
    opacity: 1;
    transform: translateY(0);
}