/* Cursor Tracking Enhancements for Project Cards */

/* Enhanced project circle button for cursor following - applies to all project cards */
.project-circle-button {
  /* Only opacity transition - NO transform transitions */
  transition: opacity 0.3s ease-out;
  
  /* Prevent pointer events to avoid interference with mouse tracking */
  pointer-events: none;
  
  /* Initially hidden - will be shown on hover */
  opacity: 0;
  
  /* Hardware acceleration for smooth movement */
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  
  /* Ensure proper positioning context */
  transform-origin: center center;
  
  /* Improve rendering performance */
  backface-visibility: hidden;
}

/* .project-images-grid .project-circle-button[data-w-id] {
  transform: translate3d(0px, 0px, 0) !important;
} */

/* Project wrapper states for cursor tracking - applies to all project cards */
.featured-project-wrapper {
  /* Enable cursor tracking area */
  overflow: hidden;
  position: relative;
}

.featured-project-wrapper:hover .project-circle-button {
  /* Show circle on hover */
  opacity: 1;
}

/* Smooth cursor pointer for better UX */
.featured-project-wrapper:hover {
  cursor: none;
}

/* Responsive adjustments for cursor tracking - applies to all project cards */
@media (max-width: 991px) {
  .project-circle-button {
    /* Only opacity transitions - no transform transitions */
    transition: opacity 0.3s ease-out;
  }
}

@media (max-width: 767px) {
  .project-circle-button {
    /* Only opacity transitions - no transform transitions */
    transition: opacity 0.3s ease-out;
  }
  
  /* On mobile, we might want to disable cursor tracking */
  .featured-project-wrapper {
    cursor: pointer;
  }
}

/* Touch devices - always show circles for better UX */
@media (hover: none) {
  .project-circle-button {
    opacity: 1 !important;
    pointer-events: none !important;
    /* Add subtle entrance animation */
    animation: fadeInCircle 0.5s ease-out;
  }
  
  /* Provide touch feedback on press */
  .featured-project-wrapper:active .project-circle-button {
    transform: scale(0.95);
    transition: transform 0.1s ease-out;
  }
  
  /* Reset transform when not pressed */
  .featured-project-wrapper .project-circle-button {
    transform: scale(1);
    transition: transform 0.2s ease-out;
  }
}

/* Fade in animation for touch devices */
@keyframes fadeInCircle {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Additional fallback for devices that don't properly support hover media query */
/* This targets common mobile/tablet devices through CSS alone */
@media screen and (max-width: 1024px) {
  .project-circle-button {
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

/* Extra specific fallback for very small screens (definitely mobile) */
@media screen and (max-width: 767px) {
  .project-circle-button {
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 0) !important;
    display: flex !important;
  }
}