/* ============================================
   WORK CARD HOVER EFFECTS - WITH SHINE
   Updated to target .work-item class
   ============================================ */

.work-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Hover State - Lift & Scale */
.work-item:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Shine Effect - Sweeps Left to Right */
.work-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 10;
}

.work-item:hover::before {
  left: 100%;
}

/* Image Zoom Inside Card */
.work-item img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.work-item:hover img {
  transform: scale(1.05);
}

/* Mobile: Disable Hover Effects */
@media (max-width: 768px) {
  .work-item:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .work-item::before {
    display: none;
  }
  
  .work-item:hover img {
    transform: none;
  }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  .work-item,
  .work-item::before,
  .work-item img {
    transition: none !important;
  }
  
  .work-item:hover {
    transform: translateY(-2px) scale(1.02);
  }
  
  .work-item::before {
    display: none;
  }
}