/* =============================================================
   CURSOR.CSS
   Custom cursor system — dot + ring + label states
   Mirrors: cursor.js state machine
   ============================================================= */

/* =============================================================
   01. BASE CURSOR ELEMENTS
   ============================================================= */

/* Hide native cursor site-wide when JS has loaded cursor */
body.cursor-ready {
  cursor: none;
}

body.cursor-ready a,
body.cursor-ready button,
body.cursor-ready [role="button"],
body.cursor-ready input,
body.cursor-ready textarea,
body.cursor-ready select,
body.cursor-ready label,
body.cursor-ready .chip,
body.cursor-ready .bento-card,
body.cursor-ready .stat,
body.cursor-ready .transform-card,
body.cursor-ready .transform-featured,
body.cursor-ready .enquiry-pill {
  cursor: none;
}

/* =============================================================
   02. CURSOR DOT — precise, instant
   ============================================================= */

.cursor-dot {
  position:       fixed;
  top:            0;
  left:           0;
  width:          8px;
  height:         8px;
  background:     var(--blue, #1a46c9);
  border-radius:  50%;
  pointer-events: none;
  z-index:        10000;

  /* Instant — no transition lag on dot */
  transform:    translate(-50%, -50%);
  will-change:  transform;

  /* Tiny transitions for state changes only */
  transition:
    width      0.2s var(--ease-spring, cubic-bezier(.16,1,.3,1)),
    height     0.2s var(--ease-spring, cubic-bezier(.16,1,.3,1)),
    opacity    0.2s ease,
    background 0.2s ease;
}

/* =============================================================
   03. CURSOR RING — lagged follower
   ============================================================= */

.cursor-ring {
  position:       fixed;
  top:            0;
  left:           0;
  width:          36px;
  height:         36px;
  border:         1.5px solid rgba(26, 70, 201, 0.45);
  border-radius:  50%;
  pointer-events: none;
  z-index:        9999;

  /* Transforms updated by JS lerp — no CSS transition on position */
  transform:    translate(-50%, -50%);
  will-change:  transform, width, height;

  /* State transitions */
  transition:
    width        0.3s var(--ease-spring, cubic-bezier(.16,1,.3,1)),
    height       0.3s var(--ease-spring, cubic-bezier(.16,1,.3,1)),
    border-color 0.3s ease,
    border-width 0.3s ease,
    border-radius 0.3s var(--ease-spring, cubic-bezier(.16,1,.3,1)),
    opacity      0.25s ease,
    background   0.3s ease;

  /* Label container */
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}

/* =============================================================
   04. CURSOR STATES — applied via body classes (cursor.js)
   ============================================================= */

/* ── DEFAULT ── */
/* dot: 8px blue circle, ring: 36px outline */

/* ── HOVER (links, buttons) ── */
body.cursor-hover .cursor-ring {
  width:        54px;
  height:       54px;
  border-color: var(--blue, #1a46c9);
  border-width: 1.5px;
}

body.cursor-hover .cursor-dot {
  width:      4px;
  height:     4px;
  opacity:    0.6;
}

/* ── CLICK active ── */
body.cursor-click .cursor-ring {
  width:        28px;
  height:       28px;
  border-color: var(--blue, #1a46c9);
  border-width: 2px;
}

body.cursor-click .cursor-dot {
  width:   10px;
  height:  10px;
}

/* ── TEXT (over paragraphs / readable content) ── */
body.cursor-text .cursor-ring {
  width:         3px;
  height:        28px;
  border-radius: 2px;
  border-color:  rgba(26, 70, 201, 0.7);
  background:    rgba(26, 70, 201, 0.7);
  border-width:  0;
}

body.cursor-text .cursor-dot {
  opacity: 0;
}

/* ── CARD (hovering bento/case study cards) ── */
body.cursor-card .cursor-ring {
  width:        72px;
  height:       72px;
  border-color: rgba(26, 70, 201, 0.3);
  border-width: 1px;
}

body.cursor-card .cursor-dot {
  width:   6px;
  height:  6px;
  opacity: 0.8;
}

/* ── LABEL state (VIEW / EXPLORE / PLAY) ── */
body.cursor-label .cursor-ring {
  width:        88px;
  height:       88px;
  border-color: rgba(26, 70, 201, 0.2);
  background:   rgba(26, 70, 201, 0.08);
  border-width: 1px;
}

body.cursor-label .cursor-dot {
  opacity: 0;
}

/* ── DRAG ── */
body.cursor-drag .cursor-ring {
  width:        48px;
  height:       48px;
  border-color: rgba(26, 70, 201, 0.5);
  border-width: 1.5px;
}

/* ── HIDDEN (off screen / input focus) ── */
body.cursor-hidden .cursor-dot,
body.cursor-hidden .cursor-ring {
  opacity: 0;
}

/* =============================================================
   05. CURSOR LABEL TEXT
   ============================================================= */

.cursor-label-text {
  position:      absolute;
  inset:         0;
  display:       flex;
  align-items:   center;
  justify-content: center;

  font-family:   var(--font-sans, "Inter", sans-serif);
  font-size:     9px;
  font-weight:   600;
  letter-spacing: 1.5px;
  color:         var(--blue, #1a46c9);
  text-transform: uppercase;
  white-space:   nowrap;

  opacity:   0;
  transform: scale(0.6);
  transition:
    opacity   0.2s ease,
    transform 0.2s var(--ease-spring, cubic-bezier(.16,1,.3,1));
}

body.cursor-label .cursor-label-text {
  opacity:   1;
  transform: scale(1);
}

/* =============================================================
   06. TOUCH DEVICE — hide entirely
   ============================================================= */

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

  body.cursor-ready {
    cursor: auto;
  }

  body.cursor-ready a,
  body.cursor-ready button,
  body.cursor-ready [role="button"] {
    cursor: pointer;
  }
}