/**
 * Digital Crazy Hub - Animations & Motion Effects
 */

/* 1. Continuous Infinite Marquee Animations */
@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.marquee-track-left {
  display: flex;
  width: max-content;
  animation: marqueeLeft 38s linear infinite;
  will-change: transform;
}

.marquee-track-right {
  display: flex;
  width: max-content;
  animation: marqueeRight 38s linear infinite;
  will-change: transform;
}

/* Pause marquee on hover and focus */
.marquee-wrapper:hover .marquee-track-left,
.marquee-wrapper:hover .marquee-track-right,
.marquee-track-left:hover,
.marquee-track-right:hover {
  animation-play-state: paused;
}

/* 2. Attention-Grabbing CTA Pulse & Shake Animation */
@keyframes ctaPulseShake {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  }
  20% {
    transform: scale(1.03) rotate(-1deg);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.6);
  }
  40% {
    transform: scale(1.03) rotate(1deg);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.6);
  }
  60% {
    transform: scale(1.02) rotate(-0.5deg);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5);
  }
  80% {
    transform: scale(1.01) rotate(0deg);
  }
}

.btn-pulse-shake {
  animation: ctaPulseShake 3.5s ease-in-out infinite;
}

.btn-pulse-shake:hover {
  animation: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.7);
}

/* 3. Glowing Pulse for Badges */
@keyframes badgeGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
  }
}

.badge-glow {
  animation: badgeGlow 2.5s infinite;
}

/* 4. Subtle Floating Animation */
@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.floating-elem {
  animation: floatGentle 4s ease-in-out infinite;
}

/* 5. Modal Fade & Zoom In */
@keyframes modalZoomIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-dialog-animate {
  animation: modalZoomIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 6. Shimmer Loading Effect */
@keyframes shimmerWave {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-fx {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmerWave 2.8s infinite;
}