/* ==========================================================================
   KMWEBSOFT Landing Page - Animations System
   ========================================================================== */

/* Utility Classes for Scroll Reveals */
.reveal {
  opacity: 0;
  transform: translateY(30px) rotate(2deg);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-zoom {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-zoom.active {
  opacity: 1;
  transform: scale(1);
}

/* Staggered Delays for Groups */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }


/* Keyframes defined in style.css for specific components */
@keyframes radio-wave {
  0% { transform: scale(0.8); opacity: 0.5; stroke-width: 2px; }
  50% { opacity: 0.3; }
  100% { transform: scale(1.8); opacity: 0; stroke-width: 0.5px; }
}

@keyframes audio-bar {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}

@keyframes float-badge {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes toast-slide-in {
  0% { transform: translateX(100%) translateY(20px); opacity: 0; }
  100% { transform: translateX(0) translateY(0); opacity: 1; }
}

@keyframes toast-slide-out {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Button Loading State Animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Apply specific animations to elements */
.hero-float-badge {
  animation: float-badge 4s ease-in-out infinite;
}

.whatsapp-float__pulse {
  animation: pulse-ring 2s infinite;
}

.purchase-toast.show {
  animation: toast-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.purchase-toast.hide {
  animation: toast-slide-out 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}