/* ============================================
   OdontoSmile — Animations & Keyframes
   ============================================ */

/* --- Scroll-triggered fade animations --- */
.fade-in,
.fade-in-left,
.fade-in-right {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in {
  transform: translateY(30px);
}

.fade-in-left {
  transform: translateX(-40px);
}

.fade-in-right {
  transform: translateX(40px);
}

.fade-in.visible,
.fade-in-left.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: translate(0);
}

/* --- Pulse (location badge) --- */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

/* --- Float (nametag) --- */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* --- Bounce (scroll indicator) --- */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-12px);
  }
  60% {
    transform: translateX(-50%) translateY(-6px);
  }
}

/* --- Marquee scroll --- */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- Testimonials carousel --- */
@keyframes testimonials-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- Spin-in (CTA section image) --- */
@keyframes spin-in {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* --- Stats carousel on mobile --- */
@keyframes stats-scroll {
  0% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-30%);
  }
  66% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(0);
  }
}

/* --- Button arrow animation --- */
@keyframes arrow-bounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

/* --- WhatsApp floating pulse --- */
@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.floating-whatsapp.visible {
  animation: whatsapp-pulse 2.5s ease-in-out infinite;
}

.floating-whatsapp:hover {
  animation: none;
}