/* =========================================================
   Animations — keyframes + helper classes
   AOS handles scroll animations; this file = custom CSS anims.
   ========================================================= */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Hero text fade-in on load */
.hero h1, .hero p, .hero .btn, .hero-eyebrow {
  opacity: 0;
  animation: fadeIn 0.9s ease forwards;
}
.hero-eyebrow { animation-delay: 0.05s; }
.hero h1     { animation-delay: 0.15s; }
.hero p      { animation-delay: 0.35s; }
.hero .btn   { animation-delay: 0.55s; }

/* Floating WhatsApp bounce */
.bounce { animation: bounceY 2s ease-in-out infinite; }

/* Page section slide-in (manual triggers) */
.slide-in-left  { animation: slideInLeft 0.7s ease both; }
.slide-in-right { animation: slideInRight 0.7s ease both; }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

/* Hover micro-interactions */
.btn:active { transform: translateY(0) scale(0.98); }
.product-card { will-change: transform; }
.cat-card     { will-change: transform; }