/* 
 * IceCursor 冰雪光标样式表
 * 适配 JavaScript: IceCursor 类
 * 风格：淡蓝白、纯净、柔和
 */

/* ================== 基础容器 ================== */
/* 隐藏默认光标 (可选，如果你想保留系统箭头，把这里删掉) */
body {
  cursor: default;
}
/* 给可点击元素加上手型 (虽然隐藏了，但保留逻辑) */
a, button, .pointer {
  cursor: pointer;
}

/* 光标主容器 - 跟随鼠标 */
#ice-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  pointer-events: none; /* 极其重要：防止光标挡住点击 */
  z-index: 99999;       /* 最高层级 */
  transform: translate(-50%, -50%); /* 中心对齐 */
  transition: opacity 0.3s ease, transform 0.2s ease-out;
}

/* 隐藏状态 (移出页面时) */
#ice-cursor.hidden {
  opacity: 0;
}

/* ================== 光标主体构造 ================== */

/* 1. 外部柔和光晕 (淡蓝色半透明) */
.cursor-main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  /* 冰雪蓝背景，极低透明度 */
  background: rgba(87, 161, 243, 0.15);
  /* 细微的边框 */
  border: 1px solid rgba(87, 161, 243, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  backdrop-filter: blur(2px); /* 磨砂感 */
}

/* 2. 内部核心 (纯白亮点) */
.cursor-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* 核心发光 */
  box-shadow: 0 0 8px rgba(87, 161, 243, 0.8);
}

/* ================== 交互状态 ================== */

/* 悬停状态 (Hover) - 变大，颜色加深 */
#ice-cursor.hover .cursor-main {
  width: 36px;
  height: 36px;
  background: rgba(87, 161, 243, 0.1);
  border-color: rgba(87, 161, 243, 0.6);
}

#ice-cursor.hover .cursor-core {
  width: 8px;
  height: 8px;
  background: #A3D0FF; /* 核心变蓝 */
}

/* 点击状态 (Active) - 收缩 */
#ice-cursor.active .cursor-main {
  width: 18px;
  height: 18px;
  background: rgba(87, 161, 243, 0.4);
}

/* ================== 特效元素 ================== */

/* 拖尾粒子 / 碎冰效果 */
.ice-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 99998;
  opacity: 0;
  background: #ffffff;
  box-shadow: 0 0 4px #A3D0FF;
  /* 动画由 JS 控制 requestAnimationFrame，此处只定义基础样式 */
}

/* 点击时的水波纹涟漪 */
.ice-ripple {
  position: fixed;
  border: 2px solid #57A1F3; /* 主色调蓝 */
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  opacity: 0;
  box-sizing: border-box;
}

/* ================== 移动端适配 ================== */
@media (hover: none) {
  #ice-cursor, .ice-particle, .ice-ripple {
    display: none !important; /* 触摸设备完全隐藏 */
  }
  
  body {
    cursor: auto !important; /* 恢复系统默认 */
  }
}
#page-header #site-title,
#page-header #site-subtitle,
#page-header #post-info .post-title {
    color: #1C5FAC !important;  /* 深海蓝 */
    /* 关键：加一圈白色光晕描边，让文字从背景中浮现出来，立体感更强 */
    text-shadow: 2px 2px 0px #ffffff, -1px -1px 0 #ffffff, 0 0 10px rgba(255,255,255,0.5) !important;
    font-weight: 900 !important; /* 加粗一点，更醒目 */
}

/* 2. 把标题下面的元信息(日期、浏览量)改成深灰色 */
#page-header #post-info #post-meta,
#page-header #post-info #post-meta a,
#page-header #post-info #post-meta i {
    color: #4a5e75 !important;  /* 灰蓝色，清晰且不刺眼 */
    text-shadow: 0 0 2px #ffffff !important; /* 微弱白边防止重叠 */
}

/* 3. 修复左上角的博客名 (如果有显示的话) */
#page-header .site-name {
    color: #1C5FAC !important;
    text-shadow: 1px 1px 0 #fff !important;
}