/* assets/css/components/cursor-buddy.css */

.cursor-buddy {
  position: fixed;
  left: 0;
  top: 0;
  width: 60px;
  height: auto;
  z-index: 9999;
  pointer-events: none;

  /* 초기엔 화면 밖 + 안 보이게 */
  transform: translate(-9999px, -9999px);
  opacity: 0;

  /* transform은 계속 바뀌니까 transition 걸면 버벅일 수 있어서
     opacity만 부드럽게 처리 */
  transition: opacity 220ms ease;

  will-change: transform, opacity;
}

/* 보이는 상태 */
.cursor-buddy.is-visible {
  opacity: 1;
}

/* 모바일에서 약간 더 “나타났다 사라짐” 느낌 주고 싶으면(선택)
  scale까지 주려면 wrapper가 필요하지만,
  img 단일 요소로는 transform을 포지션에 쓰고 있어서 scale 섞으면 꼬일 수 있음.
   그래서 여기선 opacity만 안전하게 사용. */

/* 접근성: 모션 싫어하는 사람은 페이드도 끔 */
@media (prefers-reduced-motion: reduce) {
  .cursor-buddy {
    transition: none;
  }
}