/* ============================================================
   footnote — LOGO ANIMADO (compartido por el Home y todas las páginas de proyecto)

   Cerrado: la F con el punto naranja, igual que el logo de siempre. Al pasar el
   mouse por encima (o enfocarlo con el teclado) se abre el logo completo
   «FOOTNOTE.»: el punto viaja al final encogiéndose hasta su tamaño de wordmark
   mientras las letras suben una a una desde debajo de la línea base.

   Solo `transform` en las letras y el punto; lo único que cambia de layout es el
   ancho del propio enlace (una caja chica en el encabezado). Sin hover real
   (táctil) se queda cerrado: el toque es para ir al inicio. Con «reducir
   movimiento» el cambio es instantáneo.

   Geometría (unidades del SVG, viewBox 167,69 × 27,1; ver el HTML de cada página):
     · la F mide 21,85 de alto; el punto cerrado tiene r = 6,63 (el 61 % del alto de
       la F, como el PNG anterior) y cuelga bajo la base: por eso el viewBox es más
       alto que el wordmark (22,77);
     · el punto abierto está en (163,65; 18,72) con r = 4,05: de ahí el desplazamiento
       (−141,32; +1,65) y la escala 1,637 del estado cerrado.
   ============================================================ */
.logo {
  --logo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; display: block; flex: none;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 1.08);                 /* cerrado: F + punto */
  overflow: hidden;
  color: #fff; text-decoration: none;
  filter: drop-shadow(0 1px 10px rgb(0 0 0 / 0.35));
  transition: width 0.7s var(--logo-ease);
}
.logo__svg {
  display: block; height: 100%; width: calc(var(--logo-h) * 6.19);   /* logo completo: 167,69 / 27,1 */
  overflow: hidden;
}
.logo__word { fill: currentColor; }
.logo .lt {
  transform: translateY(32px);                       /* oculta bajo la línea base (el SVG recorta) */
  transition: transform 0.3s cubic-bezier(0.5, 0, 0.75, 0);
}
.logo__dot {
  fill: var(--orange, #FF6022);
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: translate(-141.32px, 1.65px) scale(1.637);
  transition: transform 0.7s var(--logo-ease);
}

@media (hover: hover) {
  .logo:hover { width: calc(var(--logo-h) * 6.19); }
  .logo:hover .lt { transform: none; transition: transform 0.65s var(--logo-ease) calc(0.1s + var(--i) * 0.05s); }
  .logo:hover .logo__dot { transform: none; }
}
.logo:focus-visible { width: calc(var(--logo-h) * 6.19); outline-offset: 6px; }
.logo:focus-visible .lt { transform: none; transition: transform 0.65s var(--logo-ease) calc(0.1s + var(--i) * 0.05s); }
.logo:focus-visible .logo__dot { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .logo, .logo .lt, .logo__dot { transition: none !important; }
}