/* ==========================================================================
   ANIMATED COURSE STORE - KEYFRAMES & MICRO-INTERACTIONS
   60fps GPU Hardware Accelerated Animations
   ========================================================================== */

/* Floating Badge Animation */
@keyframes floatBadge {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Subtle Pulse for CTA Buttons */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(99, 102, 241, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

.pulse-glow {
  animation: pulseGlow 2.5s infinite;
}

/* Infinite Marquee Scroll */
@keyframes scrollMarquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Shimmer Sweep Effect */
@keyframes shimmerSweep {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-btn {
  position: relative;
  overflow: hidden;
}

.shimmer-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 20%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 80%
  );
  transform: rotate(30deg);
  animation: shimmerSweep 3.5s infinite;
  pointer-events: none;
}

/* Modal Open Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Glowing Border Animation */
@keyframes borderRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.glow-border-animate {
  animation: borderRotate 10s linear infinite;
}

/* Watermark Floating Algorithm Keyframe fallback */
@keyframes watermarkDrift {
  0% {
    transform: translate(10%, 15%);
  }
  25% {
    transform: translate(65%, 25%);
  }
  50% {
    transform: translate(45%, 70%);
  }
  75% {
    transform: translate(15%, 55%);
  }
  100% {
    transform: translate(10%, 15%);
  }
}

/* Live Indicator Blinker */
@keyframes liveDot {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22c55e;
  display: inline-block;
  animation: liveDot 1.5s infinite ease-in-out;
  box-shadow: 0 0 10px #22c55e;
}