/* ============================================
   水墨风格自定义光标
   ============================================ */

@media (pointer: fine) {
  html, body { cursor: none; }
  a, button, .tag, .atlas-card, .atlas-tab, .hero-btn, .ending-btn,
  .atlas-entry-btn, .next-scene-btn, .skip-btn, .audio-toggle,
  .detail-close, .atlas-close, .atlas-grid-wrap, input, textarea, select {
    cursor: none;
  }
}

.ink-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* 内核：小墨点 */
.ink-cursor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(40, 25, 10, 0.95) 0%,
    rgba(40, 25, 10, 0.7) 70%,
    transparent 100%);
  box-shadow: 0 0 4px rgba(40, 25, 10, 0.4);
  transition: transform 0.18s ease, background 0.25s, opacity 0.25s;
}

/* 外圈：金色光晕（带缓动拖尾） */
.ink-cursor-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.2px solid rgba(201, 169, 110, 0.7);
  background: radial-gradient(circle,
    rgba(232, 184, 94, 0.10) 0%,
    rgba(201, 169, 110, 0.05) 60%,
    transparent 100%);
  box-shadow:
    inset 0 0 8px rgba(232, 184, 94, 0.18),
    0 0 10px rgba(201, 169, 110, 0.18);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s, opacity 0.3s;
}

/* hover 在可点击元素上：光晕放大，墨点变金 */
.ink-cursor.hover .ink-cursor-ring {
  width: 56px;
  height: 56px;
  border-color: rgba(232, 184, 94, 0.95);
  background: radial-gradient(circle,
    rgba(232, 184, 94, 0.18) 0%,
    rgba(201, 169, 110, 0.08) 60%,
    transparent 100%);
}

.ink-cursor.hover .ink-cursor-dot {
  transform: scale(1.4);
  background: radial-gradient(circle,
    rgba(184, 69, 62, 0.95) 0%,
    rgba(184, 69, 62, 0.6) 70%,
    transparent 100%);
}

/* 点击瞬间：墨点缩小 */
.ink-cursor.click .ink-cursor-dot {
  transform: scale(0.6);
}
.ink-cursor.click .ink-cursor-ring {
  width: 20px;
  height: 20px;
  opacity: 0.4;
}

/* 拖拽：变作十字握 */
.ink-cursor.dragging .ink-cursor-ring {
  width: 40px;
  height: 40px;
  border-style: dashed;
}

/* 离开窗口时隐藏 */
.ink-cursor.hidden {
  opacity: 0;
}

/* 点击涟漪 */
.ink-ripple {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 169, 110, 0.7);
  transform: translate(-50%, -50%);
  animation: inkRipple 0.6s ease-out forwards;
}

@keyframes inkRipple {
  0%   { width: 12px; height: 12px; opacity: 0.8; }
  100% { width: 70px; height: 70px; opacity: 0; }
}