/* assets/css/animations.css - Motion-First Animations & Micro-Interactions */

/* 1. Ticker Infinite Scroll */
@keyframes tickerScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 2. Pulsing Glow Badges */
@keyframes glowPulseYellow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.4), 0 0 20px rgba(250, 204, 21, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.8), 0 0 45px rgba(250, 204, 21, 0.4);
  }
}

@keyframes glowPulseGreen {
  0%, 100% {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.8), 0 0 45px rgba(16, 185, 129, 0.4);
  }
}

@keyframes glowPulseRed {
  0%, 100% {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.8), 0 0 45px rgba(239, 68, 68, 0.4);
  }
}

.pulse-yellow {
  animation: glowPulseYellow 2.5s infinite ease-in-out;
}

.pulse-green {
  animation: glowPulseGreen 2.5s infinite ease-in-out;
}

.pulse-red {
  animation: glowPulseRed 2.5s infinite ease-in-out;
}

/* 3. Floating Ambient Element Movement */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(3deg);
  }
}

.float-slow {
  animation: floatSlow 5s ease-in-out infinite;
}

/* 4. Level-Up Badge Rotation & Entrance */
@keyframes badgePopIn {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.15) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate-badge-pop {
  animation: badgePopIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 5. Progress Ring Animation */
@keyframes ringFill {
  from {
    stroke-dashoffset: 283;
  }
  to {
    stroke-dashoffset: var(--target-offset, 0);
  }
}

.ring-fill-anim {
  animation: ringFill 1.5s ease-out forwards;
}

/* 6. Shimmer / Skeleton Loader */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #131824 25%, #1f293d 50%, #131824 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius-sm);
}

/* 7. Live Indicator Ripple */
.live-dot {
  width: 8px;
  height: 8px;
  background-color: var(--green-primary);
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.live-dot::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.4);
  animation: ripple 1.8s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* 8. Level Up Banner Screen Flash */
@keyframes screenFlash {
  0% {
    background-color: rgba(250, 204, 21, 0.3);
  }
  100% {
    background-color: transparent;
  }
}

.screen-flash-trigger {
  animation: screenFlash 0.6s ease-out;
}

/* 9. Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-content {
    animation: none;
    overflow-x: auto;
  }
  .float-slow, .pulse-yellow, .pulse-green, .pulse-red, .live-dot::after {
    animation: none;
  }
}