/* ==========================================================================
   ANIMATIONS — shared keyframes used across the site
   ========================================================================== */

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Watch second-hand sweep used in the hero + about SVG dials */
.dial-second-hand {
  transform-origin: center;
  animation: spinSlow 12s linear infinite;
}

.dial-minute-hand {
  transform-origin: center;
  animation: spinSlow 144s linear infinite;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float-slow { animation: floatSlow 6s ease-in-out infinite; }

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

.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in { animation: fadeIn var(--dur-med) var(--ease) both; }

/* Modal product-gallery paging: a soft slide + fade in the direction of travel */
@keyframes gallerySlideInRight {
  from { opacity: 0; transform: translateX(28px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes gallerySlideInLeft {
  from { opacity: 0; transform: translateX(-28px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Product grid re-render (filter / sort changes): a gentle staggered
   fade + rise so reordering never feels like an abrupt jump-cut. */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.product-card.card-enter {
  animation: cardFadeIn var(--dur-med) var(--ease) both;
}