/* ============================================================
   SOURCINGPRO.PK — ADVANCED ANIMATIONS & MOTION SYSTEM
   Matches sourcingpro.com.au Elementor motion effects
   Includes font sliding/walk style for hero banner
   ============================================================ */

/* ── Core Keyframes ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* ── Hero Font Sliding / Walk-Style Animation ── */
@keyframes textWalkIn {
  0% {
    opacity: 0;
    transform: translateY(35px) rotateX(-20deg);
    filter: blur(8px);
  }
  60% {
    opacity: 0.9;
    transform: translateY(-4px) rotateX(4deg);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0px);
  }
}

@keyframes eyebrowWalk {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes subtitleWalk {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes actionsWalk {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hero elements font sliding / walking classes */
.hero-eyebrow.walk-in {
  animation: eyebrowWalk 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title.walk-in {
  animation: textWalkIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  opacity: 0; /* starts hidden before animation fires */
}

.hero-desc.walk-in {
  animation: subtitleWalk 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
  opacity: 0;
}

.hero-actions.walk-in {
  animation: actionsWalk 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  opacity: 0;
}

/* ── Floating & Bobbing Effect ── */
@keyframes subtleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.subtle-float {
  animation: subtleFloat 5s ease-in-out infinite;
}

/* ── Standard Elementor-Style Scroll Reveal Classes ── */
.reveal, .reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-zoom {
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Visible triggers */
.reveal.visible,
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0);
}

.reveal-zoom.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Stagger Delays (matches Elementor 200ms, 400ms, 600ms, 800ms) ── */
.delay-100 { transition-delay: 0.1s; }
.delay-200, .delay-1 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400, .delay-2 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600, .delay-3 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800, .delay-4 { transition-delay: 0.8s; }

/* ── Hover Micro-Interactions ── */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(13, 143, 202, 0.14);
}