/* ==========================================================================
   DANGER SHAWON - KEYFRAME ANIMATIONS & MOTION SYSTEM
   ========================================================================== */

/* Smooth floating animation for logos and featured panels */
@keyframes ds-float {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.02);
  }
}

/* Luxury glowing pulse with gaming red neon aura */
@keyframes ds-pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(239, 68, 68, 0.85));
  }
}

/* Emerald green pulsing glow for verified badges and live status */
@keyframes ds-emerald-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(16, 185, 129, 0.8));
  }
}

/* Carousel / Banner Progress Bar Animation */
@keyframes progressAnimation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* Shimmer Loading / Skeleton Wave Effect */
@keyframes ds-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Cyberpunk Scanline Movement */
@keyframes ds-scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(1000%);
  }
}

/* Gradient Border Flow */
@keyframes ds-border-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Standard UI Motion Keyframes */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* --- Interactive Animation Utility Classes --- */

.ds-floating-logo {
  animation: ds-float 4s ease-in-out infinite, ds-pulse-glow 3s ease-in-out infinite;
  will-change: transform, filter;
}

.animate-float {
  animation: ds-float 3.5s ease-in-out infinite;
  will-change: transform;
}

.animate-pulse-glow {
  animation: ds-pulse-glow 2.5s ease-in-out infinite;
}

.animate-emerald-glow {
  animation: ds-emerald-glow 2.5s ease-in-out infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: ds-shimmer 2s infinite linear;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Micro-interaction for smooth icon spin on hover */
.hover-spin:hover svg,
.hover-spin:hover i {
  transform: rotate(180deg);
  transition: transform 0.4s ease-in-out;
}