/* HUELLAS · Sistema de movimiento
   ============================================================
   Un solo lugar para curvas, duraciones y staggers. Ajustar acá cambia todo el
   sitio: css/portal.css, css/layout.css, css/resto.css y js/movimiento.js leen
   estos tokens y ninguno inventa un número propio.

   Viene del canvas de diseño "Huellas Movimiento" (agosto 2026). Las tres
   reglas del sistema:

   1. Solo se anima transform, opacity y clip-path. Nada que obligue al
      navegador a rehacer el layout en cada cuadro.
   2. El movimiento nunca es el mecanismo. Los enlaces navegan igual con el JS
      caído; lo que se pierde es la animación, no la página.
   3. prefers-reduced-motion apaga todo y deja el estado final. El CSS lo hace
      acá abajo y el JS lee la misma media query.

   Esta hoja va en las tres páginas y es la primera del sistema de movimiento;
   sin ella los data-* que marcan el HTML no hacen nada, que es la degradación
   que queremos. */

:root {
  /* Curvas */
  --m-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* entradas */
  --m-ease-in:    cubic-bezier(0.7, 0, 0.84, 0);   /* salidas */
  --m-ease-morph: cubic-bezier(0.83, 0, 0.17, 1);  /* shared elements */
  --m-ease-micro: cubic-bezier(0.4, 0, 0.2, 1);    /* hover / focus */

  /* Duraciones */
  --m-dur-enter:   550ms;   /* entradas de contenido */
  --m-dur-exit:    300ms;   /* salidas */
  --m-dur-morph:   800ms;   /* vuelo de shared elements */
  --m-dur-micro:   180ms;   /* micro-interacciones */
  --m-dur-reveal:  600ms;   /* revelados al scroll */
  --m-dur-panel:   400ms;   /* hover de paneles de portada */
  --m-dur-portada: 900ms;   /* clip inicial de la portada */
  --m-dur-imagen: 1200ms;   /* entrada de una imagen grande */
  --m-dur-toggle:  350ms;   /* pastilla RESTO/HOSTAL */

  /* Staggers */
  --m-stagger:        70ms; /* base */
  --m-stagger-lineas: 80ms; /* líneas de un título */
  --m-stagger-carta:  50ms; /* filas de la carta */

  /* Desfase de salida: el panel descartado arranca antes que el morph */
  --m-anticipo: 80ms;

  /* Parallax: 40px de recorrido total, la mitad para cada lado */
  --m-parallax-max: 40;
}

/* —— Micro-interacciones ————————————————————————————————————————————————————
   Todas son transform y opacity. La flecha se corre, el subrayado se dibuja
   desde la izquierda. Valen para el mouse y para el teclado por igual: cada
   :hover viene con su :focus-visible al lado. */
@media (prefers-reduced-motion: no-preference) {
  .m-flecha {
    display: inline-block;
    transition: transform var(--m-dur-micro) var(--m-ease-micro);
  }
  .m-link { position: relative; }
  .m-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform var(--m-dur-micro) var(--m-ease-micro);
  }
  .m-link:hover::after,
  .m-link:focus-visible::after { transform: scaleX(1); }
  .m-link:hover .m-flecha,
  .m-link:focus-visible .m-flecha { transform: translateX(4px); }

  /* Una imagen dentro de un marco recortado respira al pasarle por encima. */
  .m-foto { overflow: hidden; }
  .m-foto img { transition: transform var(--m-dur-panel) var(--m-ease-out); }
  .m-foto:hover img,
  .m-foto:focus-visible img { transform: scale(1.03); }
}

/* —— Títulos por línea ————————————————————————————————————————————————————
   Cada línea vive dentro de una máscara que la tapa: el JS la sube desde abajo
   con un stagger. El padding/margin negativo es para que la máscara no corte
   las tildes ni las colas de la p y la g. */
[data-lineas] .linea {
  display: block; overflow: hidden;
  padding-bottom: 0.12em; margin-bottom: -0.12em;
}
[data-linea] { display: inline-block; }

/* —— Estado de partida de los revelados ————————————————————————————————————
   Lo pone el JS por elemento y no una regla global: si el JS no corre, no hay
   nada escondido. Acá solo queda el filete de los títulos de la carta, que es
   un ::after y por eso no se puede animar desde el JS. */
[data-grupo] [data-filete],
[data-grupo] h3::after {
  transform: scaleX(var(--m-filete, 1)); transform-origin: left center;
  transition: transform var(--m-dur-reveal) var(--m-ease-out) 120ms;
}
[data-grupo][data-visto="no"] { --m-filete: 0; }

/* —— Reduced motion: todo al estado final ————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  [data-grupo] [data-filete],
  [data-grupo] h3::after { transform: none; transition: none; }
}