/* Fanti, la mascota de Cerámica Fantini.
   El SVG lo arma fanti.js; acá están los estilos y las animaciones.
   Lo comparten el tablero de Compras y la vista del área que pide. */
/* --- Fanti ---
   El ladrillo de la casa, uno arriba de cada columna. QUIETO por defecto:
   se mueve una sola vez, cuando entra un pedido a su columna (el JS le pone
   `.actua` y se la saca al terminar). Por eso TODA animación cuelga de
   `.actua`. Con prefers-reduced-motion no se mueve nada. */
.fanti { display: block; margin: 0 auto 7px; overflow: visible; }
.fanti .f-papelitos, .fanti .f-chispas, .fanti .f-viento { opacity: 0; }

/* El saltito común: al que le toca se lo ve desde el otro lado del tablero. */
.fanti.actua .f-todo { animation: f-salta 1.7s cubic-bezier(.3, 1.4, .5, 1) 1; }
@keyframes f-salta {
  0% { transform: translateY(0) scale(1); }
  12% { transform: translateY(2px) scaleY(.9) scaleX(1.08); }
  30% { transform: translateY(-9px) scaleY(1.06) scaleX(.96); }
  48% { transform: translateY(0) scaleY(.96) scaleX(1.04); }
  62%, 100% { transform: translateY(0) scale(1); }
}
.fanti.actua .f-sombra { animation: f-sombra 1.7s cubic-bezier(.3, 1.4, .5, 1) 1; }
@keyframes f-sombra { 0%, 62%, 100% { transform: scaleX(1); opacity: 1; } 30% { transform: scaleX(.7); opacity: .5; } }
.fanti.actua .f-ojos { animation: f-parpadea 1.7s 1; transform-origin: center; }
@keyframes f-parpadea { 0%, 52%, 62%, 100% { transform: scaleY(1); } 57% { transform: scaleY(.1); } }
.fanti.actua .f-cejas { animation: f-cejas 1.7s ease-out 1; }
@keyframes f-cejas { 0%, 100% { transform: translateY(0); } 22%, 55% { transform: translateY(-1.6px); } }

/* Pedidos: entra uno nuevo y lo anota. */
.fanti.actua .f-lapiz { animation: f-escribe .28s ease-in-out 5; transform-origin: 84px 46px; }
@keyframes f-escribe { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-2.2px, 2.6px) rotate(-12deg); } }
.fanti.actua .f-renglon { animation: f-renglon 1.7s ease-out 1 both; transform-origin: left; }
@keyframes f-renglon { 0%, 18% { opacity: 0; transform: scaleX(.2); } 40%, 100% { opacity: .8; transform: scaleX(1); } }
.fanti.actua .f-renglon2 { animation-delay: .22s; }
.fanti.actua .f-renglon3 { animation-delay: .44s; }

/* Cotizando: pregunta cuánto sale. */
.fanti.actua .f-globo { animation: f-globo 1.7s cubic-bezier(.3, 1.5, .5, 1) 1 both; transform-origin: 74px 26px; }
@keyframes f-globo { 0% { transform: scale(0); opacity: 0; } 26% { transform: scale(1.12); opacity: 1; }
                     38%, 100% { transform: scale(1); opacity: 1; } }
.fanti.actua .f-punto { animation: f-punto .5s ease-in-out 3; }
.fanti.actua .f-punto2 { animation-delay: .12s; }
.fanti.actua .f-punto3 { animation-delay: .24s; }
@keyframes f-punto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.4px); } }
.fanti.actua .f-tubo { animation: f-tubo 1.7s ease-in-out 1; transform-origin: 73px 56px; }
@keyframes f-tubo { 0%, 100% { transform: rotate(0deg); } 20%, 60% { transform: rotate(-11deg); } }

/* Cotizado: llegó el precio y lo sella. */
.fanti.actua .f-sello { animation: f-sella 1.7s cubic-bezier(.2, 1.6, .4, 1) 1 both; transform-origin: 79px 53px; }
@keyframes f-sella { 0% { transform: scale(0) rotate(-30deg); opacity: 0; }
                     30% { transform: scale(1.25) rotate(6deg); opacity: 1; }
                     44%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.fanti.actua .f-tilde { stroke-dasharray: 20; animation: f-tilde 1.7s ease-out 1 both; }
@keyframes f-tilde { 0%, 34% { stroke-dashoffset: 20; } 62%, 100% { stroke-dashoffset: 0; } }
.fanti.actua .f-cartel { animation: f-cartel 1.7s ease-in-out 1; transform-origin: 95px 31.5px; }
@keyframes f-cartel { 0%, 100% { transform: rotate(0deg); } 26% { transform: rotate(-10deg); } 52% { transform: rotate(5deg); } }
.fanti.actua .f-chispas { animation: f-chispas 1.7s ease-out 1 both; transform-origin: 79px 53px; }
@keyframes f-chispas { 0%, 30% { opacity: 0; transform: scale(.5); } 46% { opacity: 1; transform: scale(1.15); }
                       70%, 100% { opacity: 0; transform: scale(1.35); } }

/* Comprado: salió la orden, arranca el viaje. */
.fanti.actua .f-carro { animation: f-viaja 1.7s cubic-bezier(.4, 0, .3, 1) 1 both; }
@keyframes f-viaja { 0% { transform: translateX(-10px); } 55% { transform: translateX(0); }
                     80% { transform: translateX(3px); } 100% { transform: translateX(0); } }
.fanti.actua .f-rueda { animation: f-gira .5s linear 4; transform-box: fill-box; transform-origin: center; }
@keyframes f-gira { to { transform: rotate(360deg); } }
.fanti.actua .f-viento { animation: f-viento 1.7s ease-out 1 both; }
@keyframes f-viento { 0% { opacity: 0; transform: translateX(8px); } 30% { opacity: 1; transform: translateX(0); }
                      75%, 100% { opacity: 0; transform: translateX(-6px); } }

/* En planta: cae la caja, rebota y festeja con papelitos. */
.fanti.actua .f-caja { animation: f-baja 1.7s cubic-bezier(.4, 0, .5, 1) 1 both; }
@keyframes f-baja { 0% { transform: translateY(-26px); opacity: 0; } 22% { transform: translateY(0); opacity: 1; }
                    32% { transform: translateY(-5px); } 44% { transform: translateY(0); }
                    52% { transform: translateY(-1.5px); } 60%, 100% { transform: translateY(0); } }
/* El pivote es el HOMBRO (el borde del ladrillo), no el centro del brazo:
   si no, el brazo se dobla sobre la cabeza en vez de levantarse. */
.f-arriba { transform-origin: 61px 35.2px; }
.f-brazo-izq.f-arriba { transform-origin: 19px 35.2px; }
.fanti.actua .f-arriba { animation: f-festeja 1.7s cubic-bezier(.3, 1.5, .5, 1) 1 both; }
.fanti.actua .f-brazo-izq.f-arriba { animation-name: f-festeja-izq; }
/* 34° y no más: con brazos cortos y cabezón, levantarlos de más los mete
   dentro de la silueta y parecen muñones doblados. */
@keyframes f-festeja     { 0%, 30% { transform: rotate(0deg); } 46%, 100% { transform: rotate(-34deg); } }
@keyframes f-festeja-izq { 0%, 30% { transform: rotate(0deg); } 46%, 100% { transform: rotate(34deg); } }
.fanti.actua .f-papelitos { animation: f-papelitos 1.7s ease-out 1 both; }
@keyframes f-papelitos { 0%, 34% { opacity: 0; transform: translateY(6px) rotate(0deg); }
                         50% { opacity: 1; transform: translateY(-4px) rotate(80deg); }
                         100% { opacity: 0; transform: translateY(-14px) rotate(200deg); } }

/* Cajas de herramientas: se abre la tapa, Fanti se agacha adentro y sale con
   una herramienta en la mano. */
.fanti-herramientas .f-saca { opacity: 0; }
.fanti.actua.fanti-herramientas .f-tapa { animation: f-tapa 2.2s cubic-bezier(.3,1.3,.5,1) 1; transform-origin: 62px 32px; }
@keyframes f-tapa { 0%, 8% { transform: rotate(0deg); } 22%, 72% { transform: rotate(-105deg); } 92%, 100% { transform: rotate(0deg); } }
/* Se agacha: baja y se achica, como si se metiera adentro. */
.fanti.actua.fanti-herramientas .f-cuerpo { animation: f-agacha 2.2s ease-in-out 1; transform-origin: 40px 60px; }
@keyframes f-agacha {
  0%, 18% { transform: translate(0, 0) scale(1); }
  38%, 52% { transform: translate(14px, 14px) scale(.72); }
  72%, 100% { transform: translate(0, 0) scale(1); }
}
.fanti.actua.fanti-herramientas .f-saca { animation: f-saca 2.2s ease-out 1 both; }
@keyframes f-saca {
  0%, 52% { opacity: 0; transform: translateY(26px) rotate(-25deg); }
  66% { opacity: 1; transform: translateY(-4px) rotate(8deg); }
  78%, 100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
/* El brazo derecho acompaña: entra a la caja y vuelve con la herramienta. */
.fanti-herramientas .f-brazo-der { transform-origin: 61px 35.2px; }
.fanti.actua.fanti-herramientas .f-brazo-der { animation: f-busca 2.2s ease-in-out 1; }
@keyframes f-busca {
  0%, 18% { transform: rotate(10deg); }
  38%, 52% { transform: rotate(42deg); }
  70% { transform: rotate(-34deg); }
  85%, 100% { transform: rotate(10deg); }
}

/* Saludo: la mano derecha va y viene. Es el de la pantalla del área.
   El brazo NO trae giro en el atributo: acá está la pose de reposo y acá la
   animación, todo con el mismo centro. Mezclar `rotate(a cx cy)` del atributo
   con `transform-origin` del CSS los pisa y el brazo se va al piso. */
.fanti-saludo .f-brazo-der { transform: rotate(-38deg); transform-origin: 61px 35.2px; }
.fanti-saludo.actua .f-brazo-der { animation: f-saluda 1.7s ease-in-out 1; }
@keyframes f-saluda {
  0%, 100% { transform: rotate(-38deg); }
  25% { transform: rotate(-58deg); }
  50% { transform: rotate(-22deg); }
  75% { transform: rotate(-52deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fanti *, .fanti.actua * { animation: none !important; }
}

/* Cheques rechazados: Fanti sacude el cheque de la bronca y le sale humo. */
.fanti-rechazado .f-cheque { transform-origin: 66px 32px; }
.fanti.actua.fanti-rechazado .f-cheque { animation: f-sacude .28s ease-in-out 5; }
@keyframes f-sacude {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-7deg); }
  70% { transform: rotate(7deg); }
}
.fanti.actua.fanti-rechazado .f-cruz { animation: f-cruz 1.7s ease-out 1 both; }
@keyframes f-cruz { 0%, 20% { opacity: 0; transform: scale(.5); } 34% { opacity: 1; transform: scale(1.2); }
                    45%, 100% { opacity: 1; transform: scale(1); } }
.fanti-rechazado .f-cruz { transform-origin: 79px 32px; }
.fanti.actua.fanti-rechazado .f-humo { animation: f-humo 1.7s ease-out 1 both; }
@keyframes f-humo { 0%, 15% { opacity: 0; transform: translateY(6px); }
                    40% { opacity: .9; transform: translateY(0); }
                    80%, 100% { opacity: 0; transform: translateY(-8px); } }
.fanti.actua.fanti-rechazado .f-cejas { animation: f-bronca .3s ease-in-out 4; }
@keyframes f-bronca { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }

/* Energía y gas: rayo en una mano, fueguito en la otra.
   Con el filtro puesto se esconde la mano que no corresponde — la clase la
   pone el módulo (fanti-solo-energia / fanti-solo-gas). */
.fanti-energia .f-brazo-izq { transform: rotate(26deg); transform-origin: 19px 35.2px; }
.fanti-energia.fanti-solo-energia .f-fuego,
.fanti-energia.fanti-solo-gas .f-rayo { display: none; }
/* Sin fuego el brazo izquierdo no sostiene nada: vuelve a su lugar. */
.fanti-energia.fanti-solo-energia .f-brazo-izq { transform: rotate(0deg); }
.fanti-energia.fanti-solo-gas .f-brazo-der { transform: rotate(0deg); transform-origin: 61px 35.2px; }

.fanti.actua.fanti-energia .f-rayo { animation: f-chispazo 1.7s ease-out 1 both; transform-origin: 78px 32px; }
@keyframes f-chispazo {
  0%, 12% { opacity: 1; transform: scale(1); }
  22% { opacity: .25; transform: scale(1.25); }
  32% { opacity: 1; transform: scale(1); }
  46% { opacity: .3; transform: scale(1.18); }
  58%, 100% { opacity: 1; transform: scale(1); }
}
.fanti.actua.fanti-energia .f-fuego { animation: f-llama .42s ease-in-out 4; transform-origin: 19px 44px; }
@keyframes f-llama {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(1.14) scaleX(.93); }
}