/* ==========================================================================
   Component: Cursor Stalker (GSAP) — PC のみ
   ========================================================================== */

.c-cursor-stalker {
  display: none;
}

@media (min-width: 768px) and (pointer: fine) {
  html.cdg-cursor-stalker .c-cursor-stalker {
    display: block;
  }

  /* リンク・ボタン等の cursor: pointer を含め、デフォルトカーソルを非表示 */
  html.cdg-cursor-stalker,
  html.cdg-cursor-stalker * {
    cursor: none !important;
  }

  html.cdg-cursor-stalker input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]),
  html.cdg-cursor-stalker textarea,
  html.cdg-cursor-stalker select,
  html.cdg-cursor-stalker [contenteditable="true"] {
    cursor: text !important;
  }
}

.c-cursor-stalker__dot,
.c-cursor-stalker__ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  will-change: transform;
}

.c-cursor-stalker__dot {
  z-index: 10002;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary-dark);
}

.c-cursor-stalker__ring {
  z-index: 10001;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 187, 0.5);
  transition:
    width 0.25s ease,
    height 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    opacity 0.2s ease;
}

@media (min-width: 768px) and (pointer: fine) {
  html.cdg-cursor-stalker.is-cursor-hover .c-cursor-stalker__ring {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 187, 0.5);
  }

  html.cdg-cursor-stalker.is-cursor-hidden .c-cursor-stalker__dot,
  html.cdg-cursor-stalker.is-cursor-hidden .c-cursor-stalker__ring {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.cdg-cursor-stalker,
  html.cdg-cursor-stalker body {
    cursor: auto;
  }

  html.cdg-cursor-stalker .c-cursor-stalker {
    display: none !important;
  }
}