/* BodegaFlex POS — Animaciones de la ventana «Cargando…» (js/animaciones-carga.js). Lote 4 de Gemini, revisado por Claude. */

/* ==========================================================================
   Animación de Carga: brincos
   Prefijo obligatorio: bfa-brincos-
   ========================================================================== */

.bfa-brincos-contenedor {
  width: 160px;
  height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.bfa-brincos-svg {
  width: 160px;
  height: 110px;
  display: block;
}

/* Grupo de la bolsita: salto con squash & stretch */
.bfa-brincos-bolsa {
  transform-origin: 80px 86px;
  animation: bfa-brincos-salto 1.05s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

/* Sombra elíptica en el suelo */
.bfa-brincos-sombra {
  transform-origin: 80px 92px;
  animation: bfa-brincos-sombra-anim 1.05s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

/* Chispitas laterales al tocar el suelo */
.bfa-brincos-chispas {
  transform-origin: 80px 88px;
  animation: bfa-brincos-chispas-anim 1.05s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

/* Keyframes: Salto y deformación elástica de la bolsa */
@keyframes bfa-brincos-salto {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  14% {
    /* Estiramiento al despegar */
    transform: translateY(-8px) scale(0.92, 1.12);
  }
  45% {
    /* Apogeo del salto: ingravidez suave con leve inclinación */
    transform: translateY(-38px) scale(1.04, 0.96) rotate(-2deg);
  }
  72% {
    /* Caída rápida, se estira de nuevo hacia abajo */
    transform: translateY(-8px) scale(0.93, 1.1);
  }
  84% {
    /* Impacto contra el suelo: squash elástico */
    transform: translateY(3px) scale(1.24, 0.78);
  }
  92% {
    /* Rebote de recuperación */
    transform: translateY(-2px) scale(0.98, 1.03);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* Keyframes: Sombra elíptica */
@keyframes bfa-brincos-sombra-anim {
  0% {
    transform: scale(1);
    opacity: 0.38;
  }
  45% {
    /* En el aire la sombra se achica y aclara */
    transform: scale(0.42);
    opacity: 0.12;
  }
  84% {
    /* En el impacto la sombra se expande y oscurece */
    transform: scale(1.3);
    opacity: 0.55;
  }
  92% {
    transform: scale(1.05);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0.38;
  }
}

/* Keyframes: Chispitas de impacto */
@keyframes bfa-brincos-chispas-anim {
  0%, 78% {
    opacity: 0;
    transform: scale(0.5);
  }
  84% {
    opacity: 0.9;
    transform: scale(1.1);
  }
  94%, 100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* Accesibilidad: Detener movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .bfa-brincos-bolsa,
  .bfa-brincos-sombra,
  .bfa-brincos-chispas {
    animation: none;
    transform: none;
    opacity: 0.4;
  }
  .bfa-brincos-bolsa {
    opacity: 1;
  }
}

/* ==========================================================================
   Animación de Carga: viveres
   Prefijo obligatorio: bfa-viveres-
   ========================================================================== */

.bfa-viveres-contenedor {
  width: 160px;
  height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.bfa-viveres-svg {
  width: 160px;
  height: 110px;
  display: block;
}

/* Paquete de Arroz: arco malabarista */
.bfa-viveres-paquete-arroz {
  transform-origin: 46px 74px;
  animation: bfa-viveres-arco-arroz 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Paquete de Pasta: arco malabarista complementario */
.bfa-viveres-paquete-pasta {
  transform-origin: 114px 74px;
  animation: bfa-viveres-arco-pasta 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Sombra izquierda en el suelo */
.bfa-viveres-sombra-izq {
  transform-origin: 46px 92px;
  animation: bfa-viveres-pulso-sombra-izq 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Sombra derecha en el suelo */
.bfa-viveres-sombra-der {
  transform-origin: 114px 92px;
  animation: bfa-viveres-pulso-sombra-der 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Destello sutil al cruzarse */
.bfa-viveres-destello {
  transform-origin: 80px 42px;
  animation: bfa-viveres-destello-anim 1.4s ease-in-out infinite;
}

/* Keyframes: Malabares Arroz (sale por arco alto, vuelve por arco medio) */
@keyframes bfa-viveres-arco-arroz {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }
  8% {
    transform: translate(2px, 2px) scale(1.12, 0.88);
  }
  28% {
    /* Cruce alto en el centro */
    transform: translate(34px, -38px) rotate(16deg) scale(1.02, 0.98);
  }
  48% {
    /* Aterriza en la derecha con squash */
    transform: translate(68px, 2px) rotate(0deg) scale(1.16, 0.84);
  }
  54% {
    transform: translate(68px, -2px) scale(0.98, 1.02);
  }
  60% {
    transform: translate(68px, 1px) scale(1.08, 0.92);
  }
  78% {
    /* Cruce medio de retorno */
    transform: translate(34px, -22px) rotate(-16deg) scale(0.98, 1.02);
  }
  94% {
    /* Aterriza de vuelta en la izquierda */
    transform: translate(0px, 2px) scale(1.16, 0.84);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }
}

/* Keyframes: Malabares Pasta (sale por arco medio, vuelve por arco alto) */
@keyframes bfa-viveres-arco-pasta {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }
  8% {
    transform: translate(-2px, 1px) scale(1.08, 0.92);
  }
  28% {
    /* Cruce medio hacia la izquierda */
    transform: translate(-34px, -22px) rotate(-16deg) scale(0.98, 1.02);
  }
  48% {
    /* Aterriza en la izquierda con squash */
    transform: translate(-68px, 2px) rotate(0deg) scale(1.16, 0.84);
  }
  54% {
    transform: translate(-68px, -2px) scale(0.98, 1.02);
  }
  60% {
    transform: translate(-68px, 2px) scale(1.12, 0.88);
  }
  78% {
    /* Cruce alto hacia la derecha */
    transform: translate(-34px, -38px) rotate(16deg) scale(1.02, 0.98);
  }
  94% {
    /* Aterriza de vuelta en la derecha */
    transform: translate(0px, 2px) scale(1.16, 0.84);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }
}

/* Keyframes: Pulso de sombra izquierda */
@keyframes bfa-viveres-pulso-sombra-izq {
  0% {
    transform: scale(1);
    opacity: 0.42;
  }
  28% {
    transform: scale(0.38);
    opacity: 0.12;
  }
  48% {
    transform: scale(1.22);
    opacity: 0.52;
  }
  60% {
    transform: scale(1);
    opacity: 0.38;
  }
  78% {
    transform: scale(0.4);
    opacity: 0.14;
  }
  94% {
    transform: scale(1.25);
    opacity: 0.52;
  }
  100% {
    transform: scale(1);
    opacity: 0.42;
  }
}

/* Keyframes: Pulso de sombra derecha */
@keyframes bfa-viveres-pulso-sombra-der {
  0% {
    transform: scale(1);
    opacity: 0.42;
  }
  28% {
    transform: scale(0.4);
    opacity: 0.14;
  }
  48% {
    transform: scale(1.22);
    opacity: 0.52;
  }
  60% {
    transform: scale(1);
    opacity: 0.38;
  }
  78% {
    transform: scale(0.38);
    opacity: 0.12;
  }
  94% {
    transform: scale(1.25);
    opacity: 0.52;
  }
  100% {
    transform: scale(1);
    opacity: 0.42;
  }
}

/* Keyframes: Destellos mágicos en los cruces */
@keyframes bfa-viveres-destello-anim {
  0%, 20%, 36%, 70%, 86%, 100% {
    opacity: 0;
    transform: scale(0.4);
  }
  28%, 78% {
    opacity: 0.95;
    transform: scale(1.15);
  }
}

/* Accesibilidad: Detener movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .bfa-viveres-paquete-arroz,
  .bfa-viveres-paquete-pasta,
  .bfa-viveres-sombra-izq,
  .bfa-viveres-sombra-der,
  .bfa-viveres-destello {
    animation: none;
    transform: none;
    opacity: 0.4;
  }
  .bfa-viveres-paquete-arroz,
  .bfa-viveres-paquete-pasta {
    opacity: 1;
  }
}

/* ==========================================================================
   Animación de Carga: carrito
   Prefijo obligatorio: bfa-carrito-
   ========================================================================== */

.bfa-carrito-contenedor {
  width: 160px;
  height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.bfa-carrito-svg {
  width: 160px;
  height: 110px;
  display: block;
}

/* Piso que se desliza de derecha a izquierda */
.bfa-carrito-piso {
  stroke-dasharray: 8 6;
  animation: bfa-carrito-pista-avance 0.4s linear infinite;
}

/* Rayitas de velocidad / viento detrás de la personita */
.bfa-carrito-viento {
  animation: bfa-carrito-viento-anim 0.5s ease-in-out infinite alternate;
}

/* Trote del cuerpo de la personita */
.bfa-carrito-personita {
  transform-origin: 38px 80px;
  animation: bfa-carrito-cuerpo-trote 0.38s ease-in-out infinite alternate;
}

/* Pierna delantera: zancada rápida */
.bfa-carrito-pierna-delantera {
  transform-origin: 41px 74px;
  animation: bfa-carrito-pierna-delantera-anim 0.38s ease-in-out infinite alternate;
}

/* Pierna trasera: zancada en contra-fase */
.bfa-carrito-pierna-trasera {
  transform-origin: 35px 74px;
  animation: bfa-carrito-pierna-trasera-anim 0.38s ease-in-out infinite alternate;
}

/* Carrito completo: traqueteo de rodaje */
.bfa-carrito-grupo {
  transform-origin: 94px 88px;
  animation: bfa-carrito-traqueteo 0.38s ease-in-out infinite alternate;
}

/* Víveres rebotando dentro del carrito */
.bfa-carrito-compras {
  transform-origin: 94px 62px;
  animation: bfa-carrito-viveres-bote 0.38s ease-in-out 0.1s infinite alternate;
}

/* Giro continuo de las ruedas */
.bfa-carrito-rueda-trasera {
  transform-origin: 74px 90px;
  animation: bfa-carrito-rueda-giro 0.45s linear infinite;
}

.bfa-carrito-rueda-delantera {
  transform-origin: 114px 90px;
  animation: bfa-carrito-rueda-giro 0.45s linear infinite;
}

/* Cartelito «OFERTA»: bamboleo por el viento al avanzar */
.bfa-carrito-cartel {
  transform-origin: 120px 52px;
  animation: bfa-carrito-bamboleo 0.76s ease-in-out infinite alternate;
}

/* Keyframes: Piso en movimiento veloz hacia la izquierda */
@keyframes bfa-carrito-pista-avance {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 14;
  }
}

/* Keyframes: Viento y velocidad */
@keyframes bfa-carrito-viento-anim {
  0% {
    opacity: 0.3;
    transform: translateX(0);
  }
  100% {
    opacity: 0.85;
    transform: translateX(-4px);
  }
}

/* Keyframes: Trote vertical de la personita */
@keyframes bfa-carrito-cuerpo-trote {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-3.5px) rotate(2deg);
  }
}

/* Keyframes: Zancada pierna delantera */
@keyframes bfa-carrito-pierna-delantera-anim {
  0% {
    transform: rotate(26deg);
  }
  100% {
    transform: rotate(-24deg);
  }
}

/* Keyframes: Zancada pierna trasera */
@keyframes bfa-carrito-pierna-trasera-anim {
  0% {
    transform: rotate(-24deg);
  }
  100% {
    transform: rotate(26deg);
  }
}

/* Keyframes: Traqueteo del carrito */
@keyframes bfa-carrito-traqueteo {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2px);
  }
}

/* Keyframes: Salto de los víveres en la canasta */
@keyframes bfa-carrito-viveres-bote {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-3px) rotate(2deg);
  }
}

/* Keyframes: Rotación continua de ruedas */
@keyframes bfa-carrito-rueda-giro {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Keyframes: Bamboleo del cartel OFERTA */
@keyframes bfa-carrito-bamboleo {
  0% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}

/* Accesibilidad: Detener movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .bfa-carrito-piso,
  .bfa-carrito-viento,
  .bfa-carrito-personita,
  .bfa-carrito-pierna-delantera,
  .bfa-carrito-pierna-trasera,
  .bfa-carrito-grupo,
  .bfa-carrito-compras,
  .bfa-carrito-rueda-trasera,
  .bfa-carrito-rueda-delantera,
  .bfa-carrito-cartel {
    animation: none;
    transform: none;
  }
  .bfa-carrito-viento {
    opacity: 0.2;
  }
}