/* ==========================================================================
   BURAKKO — Animaciones de la página "WhatsApp comercial 24/7"
   --------------------------------------------------------------------------
   Se carga DESPUÉS de home-motion.css, del que reutiliza los efectos comunes
   (revelado al scroll, títulos palabra por palabra, luz en tarjetas, cursor,
   header inteligente y barra de progreso). Acá solo va lo propio de la
   maqueta: intro del hero, órbitas, burbujas de chat y pulsos.

   Mismas reglas que la home: solo opacity / transform / clip-path, todo
   dentro de (prefers-reduced-motion: no-preference) y sin ocultar nada si el
   JS no carga. Donde el elemento ya tiene un transform propio (anillos y
   círculo central) se usan las propiedades `scale` y `translate`.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* 01. INTRO DEL HERO (solo CSS, no espera al JS) ====================== */

  .bkwa-pill                 { animation: m-in-left .8s var(--m-ease) .05s backwards; }
  .bkwa-title                { animation: m-rise-mask 1.1s var(--m-ease) .12s backwards; }
  .bkwa-title em             { animation: m-wipe 1.1s var(--m-ease) .5s backwards; }
  .bkwa-lead                 { animation: m-rise .9s var(--m-ease) .35s backwards; }
  .bkwa-hero .bkwa-actions   { animation: m-rise .9s var(--m-ease) .5s backwards; }
  .bkwa-checks li            { animation: m-rise .7s var(--m-ease) backwards; }
  .bkwa-checks li:nth-child(1) { animation-delay: .62s; }
  .bkwa-checks li:nth-child(2) { animation-delay: .7s; }
  .bkwa-checks li:nth-child(3) { animation-delay: .78s; }

  /* Órbitas: aparecen desde el centro y después "respiran". */
  .bkwa-ring--1 { animation: wa-ring-in 1.4s var(--m-ease) .2s backwards,
                             wa-breathe 7s ease-in-out 1.6s infinite; }
  .bkwa-ring--2 { animation: wa-ring-in 1.4s var(--m-ease) .1s backwards,
                             wa-breathe 7s ease-in-out 2.4s infinite reverse; }
  .bkwa-ring    { translate: var(--wa-px, 0px) var(--wa-py, 0px); transition: translate .6s var(--m-ease); }

  /* Círculo central: entra con rebote y emite ondas suaves. */
  .bkwa-core {
    translate: var(--wa-cx, 0px) var(--wa-cy, 0px);
    transition: translate .6s var(--m-ease);
    animation: wa-core-in .9s var(--m-ease-back) .3s backwards;
  }
  .bkwa-core::before,
  .bkwa-core::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--bkwa-accent);
    pointer-events: none;
    opacity: 0;
    animation: m-ping 3.6s var(--m-ease) 1.4s infinite;
  }
  .bkwa-core::after { animation-delay: 3.2s; }
  .bkwa-core svg { animation: wa-wiggle 6s ease-in-out 2s infinite; transform-origin: 50% 60%; }

  /* Burbujas flotantes: llegan una tras otra, como mensajes, y flotan. */
  .bkwa-float           { animation: wa-msg-in .7s var(--m-ease-back) backwards, wa-bob 6s ease-in-out infinite; }
  .bkwa-float--client   { transform-origin: 100% 100%; animation-delay: .75s, 1.6s; }
  .bkwa-float--bot      { transform-origin: 0 100%;    animation-delay: 1.15s, 2.4s; }
  .bkwa-float--file     { transform-origin: 100% 100%; animation-delay: 1.55s, 3.1s; }
  .bkwa-float--status   { transform-origin: 0 50%;     animation-delay: 1.95s, 3.8s; }

  /* Punto de "Agente activo": late. */
  .bkwa-float--status .bkwa-dot { animation: wa-live 2s ease-out 2.4s infinite; }
  .bkwa-pill .bkwa-dot          { animation: wa-live 2s ease-out 1s infinite; }

  @keyframes wa-ring-in  { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
  @keyframes wa-breathe  { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
  @keyframes wa-core-in  { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
  @keyframes wa-msg-in   { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }
  @keyframes wa-bob      { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
  @keyframes wa-wiggle   { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -9deg; } 92% { rotate: 7deg; } 95% { rotate: -4deg; } }
  @keyframes wa-live     { 0% { box-shadow: 0 0 0 0 rgba(28, 232, 178, .7); } 100% { box-shadow: 0 0 0 10px rgba(28, 232, 178, 0); } }


  /* 02. CHAT DEL CELULAR =================================================
     El JS marca los mensajes con .wa-off y los va mostrando de a uno
     (también al cambiar entre B2C y B2B). Ocupan su lugar desde el
     principio: el celular no cambia de alto. */

  .bkwa-msg {
    transition: opacity .45s ease, transform .55s var(--m-ease-back);
  }
  .bkwa-msg--client { transform-origin: 100% 100%; }
  .bkwa-msg--agent,
  .bkwa-msg--file   { transform-origin: 0 100%; }
  .m-js .bkwa-msg.wa-off { opacity: 0; transform: translateY(12px) scale(.9); }


  /* 03. HOVER (solo con mouse) =========================================== */

  @media (hover: hover) and (pointer: fine) {
    .bkwa-btn svg { transition: translate .45s var(--m-ease); }
    .bkwa-btn:hover svg { translate: 3px -3px; }

    .bkwa-card__icon { transition: transform .6s var(--m-ease-back), background-color .3s ease; }
    .bkwa-card:hover .bkwa-card__icon { transform: rotate(-8deg) scale(1.1); background-color: rgba(28, 232, 178, .2); }

    .bkwa-cap { transition: background-color .4s ease; }
    .bkwa-cap__n { transition: translate .5s var(--m-ease); }
    .bkwa-cap:hover .bkwa-cap__n { translate: 6px 0; }

    .bkwa-phone { transition: translate .6s var(--m-ease); }
    .bkwa-phone:hover { translate: 0 -6px; }
  }


  /* 04. CIERRE ===========================================================*/

  .bkwa-cta__icon { position: relative; }
  .bkwa-cta__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--bkwa-accent);
    pointer-events: none;
    animation: m-ping 2.8s var(--m-ease) infinite;
  }
  .bkwa-cta__icon svg { animation: wa-wiggle 6s ease-in-out 1s infinite; transform-origin: 50% 60%; }

} /* fin prefers-reduced-motion: no-preference */


@media print {
  .m-js .bkwa-msg.wa-off { opacity: 1 !important; transform: none !important; }
}