/* Logo de mate gest — isotipo (SVG inline) + palabra.
   Adaptado del kit de marca original (ver docs/marca/LEEME.txt) con dos
   cambios a propósito para esta app:

   1. No define font-size: lo hereda de quien lo contiene. Todo el resto
      escala en em, así que el tamaño se elige con una clase de Tailwind
      en el elemento padre (text-lg en el header, text-4xl en el login).
   2. No trae variante oscura. El modo oscuro de la app es el filtro
      invert() global de base.html, que ya da vuelta estos colores junto
      con los del resto de la pantalla; una paleta oscura propia acá
      quedaría invertida dos veces.

   La animación es de entrada y se reproduce una vez (regla del kit: nunca
   en loop). La corre .mg-logo--anim y nada más, así el logo del header —que
   se vuelve a pintar en cada carga de página— arranca quieto; el login sí
   nace con la clase puesta. Encima de eso, static/js/logo.js pone y saca esa
   misma clase al pasar el mouse, que es lo que hace que la animación se
   repita a pedido en cualquier pantalla. */

/* Manrope, la tipografía de la marca. Es la fuente VARIABLE: un solo archivo
   cubre de 200 a 800, así que el 300 de "mate" y el 600 de "gest" salen del
   mismo woff2 (25 KB). Va servida desde acá y no desde Google: de dónde salió
   y por qué está empotrada, en static/fonts/LEEME.txt.

   La URL es relativa a ESTE archivo a propósito — así WhiteNoise la reescribe
   sola al pasarle el hash en collectstatic. */
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-latin-var.938c6e8019b6.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.mg-logo {
  --mg-mark: #00786F;   /* cuerpo del mate */
  --mg-tick: #45A79D;   /* bombilla / tilde, y la palabra "mate" */
  --mg-gap:  #FFFFFF;   /* hueco de la tilde = color del fondo */
  --mg-word: #073B36;   /* "gest" */
  display: inline-flex;
  align-items: center;
  gap: .34em;
  font-family: Manrope, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.mg-logo svg { width: 1.85em; height: 1.85em; flex: none; }
.mg-logo .mg-w1 { font-weight: 300; color: var(--mg-tick); }
.mg-logo .mg-w2 { font-weight: 600; color: var(--mg-word); }

@keyframes mg-pop  { from { opacity: 0; transform: scale(.84) } to { opacity: 1; transform: scale(1) } }
@keyframes mg-draw { to { stroke-dashoffset: 0 } }
@keyframes mg-rise { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }

/* Tiempos del kit: 1,26 s en total.
   mate 0–0,40 · labio 0,16–0,52 · base 0,44–0,74 · tilde 0,36–0,94 ·
   "mate" 0,72 · "gest" 0,84 */
.mg-logo--anim .mg-body { transform-box: fill-box; transform-origin: 50% 70%; animation: mg-pop .4s cubic-bezier(.34,1.25,.64,1) both }
.mg-logo--anim .mg-lip  { stroke-dasharray: 52; stroke-dashoffset: 52; animation: mg-draw .36s .16s cubic-bezier(.65,0,.35,1) both }
.mg-logo--anim .mg-base { transform-box: fill-box; transform-origin: 50% 50%; animation: mg-pop .3s .44s cubic-bezier(.34,1.25,.64,1) both }
.mg-logo--anim .mg-tick { stroke-dasharray: 95; stroke-dashoffset: 95; animation: mg-draw .58s .36s cubic-bezier(.5,0,.3,1) both }
.mg-logo--anim .mg-w1   { animation: mg-rise .42s .72s cubic-bezier(.2,.7,.3,1) both }
.mg-logo--anim .mg-w2   { animation: mg-rise .42s .84s cubic-bezier(.2,.7,.3,1) both }

@media (prefers-reduced-motion: reduce) {
  .mg-logo--anim .mg-body, .mg-logo--anim .mg-lip, .mg-logo--anim .mg-base,
  .mg-logo--anim .mg-tick, .mg-logo--anim .mg-w1, .mg-logo--anim .mg-w2 {
    animation: none; opacity: 1; transform: none; stroke-dashoffset: 0;
  }
}