/* =========================================================
   CODERN
   Custom Cursor System
   ========================================================= */


/* ---------------------------------------------------------
   Cursor Ring
   --------------------------------------------------------- */

.codern-cursor-ring {
  position: fixed;

  top: 0;
  left: 0;

  width: 32px;
  height: 32px;

  z-index: 9999;

  pointer-events: none;

  border: 2px solid #ffc107;

  border-radius: 50%;

  background: transparent;

  opacity: 0;

  transform:
    translate3d(-50%, -50%, 0)
    scale(1);

  will-change:
    transform,
    opacity;

  transition:
    opacity 150ms ease-out,
    transform 120ms ease-out;

  /*
   * Prevent accidental selection or interaction.
   */
  user-select: none;

  /*
   * Keep the cursor above normal UI,
   * but below emergency/system-level overlays.
   */
  isolation: isolate;
}


/* ---------------------------------------------------------
   Cursor Dot
   --------------------------------------------------------- */

.codern-cursor-dot {
  position: fixed;

  top: 0;
  left: 0;

  width: 6px;
  height: 6px;

  z-index: 10000;

  pointer-events: none;

  border-radius: 50%;

  background: #ffc107;

  opacity: 0;

  transform:
    translate3d(-50%, -50%, 0);

  will-change:
    transform,
    opacity;

  transition:
    opacity 100ms ease-out;

  box-shadow:
    0 0 8px rgba(255, 193, 7, 0.7),
    0 0 18px rgba(255, 193, 7, 0.3);

  user-select: none;
}


/* ---------------------------------------------------------
   Interactive State
   --------------------------------------------------------- */

.codern-cursor-ring.is-interactive {
  border-color: #ffffff;

  background:
    rgba(255, 193, 7, 0.06);

  box-shadow:
    0 0 18px rgba(255, 193, 7, 0.16);

  /*
   * Scale is primarily controlled by JS.
   * This fallback ensures a visual state
   * even if JS temporarily pauses.
   */
}


/* ---------------------------------------------------------
   Optional Cursor Hover Text
   --------------------------------------------------------- */

.codern-cursor-ring[data-cursor-label]::after {
  content: attr(data-cursor-label);

  position: absolute;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%)
    scale(0.75);

  color: #ffffff;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.05em;

  white-space: nowrap;

  opacity: 0;

  transition:
    opacity 150ms ease,
    transform 150ms ease;
}


/*
 * Only show label when explicitly activated.
 */

.codern-cursor-ring.show-label::after {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}


/* ---------------------------------------------------------
   Hide Native Cursor
   --------------------------------------------------------- */

/*
 * Applied only after the custom cursor
 * has successfully initialized.
 */

html.codern-custom-cursor,
html.codern-custom-cursor body {
  cursor: none;
}


html.codern-custom-cursor a,
html.codern-custom-cursor button,
html.codern-custom-cursor input,
html.codern-custom-cursor textarea,
html.codern-custom-cursor select,
html.codern-custom-cursor [role="button"] {
  cursor: none;
}


/* ---------------------------------------------------------
   Touch / Coarse Pointer
   --------------------------------------------------------- */

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

  html.codern-custom-cursor,
  html.codern-custom-cursor body,
  html.codern-custom-cursor a,
  html.codern-custom-cursor button,
  html.codern-custom-cursor input,
  html.codern-custom-cursor textarea,
  html.codern-custom-cursor select,
  html.codern-custom-cursor [role="button"] {
    cursor: auto;
  }
}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .codern-cursor-ring,
  .codern-cursor-dot {
    transition: none !important;
  }
}

/* =========================================================
   LIGHT MODE
   ---------------------------------------------------------
   Dark mode remains completely unchanged.
   Light mode changes the cursor accent:
   Yellow → Purple
========================================================= */

[data-theme="light"] .codern-cursor-ring {
  border-color: var(
    --brand-primary,
    #8b5cf6
  );
}


[data-theme="light"] .codern-cursor-dot {
  background:
    var(--brand-primary,
    #8b5cf6);

  box-shadow:
    0 0 8px
    rgba(139, 92, 246, 0.70),

    0 0 18px
    rgba(139, 92, 246, 0.30);
}


/* =========================================================
   LIGHT MODE — INTERACTIVE CURSOR
========================================================= */

[data-theme="light"]
.codern-cursor-ring.is-interactive {
  border-color: #7c3aed;

  background:
    rgba(139, 92, 246, 0.06);

  box-shadow:
    0 0 18px
    rgba(139, 92, 246, 0.16);
}


/* =========================================================
   LIGHT MODE — CURSOR LABEL
========================================================= */

[data-theme="light"]
.codern-cursor-ring[data-cursor-label]::after {
  color: #17142b;
}