/* ==========================================================================
   MetaGram - Fluid Liquid Glass Custom Cursor
   Precision dot + magnetic trailing ring with dynamic reactive states
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  /* Hide standard OS pointer on desktop for full custom cursor immersion */
  body,
  button,
  a,
  input,
  textarea,
  select,
  [role="button"],
  [role="link"],
  [role="tab"],
  .mg-3d-interactive,
  .mg-profile-tag,
  .mg-profile-username-3d {
    cursor: none !important;
  }
}

/* Master Cursor Container */
.mg-cursor-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  overflow: hidden;
  transition: opacity 0.25s ease;
}

.mg-cursor-wrap.is-hidden {
  opacity: 0 !important;
}

/* 1. Precision Center Dot (0ms latency follow) */
.mg-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--mg-accent-primary, #ffffff);
  box-shadow: none !important;
  pointer-events: none;
  z-index: 1000001;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease,
              background-color 0.2s ease,
              box-shadow 0.2s ease,
              border-radius 0.2s ease;
}

/* 2. Fluid Trailing Ring (Smooth lerp damping + glass refraction) */
.mg-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--mg-accent-rgb, 255, 255, 255), 0.38);
  background: rgba(var(--mg-accent-rgb, 255, 255, 255), 0.03);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  box-shadow: none;
  pointer-events: none;
  z-index: 1000000;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              background-color 0.2s ease,
              box-shadow 0.25s ease,
              opacity 0.2s ease,
              border-radius 0.25s ease;
}

/* --------------------------------------------------------------------------
   Hover & Interactive States
   -------------------------------------------------------------------------- */

/* Hovering over clickable items: Ring expands into clean glass circle */
.mg-cursor-wrap.is-hovering .mg-cursor-ring {
  width: 48px;
  height: 48px;
  margin-top: -24px;
  margin-left: -24px;
  border-color: rgba(var(--mg-accent-rgb, 255, 255, 255), 0.65);
  background: rgba(var(--mg-accent-rgb, 255, 255, 255), 0.08);
  box-shadow: none;
}

.mg-cursor-wrap.is-hovering .mg-cursor-dot {
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
  box-shadow: none;
}

/* Click / Mousedown state: Tactile contraction */
.mg-cursor-wrap.is-clicking .mg-cursor-ring {
  width: 26px;
  height: 26px;
  margin-top: -13px;
  margin-left: -13px;
  border-color: var(--mg-accent-primary, #ffffff);
  background: rgba(var(--mg-accent-rgb, 255, 255, 255), 0.15);
  box-shadow: none;
}

.mg-cursor-wrap.is-clicking .mg-cursor-dot {
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: -4px;
  box-shadow: none;
}

/* Text Input state: Morphs into slender vertical I-beam */
.mg-cursor-wrap.is-text .mg-cursor-dot {
  width: 2px;
  height: 18px;
  margin-top: -9px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--mg-accent-primary, #ffffff);
  box-shadow: none !important;
}

.mg-cursor-wrap.is-text .mg-cursor-ring {
  opacity: 0;
  width: 14px;
  height: 24px;
  margin-top: -12px;
  margin-left: -7px;
}

/* Disabled on touch devices */
@media (hover: none) or (pointer: coarse) {
  .mg-cursor-wrap {
    display: none !important;
  }
}