/* 
 * WAI Agents - Animaciones
 * Efectos visuales y animaciones para mejorar la experiencia de usuario
 */

/* Animación de entrada para elementos */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Animación para elementos que aparecen desde la izquierda */
.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Animación para elementos que aparecen desde la derecha */
.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Animación de escala */
.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Animación de rotación para iconos */
.rotate-in {
  opacity: 0;
  transform: rotate(-45deg) scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.rotate-in.visible {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Animación de typing para textos */
.typing-animation {
  overflow: hidden;
  border-right: 0.15em solid;
  white-space: nowrap;
  margin: 0 auto;
  animation: typing 6s steps(100, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: currentColor }
}

/* Efecto de typing */
.typing-effect {
    display: inline-block;
    border-right: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    animation: blinking-cursor 0.7s step-end infinite;
}

.typing-effect.typing-done {
    border-right: 2px solid var(--color-primary);
    animation: blinking-cursor 0.7s step-end infinite;
}

@keyframes blinking-cursor {
    from, to { border-color: transparent; }
    50% { border-color: var(--color-primary); }
}

/* Animación de pulso */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animación de rebote */
.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

/* Animación de flotación */
.float {
  animation: float 6s ease-in-out infinite;
}

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

/* Animación de brillo para botones */
.btn-primary:after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-primary:hover:after {
  animation: shine 1.5s ease;
}

@keyframes shine {
  0% {
    opacity: 0;
    transform: rotate(30deg) translateX(-300%);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(30deg) translateX(300%);
  }
}

/* Animación para las tarjetas de servicios */
.service-card {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.service-card:hover .service-icon {
  animation: wiggle 0.5s ease;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* Animación para el timeline de proceso */
.timeline-step {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.timeline-step.visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-step:nth-child(odd) {
  transform: translateX(-30px);
}

.timeline-step:nth-child(even) {
  transform: translateX(30px);
}

.timeline-step.visible:nth-child(odd),
.timeline-step.visible:nth-child(even) {
  transform: translateX(0);
}

/* Animación para la barra de progreso del timeline */
.progress-indicator {
  height: 0;
  transition: height 1.5s ease;
}

/* Animación para los contadores de estadísticas */
.stat-number {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.stat-number.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación para el slider de testimonios */
.testimonial-item {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.testimonial-item.active {
  opacity: 1;
  transform: scale(1);
}

/* Animación para el calendario */
.day {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.day.visible {
  transform: scale(1);
  opacity: 1;
}

.day:hover:not(.empty):not(.unavailable) {
  transform: scale(1.05);
}

.day.selected {
  animation: pulse-light 1.5s infinite;
}

@keyframes pulse-light {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 82, 237, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(124, 82, 237, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(124, 82, 237, 0);
  }
}

/* Animación para los slots de tiempo */
.time-slot {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.time-slot.visible {
  transform: translateY(0);
  opacity: 1;
}

.time-slot:hover {
  transform: translateY(-5px);
}

/* Animación para el formulario de reserva */
.booking-form-content {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.booking-form-container.active .booking-form-content {
  transform: translateY(0);
  opacity: 1;
}

/* Animación para la confirmación de reserva */
.confirmation-content {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.booking-confirmation.active .confirmation-content {
  transform: scale(1);
  opacity: 1;
}

.confirmation-icon {
  animation: scale-bounce 1s ease;
}

@keyframes scale-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Animación para el botón de WhatsApp flotante */
.whatsapp-float {
  animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Animación para el botón de volver arriba */
.back-to-top {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.back-to-top.active {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-5px);
}

/* Animación para el preloader */
.preloader {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

/* Animación para las partículas de fondo */
#particles-js {
  opacity: 0;
  transition: opacity 1s ease;
}

#particles-js.loaded {
  opacity: 0.5;
}

/* Animaciones para dispositivos móviles */
@media (max-width: 768px) {
  .fade-in-left,
  .fade-in-right {
    transform: translateY(30px);
  }
  
  .fade-in-left.visible,
  .fade-in-right.visible {
    transform: translateY(0);
  }
}

/* Animación para la barra de notificación */
.notification-bar {
  transform: translateY(-100%);
  animation: slide-down 0.5s ease forwards 1s;
}

@keyframes slide-down {
  to {
    transform: translateY(0);
  }
}

/* Animación para el menú móvil */
.mobile-menu {
  transition: right 0.3s ease;
}

.mobile-nav-link {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease, color 0.3s ease;
}

.mobile-menu.active .mobile-nav-link {
  opacity: 1;
  transform: translateX(0);
}

/* Retrasos escalonados para elementos del menú móvil */
.mobile-menu.active .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.active .mobile-nav-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.active .mobile-nav-link:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.active .mobile-nav-link:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.active .mobile-nav-link:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu.active .mobile-nav-link:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu.active .mobile-nav-link:nth-child(7) { transition-delay: 0.4s; }

/* Animación para los iconos sociales */
.social-icon {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-5px) rotate(360deg);
}

/* Animación para los inputs del formulario */
input:focus, 
textarea:focus, 
select:focus {
  animation: pulse-border 1.5s infinite;
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 82, 237, 0.4);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(124, 82, 237, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(124, 82, 237, 0);
  }
}

/* Animación para los botones de envío */
button[type="submit"] {
  position: relative;
  overflow: hidden;
}

button[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: left 0.7s ease;
}

button[type="submit"]:hover::before {
  left: 100%;
}

/* Animación para las tarjetas de contacto */
.contact-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
}

.contact-icon {
  transition: transform 0.3s ease;
}

.contact-card:hover .contact-icon {
  transform: rotate(360deg);
}

/* Animación para los enlaces del footer */
.footer-column ul li a {
  position: relative;
  transition: padding 0.3s ease, color 0.3s ease;
}

.footer-column ul li a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background-color: white;
  transition: width 0.3s ease;
}

.footer-column ul li a:hover::before {
  width: 100%;
}

/* Animación para el logo */
.logo img {
  transition: height 0.3s ease, opacity 0.3s ease;
}

/* Animación para el scroll indicator */
.scroll-arrow {
  animation: bounce 2s infinite;
}

/* Animación para la sección hero */
.hero-title {
  opacity: 0;
  transform: translateY(30px);
  animation: fade-in-up 0.8s ease forwards 0.3s;
}

.hero-subtitle {
  opacity: 0;
  transform: translateY(30px);
  animation: fade-in-up 0.8s ease forwards 0.6s;
}

.hero-buttons {
  opacity: 0;
  transform: translateY(30px);
  animation: fade-in-up 0.8s ease forwards 0.9s;
}

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación para las secciones al hacer scroll */
.section-header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-header.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación para el efecto de parallax */
.parallax {
  transition: transform 0.5s ease;
}

/* Animación para el efecto de hover en las imágenes */
.image-container {
  overflow: hidden;
}

.image-container img {
  transition: transform 0.5s ease;
}

.image-container:hover img {
  transform: scale(1.1);
}

/* Animación para el efecto de hover en los enlaces de navegación */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Animación para el efecto de hover en los botones */
.btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

/* Animación para el efecto de hover en las tarjetas */
.service-card,
.testimonial-item,
.video-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover,
.testimonial-item:hover,
.video-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Animación para el efecto de hover en los iconos */
.feature-icon,
.service-icon,
.stat-icon,
.contact-icon {
  transition: transform 0.3s ease;
}

.feature-item:hover .feature-icon,
.service-card:hover .service-icon,
.stat-item:hover .stat-icon,
.contact-card:hover .contact-icon {
  transform: rotate(360deg);
}

/* Animación para el efecto de hover en los enlaces */
.service-link,
.social-link,
.footer-column ul li a {
  transition: color 0.3s ease, padding 0.3s ease;
}

.service-link i,
.social-link i {
  transition: transform 0.3s ease;
}

.service-link:hover i {
  transform: translateX(5px);
}

.social-link:hover i {
  transform: rotate(360deg);
}

/* Animación para el efecto de hover en los botones de control */
.testimonial-prev,
.testimonial-next,
.month-nav,
.close-button {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.testimonial-prev:hover,
.testimonial-next:hover,
.month-nav:hover,
.close-button:hover {
  transform: scale(1.1);
}

/* Animación para el efecto de hover en los días del calendario */
.day {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.day:hover:not(.empty):not(.unavailable) {
  transform: scale(1.05);
}

/* Animación para el efecto de hover en los slots de tiempo */
.time-slot {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.time-slot:hover {
  transform: translateY(-5px);
}

/* Animación para el efecto de hover en los inputs */
input,
textarea,
select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Animación para el efecto de hover en los botones sociales */
.social-icon {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-5px);
}

/* Animación para el efecto de hover en el botón de WhatsApp */
.whatsapp-float {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

/* Animación para el efecto de hover en el botón de volver arriba */
.back-to-top {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.back-to-top:hover {
  transform: translateY(-5px);
}