/* 特色光标：瞄准环 + 中心点（canvas 绘制）+ 尾焰粒子层 + 悬停标签
   用 canvas 而不是 DOM 元素做动画：每帧只改像素，不触发样式重算与布局。 */

.custom-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:95;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s linear;
  /* ⚠️ 这里**不能**用 contain:strict（它等于 size layout paint style）。
     这个元素是"整屏大小、用 transform 把原点挪到指针上"的，
     而画布和 .cursor-label 都是**以指针为中心**画的 ——
     也就是说它们有一半落在元素自己的框外面。
     contain:paint 会把框外的部分全部裁掉，用户看到的就是
     "宠物只剩右下角一小块"、"VIEW 标签只剩 EW"。
     2026-09-20 用户第三次反馈光标显示不全，前两次误判成"图案太暗"、
     还为此整体提亮过一次；真正的原因就是这一条。
     只留 layout/style：不会裁掉任何东西，也不影响性能
     （元素每帧只动 transform，本来就独占一层）。 */
  contain:layout style;
}
.custom-cursor.is-visible{opacity:1}
.custom-cursor canvas{display:block;position:absolute;inset:0;width:100%;height:100%}

/* 尾焰单独一层，压在界面元素之下、画面之上 */
.cursor-flame{
  position:fixed;
  left:0;
  top:0;
  z-index:94;
  pointer-events:none;
  display:block;
}

/* ---------- 锚点校准模式（?calibrate=1）----------
   在**真实鼠标位置**画一个十字，方便实拍对齐：
   把光标图案里"应该表示点击位置"的那个点对准十字中心，
   读出差值后写成 ?anchorX= / ?anchorY=（单位是源图像素）。
   十字与所有装饰层都不接收指针事件，绝不影响点击。 */
.cursor-crosshair{
  position:fixed;
  left:0;top:0;
  width:0;height:0;
  z-index:9999;
  pointer-events:none;
  will-change:transform;
}
.cursor-crosshair i,
.cursor-crosshair b{
  position:absolute;
  background:rgba(217,223,114,.95);
  box-shadow:0 0 3px rgba(0,0,0,.8);
  font-style:normal;
}
/* 横线 / 竖线，各留中心一点空隙 */
.cursor-crosshair i{
  left:-11px;top:-0.5px;
  width:22px;height:1px;
}
.cursor-crosshair b{
  left:-0.5px;top:-11px;
  width:1px;height:22px;
}
/* 中心小方框，标出精确落点 */
.cursor-crosshair::after{
  content:'';
  position:absolute;
  left:-3px;top:-3px;
  width:6px;height:6px;
  border:1px solid rgba(217,223,114,.95);
  box-shadow:0 0 3px rgba(0,0,0,.8);
}

.cursor-label{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%,-50%);
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--black-main);
  background:var(--accent-bright);
  padding:3px 7px 2px;
  border-radius:2px;
  white-space:nowrap;
  opacity:0;
  scale:.8;
  transition:opacity .18s var(--ease-out),scale .18s var(--ease-out);
}
.custom-cursor.is-label .cursor-label{opacity:1;scale:1}

/* 命中图片时标签变成箭头，不要文字底色 */
.custom-cursor.is-image .cursor-label{
  background:none;
  color:var(--accent-bright);
  font-size:15px;
  letter-spacing:0;
  padding:0;
  text-shadow:0 0 14px rgba(217,223,114,.7);
}

/* 悬停可点元素时图案会放大 —— 缩放由 JS 控制（state.scale，见 cursor.js）。
   ⚠️ 这里原来还挂着两条"外发光"（canvas 的 drop-shadow，悬停时加一圈黄绿光晕），
   2026-09-20 用户说「鼠标有些发白，是不是怕看不清加了光？可以去掉」，已删除。
   不要再加回来：素材本身有金边和发光的眼睛，够看清了；
   发光会把图案边缘糊开，看起来就像"发白、没对焦"。 */

/* 隐藏系统指针：只在真的有精细指针且光标启用时 */
body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor summary,
body.has-cursor [role="button"]{cursor:none}

@media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse){
  .custom-cursor,
  .cursor-flame{display:none!important}
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button{cursor:auto}
}