/* /css/components/cursor.css */

.cursor-dot,
.cursor-outline {
  position: fixed;
  pointer-events: none;
  z-index: 10000; /* Increased z-index to be higher than detail panel (9999) */
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.cursor-outline {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-normal), width var(--transition-normal), height var(--transition-normal), border var(--transition-normal);
}

.cursor-hover {
  transform: translate(-50%, -50%) scale(1.5);
  background-color: transparent;
}

.cursor-hidden {
  opacity: 0;
}

/* Fix for detail panels - ensure cursor is visible */
.project-detail,
.project-detail * {
  cursor: none !important; /* Ensure browser cursor is hidden */
}

.detail-panel-overlay {
  cursor: none !important;
}

/* Extra fix for interactive elements in detail panel */
.project-detail .btn,
.project-detail .close-detail,
.project-detail .slide-nav,
.project-detail .slide-dot {
  cursor: none !important;
}

@media (max-width: 768px) {
  .cursor-dot, .cursor-outline {
    display: none;
  }
}