/* ═══════════════════════════════════════════════════════════════════════════
   MOCKUP DEL BACKOFFICE — animación
   ═══════════════════════════════════════════════════════════════════════════
   El SVG arranca "en reposo" (líneas sin dibujar, barras a cero, tarjetas
   bajas). Todo se activa cuando el contenedor recibe `.is-in`, que pone el
   IntersectionObserver de landing.js — así la animación se ve siempre desde
   el principio, en vez de haber terminado antes de que mires.
   ═══════════════════════════════════════════════════════════════════════════ */

.bo-mock {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-float);
}

/* ── Estado inicial ────────────────────────────────────────────────────── */

/* La curva se dibuja de izquierda a derecha */
.bo-mock .bo-line {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
.bo-mock .bo-area  { opacity: 0; }
.bo-mock .bo-pulse { opacity: 0; }

/* Tarjetas y nodos entran desde abajo */
.bo-mock .bo-card,
.bo-mock .bo-node { opacity: 0; transform: translateY(14px); }

/* Las barras de progreso crecen desde cero */
.bo-mock .bo-bar { width: 0; }

.bo-mock .bo-check { opacity: 0; transform: scale(.7); transform-origin: 1010px 700px; }

/* ── Animación al entrar en pantalla ───────────────────────────────────── */

.is-in .bo-mock .bo-line {
  animation: bo-draw 1.5s var(--ease-out, cubic-bezier(.16,1,.3,1)) .35s forwards;
}
.is-in .bo-mock .bo-area {
  animation: bo-fade .9s ease-out 1.1s forwards;
}
.is-in .bo-mock .bo-pulse {
  animation: bo-fade .5s ease-out 1.5s forwards;
}
.is-in .bo-mock .bo-card {
  animation: bo-rise .7s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
  animation-delay: calc(120ms + var(--i) * 110ms);
}
.is-in .bo-mock .bo-node {
  animation: bo-rise .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
  animation-delay: calc(700ms + var(--i) * 90ms);
}
.is-in .bo-mock .bo-bar {
  animation: bo-grow 1.1s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
  animation-delay: calc(900ms + var(--i) * 140ms);
}
.is-in .bo-mock .bo-check {
  animation: bo-pop .6s cubic-bezier(.34,1.56,.64,1) 1.4s forwards;
}

/* Latido continuo del punto final de la curva y del indicador de estado */
.is-in .bo-mock .bo-pulse circle:last-child {
  animation: bo-fade .5s ease-out 1.5s forwards, bo-ping 2.4s ease-out 2s infinite;
  transform-origin: 640px 366px;
}
.is-in .bo-mock .bo-dot circle {
  animation: bo-blink 2.6s ease-in-out infinite;
}

@keyframes bo-draw  { to { stroke-dashoffset: 0; } }
@keyframes bo-fade  { to { opacity: 1; } }
@keyframes bo-rise  { to { opacity: 1; transform: none; } }
@keyframes bo-grow  { from { width: 0; } to { width: var(--w); } }
@keyframes bo-pop   { to { opacity: 1; transform: scale(1); } }
@keyframes bo-ping  {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes bo-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOCKUP DEL ASISTENTE IA
   ═══════════════════════════════════════════════════════════════════════════ */
.ia-mock {
  display: block; width: 100%; height: auto;
  border-radius: 28px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
}

/* Las burbujas entran escalonadas, como si la conversación ocurriera ahora */
.ia-mock .ia-bubble,
.ia-mock .ia-typing { opacity: 0; transform: translateY(16px); }

.is-in .ia-mock .ia-bubble,
.is-in .ia-mock .ia-typing {
  animation: bo-rise .65s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
  animation-delay: calc(200ms + var(--i) * 420ms);
}

/* Puntos de "escribiendo": rebotan en secuencia, en bucle */
.is-in .ia-mock .ia-dot {
  animation: ia-bounce 1.3s ease-in-out infinite;
  animation-delay: calc(1600ms + var(--d) * 160ms);
}
@keyframes ia-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
  30%           { transform: translateY(-6px); opacity: 1;   }
}

/* Indicador "En línea" */
.is-in .ia-mock .ia-live circle { animation: bo-blink 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ia-mock .ia-bubble,
  .ia-mock .ia-typing { opacity: 1; transform: none; }
  .ia-mock * { animation: none !important; }
}

/* Sin movimiento: se muestra el estado final, completo y legible */
@media (prefers-reduced-motion: reduce) {
  .bo-mock .bo-line  { stroke-dashoffset: 0; }
  .bo-mock .bo-area,
  .bo-mock .bo-pulse,
  .bo-mock .bo-check { opacity: 1; transform: none; }
  .bo-mock .bo-card,
  .bo-mock .bo-node  { opacity: 1; transform: none; }
  .bo-mock .bo-bar   { width: var(--w); }
  .bo-mock * { animation: none !important; }
}