/* ==========================================================================
   BELA IA — animations.css
   ========================================================================== */

/* — Sistema de revelado al hacer scroll — */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1.in-view { transition-delay: 0.08s; }
.reveal-delay-2.in-view { transition-delay: 0.16s; }
.reveal-delay-3.in-view { transition-delay: 0.24s; }
.reveal-delay-4.in-view { transition-delay: 0.32s; }
.reveal-delay-5.in-view { transition-delay: 0.4s; }

/* — Punto pulsante (badge de hero, estado activo) — */
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.55);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 212, 255, 0);
  }
}

/* — Barrido vertical del conector de flujo (método) — */
@keyframes flow-pulse-y {
  0% {
    top: -100%;
  }
  60%, 100% {
    top: 100%;
  }
}

/* — Sacudida de campo con error — */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* — Indicador de scroll en el hero — */
.scroll-hint-icon {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, var(--color-text-faint), transparent);
  animation: scroll-hint-bounce 1.8s var(--ease) infinite;
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(8px); opacity: 1; }
}


/* — V2: marquee de integraciones — */
@keyframes marquee-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* — V2: mensajes del chat demo — */
@keyframes msg-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* — V2: puntos de "escribiendo…" — */
@keyframes typing-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}