/* ===================================================================
   MANANA CRACKERS - INTERACTIVE ANIMATIONS & FESTIVE EFFECTS
   =================================================================== */

/* Firework Canvas Element */
.firework-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9999;
  transition: transform 0.8s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.8s ease-out;
}

/* Pulsing Festive Discount Badges */
.pulse-badge {
  animation: festivePulse 2s infinite;
}

@keyframes festivePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Gold Glowing Badge */
.glow-gold {
  animation: glowGold 2.5s ease-in-out infinite alternate;
}

@keyframes glowGold {
  from {
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.4), 0 0 10px rgba(245, 158, 11, 0.2);
  }
  to {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.8), 0 0 25px rgba(245, 158, 11, 0.4);
  }
}

/* Floating animation */
.floating-element {
  animation: floating 3.5s ease-in-out infinite;
}

@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* Shimmer Button Effect */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: rotate(30deg);
  animation: shimmer 4s infinite;
}

@keyframes shimmer {
  0% { transform: translate(-100%, -100%) rotate(30deg); }
  30% { transform: translate(100%, 100%) rotate(30deg); }
  100% { transform: translate(100%, 100%) rotate(30deg); }
}

/* Sparkler cursor spark */
.click-spark {
  position: fixed;
  pointer-events: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fde047;
  box-shadow: 0 0 8px #f59e0b;
  z-index: 10000;
}

/* Subtle card entrance */
.fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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