/* ============================================
   Afriqone — Animations & Micro-Interactions
   ============================================ */

@keyframes shimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
@keyframes scrollLine {
  0% { opacity:0; transform:scaleY(0); transform-origin:top; }
  30% { opacity:1; transform:scaleY(1); transform-origin:top; }
  60% { opacity:1; transform:scaleY(1); transform-origin:bottom; }
  100% { opacity:0; transform:scaleY(0); transform-origin:bottom; }
}
@keyframes cartBump {
  0% { transform:scale(1); }
  30% { transform:scale(1.35); }
  60% { transform:scale(0.9); }
  100% { transform:scale(1); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-20px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-30px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(30px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.9); }
  to { opacity:1; transform:scale(1); }
}
@keyframes pulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.05); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
@keyframes skeleton {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
@keyframes heartbeat {
  0% { transform:scale(1); }
  15% { transform:scale(1.3); }
  30% { transform:scale(1); }
  45% { transform:scale(1.2); }
  60% { transform:scale(1); }
}

/* Scroll reveal */
.reveal {
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.revealed { opacity:1; transform:translateY(0); }

.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.reveal-left.revealed { opacity:1; transform:translateX(0); }

.reveal-right { opacity:0; transform:translateX(40px); transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.reveal-right.revealed { opacity:1; transform:translateX(0); }

.reveal-scale { opacity:0; transform:scale(0.92); transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.reveal-scale.revealed { opacity:1; transform:scale(1); }

/* Stagger delays */
.stagger-1 { transition-delay:0.05s; }
.stagger-2 { transition-delay:0.1s; }
.stagger-3 { transition-delay:0.15s; }
.stagger-4 { transition-delay:0.2s; }
.stagger-5 { transition-delay:0.25s; }
.stagger-6 { transition-delay:0.3s; }
.stagger-7 { transition-delay:0.35s; }
.stagger-8 { transition-delay:0.4s; }

/* Hero load animations */
.hero-content .hero-badge { animation:fadeInDown 0.8s 0.2s cubic-bezier(0.4,0,0.2,1) both; }
.hero-content .hero-title { animation:fadeInUp 0.8s 0.4s cubic-bezier(0.4,0,0.2,1) both; }
.hero-content .hero-description { animation:fadeInUp 0.8s 0.6s cubic-bezier(0.4,0,0.2,1) both; }
.hero-content .hero-buttons { animation:fadeInUp 0.8s 0.8s cubic-bezier(0.4,0,0.2,1) both; }
.hero-scroll { animation:fadeIn 1s 1.2s cubic-bezier(0.4,0,0.2,1) both; }
.top-bar { animation:fadeInDown 0.5s cubic-bezier(0.4,0,0.2,1) both; }

/* Hover utilities */
.hover-lift { transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1); }
.hover-lift:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,0.1); }
.hover-scale { transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.hover-scale:hover { transform:scale(1.03); }
.img-zoom { overflow:hidden; }
.img-zoom img { transition:transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.img-zoom:hover img { transform:scale(1.08); }

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity:1; transform:none; }
}