/* ============================================================
   custom-cursor.css — 自定义鼠标指针（独立模块，零依赖）
   配套：assets/js/custom-cursor.js
   ------------------------------------------------------------
   设计：6px 纯白实心点 + 32px 白色细描边圆环（60% 不透明度），
        圆点紧跟、圆环缓动；悬停可交互元素时外圈扩到 56px 并加一层
        极淡的白色填充；点击时外圈瞬间收缩再平滑回位。
        全程 mix-blend-mode: difference —— 白底变黑、黑底变白，
        所以任何背景上都不会失联。没有拖尾、粒子、彩色光效。

   两条结构约定：
   1) 系统指针由 CSS 在**第一帧**就藏掉，不挂在 JS 才加的类上。
      反着写：默认隐藏，JS 只在「该退回系统指针」时加 .cc-off
      （触屏 / 减少动态效果 / 迟迟拿不到坐标 / 脚本挂了）。
   2) 两个节点是 body 直属元素，z-index 取整型上限，页面的黑场转场、
      加载条、跳过链接都压不到它；同时 pointer-events:none，
      不会挡任何点击。
   ============================================================ */

.cc-dot,
.cc-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
  /* 还没拿到坐标时不可见；位置由 JS 逐帧写 transform。
     居中靠 transform 里的 translate(-50%,-50%)，不用负 margin ——
     尺寸变化时不需要再动布局，只走合成层 */
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
}

/* ---------- 圆点：6px 纯白，零延迟 ---------- */
.cc-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  transition: opacity 160ms linear;
}

/* ---------- 外圈：32px 细描边，60% ---------- */
.cc-ring {
  width: 32px;
  height: 32px;
  border: 1px solid #fff;
  transition: width 420ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    height 420ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    background-color 420ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 160ms linear;
}

.cc-dot.is-on {
  opacity: 1;
}

.cc-ring.is-on {
  opacity: 0.6;
}

/* 悬停可交互元素：外圈放大 + 一层几乎看不出的白色填充 */
.cc-ring.is-on.is-hot {
  width: 56px;
  height: 56px;
  background: rgb(255 255 255 / 0.08);
}

/* 按下：先快速收一下，松手后按上面 420ms 的曲线平滑回到原尺寸 */
.cc-ring.is-on.is-press {
  width: 20px;
  height: 20px;
  transition-duration: 90ms;
}

.cc-ring.is-on.is-hot.is-press {
  width: 42px;
  height: 42px;
}

/* ---------- 隐藏系统指针 ---------- */
/* 样式表是渲染阻塞的，所以这条在文档第一帧就生效，不需要等 JS。
   触屏 / 减少动态效果不进这个媒体查询，系统指针原样保留 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.cc-off),
  html:not(.cc-off) * {
    cursor: none !important;
  }
}

/* 兜底：这些环境下不要出现两个指针 */
@media (hover: none), (pointer: coarse) {
  .cc-dot,
  .cc-ring {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-dot,
  .cc-ring {
    display: none !important;
  }
}