/* ==========================================================================
   CHATVOO - ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* Mascot Floating Keyframes */
@keyframes floatMascot {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(0.8deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Orbiting Badges Floating Animations */
@keyframes floatBadge1 {
  0%, 100% { transform: translate(30px, 80px) translateY(0px); }
  50% { transform: translate(30px, 80px) translateY(-10px); }
}
@keyframes floatBadge2 {
  0%, 100% { transform: translate(425px, 80px) translateY(0px); }
  50% { transform: translate(425px, 80px) translateY(-14px); }
}
@keyframes floatBadge3 {
  0%, 100% { transform: translate(10px, 275px) translateY(0px); }
  50% { transform: translate(10px, 275px) translateY(10px); }
}
@keyframes floatBadge4 {
  0%, 100% { transform: translate(445px, 275px) translateY(0px); }
  50% { transform: translate(445px, 275px) translateY(-8px); }
}
@keyframes floatBadge5 {
  0%, 100% { transform: translate(40px, 470px) translateY(0px); }
  50% { transform: translate(40px, 470px) translateY(-12px); }
}
@keyframes floatBadge6 {
  0%, 100% { transform: translate(425px, 470px) translateY(0px); }
  50% { transform: translate(425px, 470px) translateY(12px); }
}

.hero-robot-wrapper svg .badge-1 { animation: floatBadge1 4s ease-in-out infinite; }
.hero-robot-wrapper svg .badge-2 { animation: floatBadge2 4.6s ease-in-out infinite 0.5s; }
.hero-robot-wrapper svg .badge-3 { animation: floatBadge3 3.8s ease-in-out infinite 1s; }
.hero-robot-wrapper svg .badge-4 { animation: floatBadge4 4.2s ease-in-out infinite 1.5s; }
.hero-robot-wrapper svg .badge-5 { animation: floatBadge5 5s ease-in-out infinite 0.8s; }
.hero-robot-wrapper svg .badge-6 { animation: floatBadge6 4.4s ease-in-out infinite 1.2s; }

/* Pulse Dots */
@keyframes pulseDot {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* Floating WhatsApp Radar Ring */
@keyframes pulseWhatsapp {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Shimmer Light on Cards */
@keyframes cardShimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(200%) rotate(45deg); }
}

/* Subtle Glowing Mesh Rotation */
@keyframes meshRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fade In Up Observer Class */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Subtle Left & Right Slide In Animations for Owner Section */
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Interactive Hover Glint for Buttons */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}

.btn-primary:hover::before {
  left: 140%;
}