/*
 * La marca de wlst: el logotipo (ui/js/logo-wlst.mjs) y sus animaciones
 * (ui/js/carga-wlst.mjs). Solo transformaciones y opacidad; en bucle, cada ciclo
 * acaba como empieza. Con «reducir movimiento», todo quieto en su pose.
 *
 * Ojo con las unidades: dentro del SVG, los px de translate son unidades del
 * dibujo (las de la mascota, o las de la fuente con 1 em = 1000), no píxeles.
 */

.logo-wlst { color: inherit; }
.logo-wlst-svg { display: block; overflow: visible; }

.carga-wlst { display: inline-block; color: inherit; line-height: 0; }
.carga-wlst-svg { display: block; overflow: visible; }
.carga-palomita .carga-wlst-svg { width: 11rem; height: auto; }
.carga-comiendo .carga-wlst-svg { width: auto; height: 7rem; }

/* El hueco de una espera (cargaSiTarda): centrada y en un color suave; en la carga de la
   app, en medio de la pantalla; en un bloque (la ficha, el buscador), más pequeña. */
.carga-espera { display: grid; place-items: center; padding: 48px 0; color: var(--texto-3); animation: carga-asoma 240ms ease-out both; }
.carga-espera.carga-pantalla { min-height: 70dvh; padding: 0; }
.carga-espera.carga-bloque { padding: 20px 0; }
.carga-bloque .carga-comiendo .carga-wlst-svg { height: 4.5rem; }
@keyframes carga-asoma { from { opacity: 0; } }

.carga-wlst { --cw-ciclo: 1800ms; --cw-sube-rapido: cubic-bezier(0.333, 0.667, 0.667, 1); --cw-cae-rapido: cubic-bezier(0.333, 0, 0.667, 0.333); --cw-suave: cubic-bezier(0.45, 0, 0.55, 1); --cw-sale: cubic-bezier(0.2, 0.8, 0.3, 1); }
.carga-wlst .cw-salto,
.carga-wlst .cw-cubo,
.carga-wlst .cw-avanza,
.carga-wlst .cw-vuela,
.carga-wlst .cw-aplasta,
.carga-wlst .cw-gira,
.carga-wlst .cw-t,
.carga-wlst .cw-mastica { animation: var(--cw-ciclo) linear infinite both; }

/* En reposo, la palomita suelta no se ve. */
.carga-wlst .cw-aplasta { opacity: 0; }
.carga-wlst .cw-ojos { transform-box: fill-box; transform-origin: 50% 50%; }

/* ── «Palomita» ──────────────────────────────────────────────────────────
   0–19 %: la mascota aprieta el cubo, que da un saltito y lanza una palomita.
   8–44 %: la palomita vuela en arco (avance constante; sube frenando y cae
   acelerando: la cima, al 21 %, va donde toca para la altura que sube y la que cae).
   44–66 %: aterriza en la «t», se aplasta, rebota una vez y se asienta.
   80–86 %: desaparece de un saltito (se encoge hasta nada), y vuelta a empezar. */
.carga-palomita .cw-salto { animation-name: cw-impulso; }
@keyframes cw-impulso {
  0% { transform: none; animation-timing-function: var(--cw-suave); }
  4% { transform: scale(1.02, 0.975); animation-timing-function: var(--cw-sale); }
  9% { transform: scale(0.99, 1.015); animation-timing-function: var(--cw-suave); }
  18%, 100% { transform: none; }
}
.carga-palomita .cw-cubo { animation-name: cw-cubo-lanza; }
@keyframes cw-cubo-lanza {
  0% { transform: none; animation-timing-function: var(--cw-suave); }
  4% { transform: scale(0.97, 1.03); animation-timing-function: var(--cw-sube-rapido); }
  8% { transform: translateY(-60px); animation-timing-function: var(--cw-cae-rapido); }
  13% { transform: none; animation-timing-function: var(--cw-sale); }
  15% { transform: scale(1.03, 0.97); animation-timing-function: var(--cw-suave); }
  19%, 100% { transform: none; }
}
.carga-palomita .cw-avanza { animation-name: cw-avanza; }
@keyframes cw-avanza {
  0%, 8% { transform: none; }
  44%, 100% { transform: translateX(var(--cw-avanza)); }
}
.carga-palomita .cw-vuela { animation-name: cw-vuela; }
@keyframes cw-vuela {
  0%, 8% { transform: none; animation-timing-function: var(--cw-sube-rapido); }
  21% { transform: translateY(var(--cw-sube)); animation-timing-function: var(--cw-cae-rapido); }
  44%, 48% { transform: translateY(var(--cw-cae)); animation-timing-function: var(--cw-sube-rapido); }
  54% { transform: translateY(var(--cw-rebota)); animation-timing-function: var(--cw-cae-rapido); }
  60%, 80% { transform: translateY(var(--cw-cae)); animation-timing-function: var(--cw-sube-rapido); }
  84%, 100% { transform: translateY(calc(var(--cw-cae) - 40px)); }
}
.carga-palomita .cw-aplasta { animation-name: cw-aplasta; }
@keyframes cw-aplasta {
  0%, 6.9% { opacity: 0; transform: scale(0.45); }
  7% { opacity: 1; transform: scale(0.45); animation-timing-function: var(--cw-sale); }
  10% { opacity: 1; transform: none; }
  43% { transform: scale(0.94, 1.08); animation-timing-function: var(--cw-sale); }
  46% { transform: scale(1.32, 0.7); animation-timing-function: var(--cw-suave); }
  49% { transform: scale(0.9, 1.12); animation-timing-function: var(--cw-suave); }
  53% { transform: none; }
  59% { transform: none; animation-timing-function: var(--cw-sale); }
  61% { transform: scale(1.14, 0.88); animation-timing-function: var(--cw-suave); }
  65%, 80% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  86%, 100% { opacity: 1; transform: scale(0); }
}
.carga-palomita .cw-gira { animation-name: cw-gira; }
@keyframes cw-gira {
  0%, 8% { transform: rotate(-20deg); animation-timing-function: cubic-bezier(0.3, 0.4, 0.6, 1); }
  44%, 100% { transform: rotate(340deg); }
}
.carga-palomita .cw-t { animation-name: cw-t; }
@keyframes cw-t {
  0%, 44% { transform: none; animation-timing-function: var(--cw-sale); }
  46.5% { transform: translateY(16px); animation-timing-function: var(--cw-suave); }
  53%, 100% { transform: none; }
}

/* ── «Comiendo» ──────────────────────────────────────────────────────────
   10–30 %: la mascota aprieta el cubo, que da un saltito y suelta una palomita.
   16–40 %: la palomita sale de lo alto del cubo, sube entre los ojos dando media
   vuelta y cae en la boca, detrás de las palomitas (carga-wlst.mjs la recorta ahí).
   42–58 %: dos bocados (la mascota se encoge un poco dos veces). El parpadeo va
   aparte, cada tres vueltas. */
.carga-comiendo .cw-cubo { animation-name: cw-cubo-come; }
@keyframes cw-cubo-come {
  0%, 10% { transform: none; animation-timing-function: var(--cw-suave); }
  14% { transform: scale(0.97, 1.03); animation-timing-function: var(--cw-sube-rapido); }
  19% { transform: translateY(-60px); animation-timing-function: var(--cw-cae-rapido); }
  24% { transform: none; animation-timing-function: var(--cw-sale); }
  26% { transform: scale(1.03, 0.97); animation-timing-function: var(--cw-suave); }
  30%, 100% { transform: none; }
}
.carga-comiendo .cw-aplasta { opacity: 1; }
.carga-comiendo .cw-avanza { animation-name: cw-avanza-come; }
@keyframes cw-avanza-come {
  0%, 16% { transform: none; }
  40%, 100% { transform: translateX(-45px); }
}
.carga-comiendo .cw-vuela { animation-name: cw-vuela-come; }
@keyframes cw-vuela-come {
  0%, 16% { transform: none; animation-timing-function: var(--cw-sube-rapido); }
  28% { transform: translateY(-520px); animation-timing-function: var(--cw-cae-rapido); }
  40%, 100% { transform: none; }
}
.carga-comiendo .cw-gira { animation-name: cw-gira-come; }
@keyframes cw-gira-come {
  0%, 16% { transform: rotate(10deg); animation-timing-function: cubic-bezier(0.3, 0.4, 0.6, 1); }
  40%, 100% { transform: rotate(-170deg); }
}
.carga-comiendo .cw-mastica { animation-name: cw-mastica; }
@keyframes cw-mastica {
  0%, 42% { transform: none; animation-timing-function: var(--cw-suave); }
  46% { transform: scale(1.015, 0.98); animation-timing-function: var(--cw-suave); }
  50% { transform: none; animation-timing-function: var(--cw-suave); }
  54% { transform: scale(1.012, 0.984); animation-timing-function: var(--cw-suave); }
  58%, 100% { transform: none; }
}
.carga-comiendo .cw-ojos { animation: cw-parpadea calc(var(--cw-ciclo) * 3) linear infinite; }
@keyframes cw-parpadea {
  0%, 84% { transform: none; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  85.5% { transform: scaleY(0.08); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  88%, 100% { transform: none; }
}

/* ── Entrada del logotipo (0,9 s, una vez) ───────────────────────────────
   La mascota sube de un salto desde los pies y da un bocado (las palomitas del
   cubo se hunden un poco); la palabra llega detrás, de la izquierda. */
.logo-wlst .marca-mascota,
.logo-wlst .marca-palomitas { transform-box: fill-box; transform-origin: 50% 100%; }
.logo-wlst.marca-entra .marca-mascota { animation: marca-aparece 900ms linear both; }
.logo-wlst.marca-entra .marca-palomitas { animation: marca-bocado 900ms linear both; }
.logo-wlst.marca-entra .marca-palabra { animation: marca-llega 900ms linear both; }
@keyframes marca-aparece {
  0% { opacity: 0; transform: translateY(14%) scale(0.5); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  36% { opacity: 1; transform: translateY(-3%) scale(1.04, 1.03); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  50% { transform: scale(1.02, 0.97); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  62%, 100% { opacity: 1; transform: none; }
}
@keyframes marca-bocado {
  0%, 62% { transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  74% { transform: scale(1.03, 0.86); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  92%, 100% { transform: none; }
}
@keyframes marca-llega {
  0%, 16% { opacity: 0; transform: translateX(-36px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  64%, 100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carga-wlst *, .logo-wlst *, .carga-espera { animation: none !important; }
}