/**
 * CursorDot — Minimal Apple-like Cursor Styles
 *
 * JS sets `transform` and `background` directly each frame.
 * CSS only handles: size, shape, visibility, shadow, transitions.
 */


/* ─────────────────────────────────────────────
   Hide Native Cursor
   ───────────────────────────────────────────── */

.custom-cursor-enabled {
  cursor: none !important;
}

.custom-cursor-enabled a,
.custom-cursor-enabled button,
.custom-cursor-enabled [role="button"],
.custom-cursor-enabled input,
.custom-cursor-enabled select,
.custom-cursor-enabled textarea,
.custom-cursor-enabled [tabindex] {
  cursor: none !important;
}

@media (pointer: coarse) {
  .custom-cursor-enabled,
  .custom-cursor-enabled a,
  .custom-cursor-enabled button,
  .custom-cursor-enabled [role="button"],
  .custom-cursor-enabled input,
  .custom-cursor-enabled select,
  .custom-cursor-enabled textarea,
  .custom-cursor-enabled [tabindex] {
    cursor: auto !important;
  }
}


/* ─────────────────────────────────────────────
   Cursor Dot
   ───────────────────────────────────────────── */

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;

  /* Size */
  width: 14px;
  height: 14px;

  /* Perfect circle */
  border-radius: 50%;
  border: none;

  /* Default color (JS overrides via style.background) */
  background: rgb(230, 78, 54);

  /* Minimal shadow */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

  /* Hidden initially */
  opacity: 0;
  visibility: hidden;

  /* Transitions for size/visibility changes only (not transform/background — JS handles those) */
  transition:
    width 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    height 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 150ms ease-out,
    visibility 150ms ease-out,
    box-shadow 200ms ease-out;

  /* Performance */
  contain: layout style;
  will-change: transform;
}


/* ─────────────────────────────────────────────
   Visible State
   ───────────────────────────────────────────── */

.cursor-dot.is-visible {
  opacity: 1 !important;
  visibility: visible;
}


/* ─────────────────────────────────────────────
   Hover State (on interactive elements)
   ───────────────────────────────────────────── */

.cursor-dot.is-hovering {
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


/* ─────────────────────────────────────────────
   Reduced Motion
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cursor-dot {
    transition: none;
  }
}


/* ─────────────────────────────────────────────
   Touch Devices
   ───────────────────────────────────────────── */

@media (pointer: coarse), (hover: none) {
  .cursor-dot {
    display: none !important;
  }
}