/* ==========================================================================
   ApiWaBot — Motion (animaciones globales)
   - Floating: cards levitan suavemente en su lugar (loop infinito)
   - Reveal: entran con fade + slide-up al aparecer en viewport
   - Hover lift: levantan más y proyectan sombra
   - Respeta prefers-reduced-motion
   ========================================================================== */

/* ---------- Floating loop (varias fases para que no se sincronicen) ------- */
@keyframes float {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-8px) }
}
@keyframes float-a {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-6px) }
}
@keyframes float-b {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-9px) }
}
@keyframes float-c {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-4px) }
}
@keyframes float-d {
  0%,100% { transform: translateY(0) translateX(0) }
  50%     { transform: translateY(-7px) translateX(2px) }
}

.float    { animation: float-a 5.5s ease-in-out infinite; will-change: transform; }
.float-1  { animation: float-a 5.5s ease-in-out infinite; animation-delay: 0s;    will-change: transform; }
.float-2  { animation: float-b 6.2s ease-in-out infinite; animation-delay: -1.4s; will-change: transform; }
.float-3  { animation: float-c 5.0s ease-in-out infinite; animation-delay: -2.7s; will-change: transform; }
.float-4  { animation: float-d 6.8s ease-in-out infinite; animation-delay: -3.6s; will-change: transform; }

/* ---------- Reveal on scroll (vía IntersectionObserver toggling .in) ------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ---------- Hover lift for cards ----------------------------------------- */
.lift {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* ---------- Button emerald glow on hover --------------------------------- */
.btn-primary { transition: transform 160ms ease, background 160ms ease, box-shadow 220ms ease; }
.btn-primary:hover {
  background: #0EA978;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.38), 0 0 0 4px rgba(16, 185, 129, 0.10);
  transform: translateY(-1px);
}

/* ---------- Counters: number tick (subtle) ------------------------------- */
@keyframes count-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.count-pop { animation: count-pop 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---------- Typing caret for live demo ----------------------------------- */
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.caret { display: inline-block; width: 7px; height: 14px; background: #10B981; vertical-align: -2px; animation: blink 900ms steps(1) infinite; margin-left: 2px; }

/* ---------- Lead row slide-in (live demo) -------------------------------- */
@keyframes lead-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.lead-in { animation: lead-in 450ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.lift-dark:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(16, 185, 129, 0.18);
}

/* Combine float + lift cleanly: lift wraps, float stays inside, so hover
   pauses the float for a beat by overriding transform. */
.float-stop:hover {
  animation-play-state: paused;
}

/* ---------- Pulse for the "agente IA activo" dot ------------------------- */
@keyframes pulse-emerald {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55) }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0) }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0) }
}
.pulse-dot { animation: pulse-emerald 1.8s ease-out infinite; }

/* ---------- Soft gradient drift on hero backdrop ------------------------- */
@keyframes drift {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(20px,-10px,0); }
}
.drift { animation: drift 14s ease-in-out infinite; will-change: transform; }

/* ---------- Bar chart entrance (grow from bottom) ------------------------ */
@keyframes grow-up {
  from { transform: scaleY(0.05); opacity: 0; }
  to   { transform: scaleY(1);    opacity: 1; }
}
.grow-up {
  transform-origin: bottom;
  animation: grow-up 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- Reduced motion: turn EVERYTHING off -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .float, .float-1, .float-2, .float-3, .float-4,
  .drift, .pulse-dot, .grow-up {
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lift:hover { transform: none; }
}