/* ═══════════════════════════════════════════════════════════
   CUSTOM CURSOR COMPONENT
   Estrutura, animações e estados de hover/view do cursor
   ═══════════════════════════════════════════════════════════ */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: normal;
}

.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(49, 121, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--dur-base) var(--ease-smooth),
              height var(--dur-base) var(--ease-smooth),
              border-color var(--dur-base) var(--ease-smooth),
              opacity var(--dur-base) var(--ease-smooth);
}

.cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cursor__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-content);
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-smooth);
}

/* Cursor states */
.cursor--hover .cursor__ring {
  width: 60px;
  height: 60px;
  border-color: var(--color-primary);
  background: rgba(49, 121, 255, 0.1);
}

.cursor--view .cursor__ring {
  width: 80px;
  height: 80px;
  border: none;
  background: var(--color-primary);
}

.cursor--view .cursor__label {
  opacity: 1;
}