/* =====================================================================
   Moxen · transición entre páginas

   Los estilos de las franjas de transicion.js, con la forma del recurso
   «Barrido»: tres franjas inclinadas y escalonadas cruzan la pantalla y la
   última trae una palabra que se queda quieta mientras la franja la
   destapa, como una máscara. Los colores son los del sitio: franjas en
   grafitos y la palabra en blanco (en el tema claro, grises claros y la
   palabra en negro); la letra es la de los títulos, General Sans 700 con
   el mismo apretado de −.055em.

   Todo en píxeles, no en rem: la raíz del sitio es fluida y un rem de aquí
   no mediría lo mismo en una pantalla que en otra. Las medidas de la
   pantalla (--tr-w, --tr-h) y el cuerpo de la palabra las pone el JS.

   Las franjas se mueven con transform y nada más, así que el navegador las
   resuelve en la tarjeta gráfica sin repintar la página de debajo.
   El telón que tapa la llegada antes de que cargue este archivo (el del
   <head> de cada página, ver llega_head.py) repite estos colores y esta
   letra; si se cambian aquí, cambiarlos allí también.
   ===================================================================== */

:root {
  /* las franjas, de la primera que entra a la que trae la palabra */
  --tr-1: #1b1b1b;
  --tr-2: #292929;
  --tr-3: #373737;
  --tr-texto: #fff;
}
:root[data-theme="light"] {
  --tr-1: #e3e3e3;
  --tr-2: #d2d2d2;
  --tr-3: #c1c1c1;
  --tr-texto: #0a0a0a;
}

/* ── la capa ───────────────────────────────────────────────────────── */
#mx-tr {
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden;
  pointer-events: none; cursor: default; touch-action: none;
  -webkit-user-select: none; user-select: none;
  --tr-w: 100vw; --tr-h: 100vh; --tr-sk: -14deg; --tr-sk2: 14deg;
}
#mx-tr[hidden] { display: none; }
/* mientras la pantalla se cubre o se descubre, nada debajo recibe clics */
#mx-tr.tr-activa { pointer-events: auto; }

/* Cada franja es más ancha que la pantalla y está inclinada: sus bordes son
   diagonales y, puesta en su sitio, la cubre entera aunque se incline. Se
   inclina y se mueve desde la esquina de arriba a la izquierda de la
   pantalla (que en la franja está a 30 % y 10 % de la altura). */
#mx-tr .tr-franja {
  position: absolute; overflow: hidden; will-change: transform;
  top: calc(var(--tr-h) * -.1); left: calc(var(--tr-h) * -.3);
  width: calc(var(--tr-w) + var(--tr-h) * .6); height: calc(var(--tr-h) * 1.2);
  transform-origin: calc(var(--tr-h) * .3) calc(var(--tr-h) * .1);
  transform: translateX(calc(var(--tr-w) * -2)) skewX(var(--tr-sk));
}
#mx-tr .tr-franja:nth-child(1) { background: var(--tr-1); }
#mx-tr .tr-franja:nth-child(2) { background: var(--tr-2); }
#mx-tr .tr-franja:nth-child(3) { background: var(--tr-3); color: var(--tr-texto); }

/* El rótulo ocupa la pantalla y deshace el movimiento de su franja (el JS le
   da la animación contraria): se queda quieto y la franja lo destapa y lo
   tapa al pasar. */
#mx-tr .tr-rotulo {
  position: absolute; left: calc(var(--tr-h) * .3); top: calc(var(--tr-h) * .1);
  width: var(--tr-w); height: var(--tr-h); transform-origin: 0 0;
  display: grid; place-items: center; will-change: transform;
  transform: skewX(var(--tr-sk2)) translateX(calc(var(--tr-w) * 2));
}
#mx-tr .tr-palabra {
  display: flex; width: max-content; overflow: hidden;
  /* el aire de arriba y de abajo es para tildes y colas (á, ì, g, p, y):
     la máscara que recorta las letras al subir no debe comérselas */
  padding: .16em .05em .18em;
  color: var(--tr-texto); white-space: pre;
  font-family: "General Sans", "General Sans Respaldo", system-ui, -apple-system, sans-serif;
  font-size: 100px; font-weight: 700; line-height: 1; letter-spacing: -.055em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#mx-tr .tr-palabra i { display: block; font-style: normal; transform: translateY(110%); will-change: transform; }

/* El logotipo de Moxen, cuando el destino es el inicio: el mismo trazo del
   menú, en el color de la palabra, con una letra por trazo. Su ancho lo
   pone el JS. */
#mx-tr .tr-logo i { transform: none; will-change: auto; }
#mx-tr .tr-logo svg { display: block; height: auto; overflow: hidden; }
#mx-tr .tr-logo path { transform-box: fill-box; transform: translateY(110%); will-change: transform; }

/* ── la pantalla ya cubierta, sin animar ───────────────────────────────
   Así llega la página nueva (y así queda la de salida al terminar): el JS
   solo anima los trayectos de entrada y de salida. Cubierta del todo, la
   inclinación no se ve y sobra: sin ella el texto se pinta recto y nítido
   (una capa inclinada se remuestrea al componerla y las letras salen
   blandas). */
#mx-tr.tr-cubierta .tr-franja,
#mx-tr.tr-cubierta .tr-rotulo { transform: none; }
#mx-tr.tr-letras .tr-palabra i,
#mx-tr.tr-letras .tr-logo path { transform: none; }

/* ── con «reducir movimiento» ──────────────────────────────────────────
   Sin franjas ni palabra: un telón liso que se funde (lo anima el JS). */
#mx-tr.tr-reduce .tr-franja:not(:nth-child(3)),
#mx-tr.tr-reduce .tr-rotulo { display: none; }
#mx-tr.tr-reduce .tr-franja {
  top: 0; left: 0; width: 100%; height: 100%; transform: none; will-change: opacity;
}

/* El cursor del sitio (la X del logotipo) pasa por encima de la capa: sin
   él, con el puntero nativo oculto, no se vería dónde está el ratón. */
.mx-cursor { z-index: 2147483001; }