/* ==========================================================================
   Fluid Cursor - Dynamic Inertial Vector Cursor (NexStudio Style)
   ========================================================================== */

.fluid-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none !important;
  z-index: 999999;
  mix-blend-mode: difference;
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 0.18s ease;
  display: none;
}

.fluid-cursor[data-visible="true"] {
  opacity: 1;
}

.fluid-cursor__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 20px;
  display: block;
  transform-origin: 92% 50%;
  will-change: transform;
  transition: opacity 0.15s ease;
}

.fluid-cursor__body img,
.fluid-cursor__body svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.fluid-cursor__body svg path {
  fill: var(--fluid-cursor-color, #edece8);
}

.fluid-cursor__interactive {
  position: absolute;
  width: 25px;
  height: 25px;
  max-width: none;
  transform: translate(-5.5px, -1px);
  filter: invert(1);
  pointer-events: none;
  display: none;
}

.fluid-cursor[data-interactive="true"][data-interactive-ready="true"] .fluid-cursor__body {
  display: none;
}

.fluid-cursor[data-interactive="true"][data-interactive-ready="true"] .fluid-cursor__interactive {
  display: block;
}

.fluid-cursor[data-pressed="true"] .fluid-cursor__body,
.fluid-cursor[data-pressed="true"] .fluid-cursor__interactive {
  opacity: 0.76;
}

/* Enable custom cursor only on fine pointer devices with hover capability */
@media (hover: hover) and (pointer: fine) {
  html[data-custom-cursor="true"],
  html[data-custom-cursor="true"] body,
  html[data-custom-cursor="true"] body *,
  html[data-custom-cursor="true"] body *::before,
  html[data-custom-cursor="true"] body *::after {
    cursor: none !important;
  }

  html[data-custom-cursor="true"] .fluid-cursor {
    display: block;
  }
}

/* Fallback & safeguards for touch screens and mobile viewports */
@media (max-width: 768px), (pointer: coarse) {
  .fluid-cursor {
    display: none !important;
  }

  html[data-custom-cursor="true"],
  html[data-custom-cursor="true"] body,
  html[data-custom-cursor="true"] body * {
    cursor: auto !important;
  }
}

/* Safeguard for reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .fluid-cursor {
    display: none !important;
  }

  html[data-custom-cursor="true"],
  html[data-custom-cursor="true"] body,
  html[data-custom-cursor="true"] body * {
    cursor: auto !important;
  }
}