/* ============================================
   ANIMATIONS CSS - Explore Jordan Website
   ============================================ */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Fade In Up Animation */
@keyframes fadeInUp {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Slide In From Left */
@keyframes slideInLeft {
  from { 
    opacity: 0; 
    transform: translateX(-40px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* Slide In From Right */
@keyframes slideInRight {
  from { 
    opacity: 0; 
    transform: translateX(40px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* Scale In Animation */
@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

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

/* Bounce Animation */
@keyframes bounce {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(-8px); 
  }
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.5; 
  }
}

/* Slide Down Animation */
@keyframes slideDown {
  from { 
    opacity: 0; 
    transform: translateY(-20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Glow Animation */
@keyframes glow {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(184, 132, 77, 0.5); 
  }
  50% { 
    box-shadow: 0 0 15px rgba(184, 132, 77, 0.8); 
  }
}

/* ============================================
   ANIMATION CLASSES
   ============================================ */

/* Fade In Up */
.animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Slide In Left */
.animate-slide-in-left {
  opacity: 0;
  animation: slideInLeft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Slide In Right */
.animate-slide-in-right {
  opacity: 0;
  animation: slideInRight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Scale In */
.animate-scale-in {
  opacity: 0;
  animation: scaleIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Float */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Bounce */
.animate-bounce {
  animation: bounce 2s ease-in-out infinite;
}

/* Pulse */
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Slide Down */
.animate-slide-down {
  opacity: 0;
  animation: slideDown 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Glow */
.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* ============================================
   ANIMATION WITH DELAY UTILITY
   ============================================ */

.animation-delay-0 { animation-delay: 0s; }
.animation-delay-1 { animation-delay: 0.1s; }
.animation-delay-2 { animation-delay: 0.2s; }
.animation-delay-3 { animation-delay: 0.3s; }
.animation-delay-4 { animation-delay: 0.4s; }
.animation-delay-5 { animation-delay: 0.5s; }

/* ============================================
   IN-VIEW ANIMATIONS
   ============================================ */

.in-view {
  animation-play-state: running !important;
}

/* ============================================
   TRANSFORM UTILITIES
   ============================================ */

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

.lift-hover:hover {
  transform: translateY(-4px);
}

.rotate-hover:hover {
  transform: rotate(5deg);
}

/* ============================================
   TRANSITION UTILITIES
   ============================================ */

.transition-fast {
  transition: all 0.2s ease;
}

.transition-normal {
  transition: all 0.3s ease;
}

.transition-slow {
  transition: all 0.5s ease;
}

/* ============================================
   DURATION UTILITIES
   ============================================ */

.duration-300 { animation-duration: 0.3s; }
.duration-500 { animation-duration: 0.5s; }
.duration-700 { animation-duration: 0.7s; }
.duration-1000 { animation-duration: 1s; }

/* ============================================
   STAGGER ANIMATION
   ============================================ */

.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.stagger-children > :nth-child(1) { animation-delay: 0.1s; }
.stagger-children > :nth-child(2) { animation-delay: 0.2s; }
.stagger-children > :nth-child(3) { animation-delay: 0.3s; }
.stagger-children > :nth-child(4) { animation-delay: 0.4s; }
.stagger-children > :nth-child(5) { animation-delay: 0.5s; }

/* ============================================
   RESPONSIVE ANIMATIONS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Disable animations on mobile for performance */
@media (max-width: 640px) {
  .animate-float,
  .animate-bounce,
  .animate-pulse {
    animation: none;
  }
}