/* ===================================================================
   IKAN ENTERPRISE — Animations & Micro-Interactions
   60fps Hardware-Accelerated Effects
   =================================================================== */

/* Keyframe: Infinite Marquee Scrolling */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Keyframe: Floating Action Pulse Wave (WhatsApp / Phone) */
@keyframes pulseWaveGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.65);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes pulseWaveBlue {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.65);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.floating-whatsapp {
  animation: pulseWaveGreen 2.2s infinite;
}

.floating-call {
  animation: pulseWaveBlue 2.2s infinite 0.5s;
}

/* Keyframe: Cart Badge Bounce on Add */
@keyframes badgePop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.45);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.badge-pop-animate {
  animation: badgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Keyframe: Subtle Floating Float */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

/* Skeleton Loading Shimmer */
@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

/* Tooltip on Floating Action Buttons */
.floating-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  background: #0f172a;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: var(--transition-fast);
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.floating-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}

.floating-whatsapp:hover .floating-tooltip,
.floating-call:hover .floating-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Smooth Fade In Up Utility */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Ripple Click Feedback */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.btn:focus:not(:active)::after {
  animation: ripple 0.6s ease-out;
}

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