/* 
  MyMittr Custom CSS Animations
  File: css/animations.css
*/

/* Smooth transitions for all elements */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll Indicator Arrow Bounce */
.chevron-bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  40% {
    transform: translateY(-10px) translateX(-50%);
  }
  60% {
    transform: translateY(-5px) translateX(-50%);
  }
}

/* Micro-interaction Pulse for key CTA buttons */
.pulse-glow {
  position: relative;
}

.pulse-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  box-shadow: 0 0 0 0 rgba(244, 124, 32, 0.6);
  animation: pulse 2s infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 124, 32, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(244, 124, 32, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 124, 32, 0);
  }
}

/* Page entrance fades for fallback or non-AOS loads */
.fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Image zoom effect for cards */
.zoom-container {
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.zoom-image {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zoom-container:hover .zoom-image {
  transform: scale(1.06);
}

/* Hero Background Fallback Image Ken Burns effect */
.ken-burns {
  animation: kenburns 20s ease-out infinite alternate;
}

@keyframes kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

/* Dotted path animation for how it works (visual helper for desktop) */
@keyframes dash {
  to {
    stroke-dashoffset: -40;
  }
}

/* Slide in from left for badges */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Skeleton loader for image lazy loading placeholder */
.skeleton {
  background: linear-gradient(90deg, #FDF8F3 25%, #E8F4EC 50%, #FDF8F3 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  to {
    background-position: -200% 0;
  }
}