/* ==========================================================================
   Pary — Animations & Scroll Reveal
   ========================================================================== */

/* 1. Scroll Reveal base states */
[data-reveal]:not(.revealed) {
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal="fade-up"]:not(.revealed)    { transform: translateY(24px); }
[data-reveal="fade-down"]:not(.revealed)  { transform: translateY(-24px); }
[data-reveal="fade-left"]:not(.revealed)  { transform: translateX(-24px); }
[data-reveal="fade-right"]:not(.revealed) { transform: translateX(24px); }
[data-reveal="zoom-in"]:not(.revealed)    { transform: scale(0.95); }
[data-reveal="tilt-up"]:not(.revealed)    { transform: translateY(30px) rotate(2deg); }

/* Revealed - Must ALWAYS force clean zero transforms */
[data-reveal].revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Stagger delays */
.delay-100 { transition-delay: 60ms !important; }
.delay-200 { transition-delay: 120ms !important; }
.delay-300 { transition-delay: 180ms !important; }
.delay-400 { transition-delay: 240ms !important; }
.delay-500 { transition-delay: 300ms !important; }
.delay-600 { transition-delay: 360ms !important; }
.delay-700 { transition-delay: 420ms !important; }
.delay-800 { transition-delay: 480ms !important; }
.delay-900 { transition-delay: 540ms !important; }

/* Mobile Optimizations for Fast Smooth Scrolling */
@media (max-width: 768px) {
  [data-reveal]:not(.revealed) {
    transition-duration: 0.3s !important;
  }
  [data-reveal="fade-up"]:not(.revealed),
  [data-reveal="fade-down"]:not(.revealed),
  [data-reveal="fade-left"]:not(.revealed),
  [data-reveal="fade-right"]:not(.revealed),
  [data-reveal="tilt-up"]:not(.revealed) {
    transform: translateY(12px) !important;
  }
  .delay-300, .delay-400, .delay-500, .delay-600, .delay-700, .delay-800, .delay-900 {
    transition-delay: 40ms !important;
  }
}

/* 3. Hero entrance animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 4. Floating leaf decoration */
@keyframes floatLeaf {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-10px) rotate(4deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating-leaf      { animation: floatLeaf 8s ease-in-out infinite; }
.floating-leaf-slow { animation: floatLeaf 12s ease-in-out infinite; }

/* 5. Shimmer effect (for skeleton loaders / product cards) */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.shimmer {
  background: linear-gradient(90deg,
    rgba(116, 198, 157, 0.06) 25%,
    rgba(116, 198, 157, 0.12) 37%,
    rgba(116, 198, 157, 0.06) 63%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
}

/* 6. Gold pulse (for badges and CTAs) */
@keyframes gold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(212, 160, 23, 0); }
}

.pulse-gold {
  animation: gold-pulse 2.5s ease-in-out infinite;
}

/* 7. Hover scale utility */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:hover { transform: scale(1.05); }

/* 8. Text reveal — clipping animation for section titles */
@keyframes clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

.text-clip-reveal {
  animation: clip-reveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 9. Number counter spin */
@keyframes count-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-number.counting {
  animation: count-in 0.5s ease forwards;
}

/* 10. Gradient border animation */
@keyframes border-dance {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 11. Cart count badge pulse */
@keyframes pulse-badge {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.pulse-badge {
  animation: pulse-badge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}