/* ============================================================================
   cursor.css — 站点全局自定义光标（Google Design 风格）
   ============================================================================
   - 单圆 + exclusion 混色 + 磁吸撑满元素
   - 24px 白圆 + 1px 描边；hover 小元素时磁吸撑满（chip），hover 大元素时放大到 40px
   - 触屏 / prefers-reduced-motion 自动回退到系统光标
   - HTML 仅需在 </body> 之前引入：
       <link rel="stylesheet" href="/assets/shell/cursor.css">
       <script src="/assets/shell/cursor.js" defer></script>
   ============================================================================ */

.cursor-google{
  position:fixed;top:0;left:0;width:24px;height:24px;border-radius:420px;
  background:#fff;border:1px solid rgba(0,0,0,.85);
  mix-blend-mode:exclusion;
  pointer-events:none;z-index:9999;
  transform:translate3d(-50%,-50%,0);
  opacity:0;will-change:transform,width,height;
  transition:width .12s ease-out,height .2s ease-out,opacity .2s ease-out,
             border-radius .15s ease-out,border-color .15s ease-out;
}
.cursor-google.is-active{border-color:rgba(0,0,0,0)}   /* 放大/吸附时去掉描边 */
.cursor-google.is-checked{border-radius:8px}            /* 接近方形的元素 → 圆角矩形 */

/* 隐藏系统箭头（光标接管）。注意：触屏 / 减弱动画场景的回退在下面覆盖。 */
html{cursor:none}
a,button,input,label,textarea,select{cursor:none}

/* 触屏设备没鼠标，回退系统箭头 */
@media (hover:none),(pointer:coarse){
  html,a,button,input,label,textarea,select{cursor:auto!important}
  .cursor-google{display:none!important}
}

/* 用户偏好减弱动画：直接停掉光标（避免动 + 兜底系统箭头） */
@media (prefers-reduced-motion:reduce){
  .cursor-google{display:none!important}
  html,a,button,input,label,textarea,select{cursor:auto!important}
}