/* ============================================
   SA SHIPPING — Animations
   ============================================
   Scroll reveal effects, transitions, keyframes
   ============================================ */

/* ── Scroll Reveal Base States ── */
[data-animate] {
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate].animated {
  opacity: 1;
}

/* Fade Up */
[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-up"].animated {
  transform: translateY(0);
}

/* Fade Down */
[data-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-animate="fade-down"].animated {
  transform: translateY(0);
}

/* Fade Left */
[data-animate="fade-left"] {
  transform: translateX(-40px);
}

[data-animate="fade-left"].animated {
  transform: translateX(0);
}

/* Fade Right */
[data-animate="fade-right"] {
  transform: translateX(40px);
}

[data-animate="fade-right"].animated {
  transform: translateX(0);
}

/* Zoom In */
[data-animate="zoom-in"] {
  transform: scale(0.9);
}

[data-animate="zoom-in"].animated {
  transform: scale(1);
}

/* Flip Up */
[data-animate="flip-up"] {
  transform: perspective(1000px) rotateX(10deg);
}

[data-animate="flip-up"].animated {
  transform: perspective(1000px) rotateX(0);
}

/* Stagger delay for grid items */
[data-animate-delay="100"] { transition-delay: 0.1s; }
[data-animate-delay="200"] { transition-delay: 0.2s; }
[data-animate-delay="300"] { transition-delay: 0.3s; }
[data-animate-delay="400"] { transition-delay: 0.4s; }
[data-animate-delay="500"] { transition-delay: 0.5s; }
[data-animate-delay="600"] { transition-delay: 0.6s; }
[data-animate-delay="700"] { transition-delay: 0.7s; }

/* ── Keyframe Animations ── */

/* Pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Shimmer */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Slide In Carousel */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Count Up (handled in JS, this is for visual) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bounce Arrow */
@keyframes bounceArrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

/* Hero text entrance */
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroTextInDelay {
  0%, 30% { opacity: 0; transform: translateY(30px); }
  100%    { opacity: 1; transform: translateY(0); }
}

/* Carousel dots pulse */
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ── Hover Micro-interactions ── */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}