/* ============================================================
   WML Custom Cursor — shared structure for all styles.
   Per-style visuals (size, color, blend) are set inline by JS;
   this file only handles positioning, visibility and the
   builder placeholder. Each cursor instance lives in its own
   .wml-cc-layer so several cursors can coexist on one page.
============================================================ */

/* One layer per cursor instance; its opacity is toggled by JS to
   show/hide that whole cursor (idle, off-window, or out of scope). */
.wml-cc-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity 0.3s ease;
}

.wml-cc-el {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  /* Position + scale are driven by JS via transform every frame,
     so we only ever transition colors here. */
  transition: background-color 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}

/* Inner visual (Dot + Ring): position lives on the outer carrier, while
   the visual's scale/color animate here with a smooth eased transition. */
.wml-cc-v {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.4s ease, border-color 0.4s ease;
  will-change: transform;
}

/* Hide native cursor when enabled */
html.wml-cc-hide-native,
html.wml-cc-hide-native * {
  cursor: none !important;
}

/* Only show the custom cursor on fine pointers (desktop) */
@media (pointer: coarse), (max-width: 900px) {
  .wml-cc-layer {
    display: none !important;
  }
  html.wml-cc-hide-native,
  html.wml-cc-hide-native * {
    cursor: auto !important;
  }
}

/* ---- Builder placeholder ---------------------------------- */
.wml-custom-cursor .wml-cc-builder-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px dashed rgba(127, 127, 127, 0.5);
  border-radius: 8px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  color: #555;
}
.wml-custom-cursor .wml-cc-icon {
  font-size: 18px;
}
.wml-custom-cursor .wml-cc-label {
  font-weight: 600;
}
.wml-custom-cursor .wml-cc-note {
  opacity: 0.6;
  font-size: 12px;
}