/* Animations & Microinteractions */

/* 1. Fade-In Up (For elements scrolling into view) */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Hover Lift & Scale (For product cards) */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hover-lift:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

/* 3. Skeleton Loading */
.skeleton-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 4. Smooth Fade (General use) */
.smooth-fade {
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Ensure images fade in elegantly when loaded (handled in React) */
.image-reveal {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.image-reveal.loaded {
  opacity: 1;
}