/* ============================================================
   ADFLUENCE — Custom Framer-Style Cursor
   ============================================================ */

/* Hide the system cursor globally */
*, *::before, *::after { cursor: none !important; }

/* ── Cursor dot (snaps instantly) ── */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  will-change: transform;
}

/* ── Cursor ring (lags behind) ── */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.35s ease,
    background 0.35s ease,
    opacity 0.25s ease;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Cursor label (shown in "view" state) ── */
.cursor-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  user-select: none;
  position: absolute;
}

/* ════════════════════════════════
   STATE: default (hidden until mouse moves)
   ════════════════════════════════ */
.cursor-dot.hidden,
.cursor-ring.hidden {
  opacity: 0;
}

/* ════════════════════════════════
   STATE: hovering a link / button
   ════════════════════════════════ */
body.cursor--hover .cursor-dot {
  width: 6px; height: 6px;
  background: #2563FF;
}
body.cursor--hover .cursor-ring {
  width: 52px; height: 52px;
  border-color: rgba(37, 99, 255, 0.6);
  background: rgba(37, 99, 255, 0.08);
}

/* ════════════════════════════════
   STATE: hovering a card (expand + blue tint)
   ════════════════════════════════ */
body.cursor--card .cursor-dot {
  width: 6px; height: 6px;
  background: #2563FF;
}
body.cursor--card .cursor-ring {
  width: 64px; height: 64px;
  border-color: rgba(37, 99, 255, 0.5);
  background: rgba(37, 99, 255, 0.07);
}

/* ════════════════════════════════
   STATE: "View" label on case study cards
   ════════════════════════════════ */
body.cursor--view .cursor-dot {
  width: 0; height: 0;
  opacity: 0;
}
body.cursor--view .cursor-ring {
  width: 80px; height: 80px;
  border-color: transparent;
  background: rgba(37, 99, 255, 0.9);
  backdrop-filter: blur(8px);
}
body.cursor--view .cursor-label {
  opacity: 1;
}

/* ════════════════════════════════
   STATE: clicking / mousedown
   ════════════════════════════════ */
body.cursor--click .cursor-dot {
  width: 12px; height: 12px;
  background: #2563FF;
}
body.cursor--click .cursor-ring {
  width: 28px; height: 28px;
  border-color: rgba(37, 99, 255, 0.9);
  background: rgba(37, 99, 255, 0.15);
}

/* ════════════════════════════════
   STATE: hovering text / paragraphs
   ════════════════════════════════ */
body.cursor--text .cursor-dot {
  width: 3px; height: 28px;
  border-radius: 2px;
  background: #ffffff;
}
body.cursor--text .cursor-ring {
  width: 1px; height: 1px;
  opacity: 0;
}

/* ════════════════════════════════
   STATE: on dark nav / hidden elements
   ════════════════════════════════ */
body.cursor--hidden .cursor-dot,
body.cursor--hidden .cursor-ring {
  opacity: 0;
}

/* ── Disable on touch devices ── */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot,
  .cursor-ring { display: none !important; }
  *, *::before, *::after { cursor: auto !important; }
}