/* 
 * Moonlight Cursor 月光光标效果
 * 
 * 这是一个自定义的光标系统，用CSS和少量JavaScript（未包含在此）实现
 * 主要功能：
 * 1. 替换默认光标为月光主题的圆形光标
 * 2. 悬停在不同元素上时有不同的视觉效果
 * 3. 包含光晕、月牙、光环等装饰元素
 * 4. 支持点击动画和拖尾效果
 * 5. 为不同交互状态提供不同的光标图标
 * 6. 响应式设计，在触摸设备上自动隐藏
 */

/* 主光标容器 - 固定在视口中，跟随鼠标移动 */
#moonlight-cursor {
    position: fixed;
    /* 固定定位，不随页面滚动 */
    width: 16px;
    /* 基础宽度 */
    height: 16px;
    /* 基础高度 */
    pointer-events: none;
    /* 防止光标元素拦截鼠标事件 */
    z-index: 9999;
    /* 确保显示在最顶层 */
    transform: translate(-50%, -50%);
    /* 居中定位 */
    transition: transform 0.1s ease;
    /* 移动时的平滑过渡 */
}

/* 隐藏状态的光标 */
#moonlight-cursor.hidden {
    opacity: 0;
    /* 完全透明 */
    transition: opacity 0.3s ease;
    /* 淡出过渡效果 */
}

/* 月亮圆盘 - 光标的基础圆形部分 */
.moon-disc {
    position: absolute;
    /* 绝对定位 */
    width: 100%;
    /* 充满容器 */
    height: 100%;
    /* 充满容器 */
    background: rgba(255, 105, 180, 0.2);
    /* 半透明粉色背景 */
    border-radius: 50%;
    /* 圆形 */
    box-shadow: 0 0 8px #ff1493,
        /* 外发光效果 */
        inset 0 0 5px #ff69b4;
    /* 内发光效果 */
    transition: all 0.3s ease;
    /* 所有属性的过渡效果 */
}

/* 月牙形状 - 月亮上的凹陷部分 */
.moon-crescent {
    position: absolute;
    /* 绝对定位 */
    width: 60%;
    /* 相对宽度 */
    height: 60%;
    /* 相对高度 */
    left: 10%;
    /* 水平位置 */
    top: 20%;
    /* 垂直位置 */
    background: transparent;
    /* 透明背景 */
    border-radius: 50%;
    /* 圆形 */
    box-shadow: inset 3px -3px 0 0 #ffc0cb;
    /* 内阴影创建月牙效果 */
    transform: rotate(45deg);
    /* 旋转45度 */
    transition: all 0.3s ease;
    /* 所有属性的过渡效果 */
}

/* 光晕效果 - 围绕月亮的发光效果 */
.moon-glow {
    position: absolute;
    /* 绝对定位 */
    width: 140%;
    /* 比容器大 */
    height: 140%;
    /* 比容器大 */
    left: -20%;
    /* 居中定位 */
    top: -20%;
    /* 居中定位 */
    background: radial-gradient(circle,
            /* 径向渐变 */
            rgba(255, 182, 193, 0.3) 0%,
            /* 中心颜色 */
            transparent 60%);
    /* 边缘透明 */
    border-radius: 50%;
    /* 圆形 */
    opacity: 0.7;
    /* 半透明 */
    transition: opacity 0.5s ease;
    /* 透明度过渡效果 */
}

/* 光环容器 */
.moon-rings {
    position: absolute;
    /* 绝对定位 */
    width: 100%;
    /* 充满容器 */
    height: 100%;
    /* 充满容器 */
}

/* 单个光环 */
.ring {
    position: absolute;
    /* 绝对定位 */
    border-radius: 50%;
    /* 圆形 */
    border-style: solid;
    /* 实线边框 */
    border-color: #ff69b4;
    /* 粉色边框 */
    transform: translate(-50%, -50%);
    /* 居中定位 */
    transition: all 0.3s ease-out;
    /* 所有属性的过渡效果 */
}

/* 第一层光环 */
.ring-1 {
    width: 120%;
    /* 比容器大 */
    height: 120%;
    /* 比容器大 */
    top: 50%;
    /* 垂直居中 */
    left: 50%;
    /* 水平居中 */
    border-width: 1px;
    /* 边框宽度 */
    opacity: 0.5;
    /* 半透明 */
}

/* 第二层光环 */
.ring-2 {
    width: 150%;
    /* 比第一层大 */
    height: 150%;
    /* 比第一层大 */
    top: 50%;
    /* 垂直居中 */
    left: 50%;
    /* 水平居中 */
    border-width: 1px;
    /* 边框宽度 */
    opacity: 0.3;
    /* 更透明 */
}

/* 第三层光环 */
.ring-3 {
    width: 180%;
    /* 最大的光环 */
    height: 180%;
    /* 最大的光环 */
    top: 50%;
    /* 垂直居中 */
    left: 50%;
    /* 水平居中 */
    border-width: 1px;
    /* 边框宽度 */
    opacity: 0.2;
    /* 最透明 */
}

/* 悬停状态下的光标样式 */
#moonlight-cursor.hover .moon-disc {
    background: rgba(255, 20, 147, 0.3);
    /* 更亮的背景 */
    box-shadow: 0 0 10px #ff1493,
        /* 更强的外发光 */
        inset 0 0 8px #ff1493;
    /* 更强的内发光 */
}

#moonlight-cursor.hover .moon-crescent {
    box-shadow: inset 3px -3px 0 0 #ff69b4;
    /* 更亮的月牙 */
}

/* 悬停时光环的动画效果 */
#moonlight-cursor.hover .ring-1 {
    opacity: 0.8;
    /* 更明显 */
    transform: translate(-50%, -50%) scale(1.1);
    /* 轻微放大 */
}

#moonlight-cursor.hover .ring-2 {
    opacity: 0.6;
    /* 更明显 */
    transform: translate(-50%, -50%) scale(1.1);
    /* 轻微放大 */
}

#moonlight-cursor.hover .ring-3 {
    opacity: 0.4;
    /* 更明显 */
    transform: translate(-50%, -50%) scale(1.1);
    /* 轻微放大 */
}

/* 点击激活状态 */
#moonlight-cursor.active {
    transform: translate(-50%, -50%) scale(0.8);
    /* 点击时缩小 */
}

/* 水晶拖尾效果 */
.crystal-trail {
    position: fixed;
    /* 固定定位 */
    pointer-events: none;
    /* 不拦截鼠标事件 */
    z-index: 9998;
    /* 仅次于主光标 */
    opacity: 0;
    /* 默认透明 */
    transition: opacity 0.2s ease;
    /* 淡入淡出效果 */
    transform-origin: center;
    /* 变换中心点 */
    background: linear-gradient(to bottom, #ffb6c1, #ff1493);
    /* 渐变背景 */
    box-shadow: 0 0 5px rgba(255, 20, 147, 0.8);
    /* 发光效果 */
}

/* 水晶爆发效果 */
.crystal-burst {
    position: absolute;
    /* 绝对定位 */
    pointer-events: none;
    /* 不拦截鼠标事件 */
    z-index: 9997;
    /* 层级 */
    transform-origin: center;
    /* 变换中心点 */
    opacity: 0.8;
    /* 半透明 */
    filter: drop-shadow(0 0 3px currentColor);
    /* 发光效果 */
}

/* 冲击波动画 */
.shockwave {
    position: absolute;
    /* 绝对定位 */
    border-radius: 50%;
    /* 圆形 */
    border: 1px solid #ff1493;
    /* 粉色边框 */
    transform: translate(-50%, -50%);
    /* 居中 */
    pointer-events: none;
    /* 不拦截鼠标事件 */
    z-index: 9996;
    /* 层级 */
    opacity: 0.8;
    /* 半透明 */
    transition: all 0.3s ease-out;
    /* 过渡效果 */
}

/* 涟漪效果 */
.ripple-effect {
    position: absolute;
    /* 绝对定位 */
    width: 0;
    /* 初始大小 */
    height: 0;
    /* 初始大小 */
    border-radius: 50%;
    /* 圆形 */
    background: rgba(255, 20, 147, 0.2);
    /* 半透明粉色 */
    transform: translate(-50%, -50%);
    /* 居中 */
    pointer-events: none;
    /* 不拦截鼠标事件 */
    z-index: 9995;
    /* 层级 */
    animation: ripple 0.8s ease-out forwards;
    /* 涟漪动画 */
}

/* 涟漪动画关键帧 */
@keyframes ripple {
    to {
        width: 100px;
        /* 放大到100px */
        height: 100px;
        /* 放大到100px */
        opacity: 0;
        /* 淡出 */
    }
}

/* 水晶脉动动画关键帧 */
@keyframes crystal-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    /* 初始状态 */
    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    /* 放大变亮 */
    100% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    /* 恢复 */
}

/* 默认光标替换 */
html {
    cursor: url('/img/normal.cur'), default !important;
    /* 自定义光标，回退到默认 */
}

/* 链接状态光标 */
a,
[href],
[data-hover] {
    cursor: url('/img/link.cur'), pointer !important;
    /* 链接光标 */
}

/* 文本输入状态光标 */
input,
textarea,
[contenteditable] {
    cursor: url('/img/text.cur'), text !important;
    /* 文本光标 */
}

/* 可拖动元素光标 */
[draggable="true"] {
    cursor: url('/img/move.cur'), move !important;
    /* 移动光标 */
}

/* 禁用状态光标 */
[disabled] {
    cursor: url('/img/unavailable.cur'), not-allowed !important;
    /* 禁用光标 */
}

/* 忙碌状态光标 */
.busy-cursor {
    cursor: url('/img/busy.ani'), wait !important;
    /* 等待光标(动画) */
}

/* 精确选择光标 */
.precision-cursor {
    cursor: url('/img/precision.cur'), crosshair !important;
    /* 十字光标 */
}

/* 帮助状态光标 */
.help-cursor {
    cursor: url('/img/help.cur'), help !important;
    /* 帮助光标 */
}

/* 触摸设备适配 - 隐藏自定义光标 */
@media (hover: none) {

    #moonlight-cursor,
    .crystal-trail {
        display: none !important;
        /* 触摸设备上隐藏 */
    }

    body {
        cursor: default !important;
        /* 使用系统默认光标 */
    }
}

/* ===== 通用毛玻璃基础样式 ===== */
.card-widget {
    background: linear-gradient(-45deg, #e2c1ffee, #ffb6e6ee, #c9a9ffee, #ffb3fdee) !important;
}

/* 个人信息Follow me按钮 */
#aside-content>.card-widget.card-info>#card-info-btn {
    background-color: #7019c2f8;
    border-radius: 8px;
}

/* ===== 动画定义 ===== */
@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===== 暗夜模式适配 ===== */
[data-theme="dark"] .card-widget {
    background: rgba(45, 10, 61, 0.7) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/*导航栏*/
.nav-fixed>#nav {
    background: linear-gradient(-45deg, #e0c1fa55, #fdbde755, #cfb5fc55, #fcbffa55) !important;
    backdrop-filter: blur(10px);
}

[data-theme="dark"] .nav-fixed>#nav {
    background: rgba(45, 10, 61, 0.7) !important;
    backdrop-filter: blur(10px);
}

/*文章页面*/
.layout>#post {
    background: linear-gradient(-45deg, #e0bcffdd, #ffd3f0dd, #d5bdffdd, #ffdafedd) !important;
}

[data-theme=dark] .layout>#post {
    background: rgba(45, 10, 61, 0.7) !important;
}

/*主页文章轮播页面*/
#recent-posts>.recent-post-item {
    background: linear-gradient(-45deg, #e0bcffdd, #ffd3f0dd, #d5bdffdd, #ffdafedd) !important;
}

[data-theme=dark] #recent-posts>.recent-post-item {
    background: rgba(45, 10, 61, 0.7) !important;
}

/*主页文章列表页面卡片*/
#recent-posts>.recent-post-items .recent-post-item {
    background: linear-gradient(-45deg, #e0bcffdd, #ffd3f0dd, #d5bdffdd, #ffdafedd) !important;
}

[data-theme=dark] #recent-posts>.recent-post-items .recent-post-item {
    background: rgba(45, 10, 61, 0.7) !important;
}

/*分类页面*/
.layout>#page {
    background: linear-gradient(-45deg, #e0bcffdd, #ffd3f0dd, #d5bdffdd, #ffdafedd);
}

[data-theme=dark] .layout>#page {
    background: rgba(45, 10, 61, 0.7) !important;
}

/*归档页面*/
.layout>#archive {
    background: linear-gradient(-45deg, #e0bcffdd, #ffd3f0dd, #d5bdffdd, #ffdafedd) !important;
}

[data-theme=dark] .layout>#archive {
    background: rgba(45, 10, 61, 0.7) !important;
}

/*分类点进去的页面*/
.layout>#category {
    background: linear-gradient(-45deg, #e0bcffdd, #ffd3f0dd, #d5bdffdd, #ffdafedd) !important;
}

[data-theme=dark] .layout>#category {
    background: rgba(45, 10, 61, 0.7) !important;
}

/*标签点进去的页面*/
.layout>#tag {
    background: linear-gradient(-45deg, #e0bcffdd, #ffd3f0dd, #d5bdffdd, #ffdafedd) !important;
}

[data-theme=dark] .layout>#tag {
    background: rgba(45, 10, 61, 0.7) !important;
}

.layout.hide-aside {
    max-width: 1600px;
}

/* 设置黑夜的时候，社交按钮为白色 */
[data-theme=dark] .social-icon i {
    color: rgba(188, 188, 188) !important;
    /* 设置为白色 */
}