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

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

/* Keyframe: Gradient Text & Border Shift */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Crazy Holographic Multi-Color Aurora Glow */
@keyframes crazyHoloGlow {
  0% {
    background-position: 0% 50%;
    filter: drop-shadow(0 4px 14px rgba(37, 99, 235, 0.45)) drop-shadow(0 0 20px rgba(124, 58, 237, 0.3));
  }
  33% {
    background-position: 50% 100%;
    filter: drop-shadow(0 4px 18px rgba(236, 72, 153, 0.55)) drop-shadow(0 0 28px rgba(245, 158, 11, 0.4));
  }
  66% {
    background-position: 100% 50%;
    filter: drop-shadow(0 4px 16px rgba(16, 185, 129, 0.5)) drop-shadow(0 0 25px rgba(6, 182, 212, 0.35));
  }
  100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 4px 14px rgba(37, 99, 235, 0.45)) drop-shadow(0 0 20px rgba(124, 58, 237, 0.3));
  }
}

/* Crazy 3D Floating Breath */
@keyframes crazyFloat {
  0% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) scale(1.02) rotate(0.5deg);
  }
  100% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
}

.crazy-brand-text {
  background: linear-gradient(135deg, #1e40af 0%, #7c3aed 20%, #db2777 40%, #ea580c 60%, #059669 80%, #0284c7 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: crazyHoloGlow 4.5s ease infinite, crazyFloat 3.2s ease-in-out infinite;
  display: inline-block;
  font-weight: 900;
  letter-spacing: -0.5px;
}

/* Keyframe: Button Glowing Pulse */
@keyframes buttonPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 14px 35px rgba(37, 99, 235, 0.55);
  }
}

/* Keyframe: Light Sweep Shine */
@keyframes lightSweep {
  0% {
    left: -120%;
  }
  100% {
    left: 140%;
  }
}

/* Keyframe: Typewriter Blinking Cursor */
@keyframes blinkCursor {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.typewriter-cursor {
  display: inline-block;
  font-weight: 400;
  color: #2563eb;
  animation: blinkCursor 0.8s infinite;
  margin-left: 2px;
}

/* Keyframe: Hero Slide Kinetic Reveal */
.swiper-slide-active .hero-content,
.hero-content.animate-text-in {
  animation: heroContentReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.swiper-slide-active .hero-badge,
.animate-text-in .hero-badge {
  animation: heroBadgeReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.swiper-slide-active .hero-title-gu,
.animate-text-in .hero-title-gu {
  animation: heroTextReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

.swiper-slide-active .hero-title-en,
.animate-text-in .hero-title-en {
  animation: heroTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

@keyframes heroContentReveal {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroBadgeReveal {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroTextReveal {
  0% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 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;
  }
}