/* =============================================================
   Movimiento del sitio público (lo maneja jr-movimiento.js).
   Va suelto en la raíz y se engancha con una línea en cada .html
   exportado, sin recompilar el sitio.
   ============================================================= */

/* Crossfade entre pantallas: la que se va se aleja apenas y se desenfoca;
   la nueva llega enfocándose, un poco después y más despacio. */
::view-transition-old(root) { animation: .38s cubic-bezier(.4,0,.6,1) both mov-sale; }
::view-transition-new(root) { animation: .62s cubic-bezier(.22,1,.36,1) .04s both mov-entra; }
@keyframes mov-sale { to { opacity: 0; scale: .985; filter: blur(6px); } }
@keyframes mov-entra { from { opacity: 0; scale: 1.012; translate: 0 8px; filter: blur(6px); } }

/* Shared element: la foto de la tarjeta se transforma en la foto de la
   ficha o del visor, con sombra de objeto levantado. */
::view-transition-group(mov-tarjeta) {
  animation-duration: .62s; animation-timing-function: cubic-bezier(.22,1,.36,1);
  overflow: clip; border-radius: var(--mov-radio, 16px);
  box-shadow: 0 28px 70px -18px rgba(0,0,0,.6), 0 10px 24px -10px rgba(0,0,0,.4);
}
::view-transition-old(mov-tarjeta), ::view-transition-new(mov-tarjeta) {
  width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal;
}
::view-transition-old(mov-tarjeta) { animation: .3s cubic-bezier(.4,0,1,1) both mov-desvanece; }
::view-transition-new(mov-tarjeta) { animation: .45s cubic-bezier(.22,1,.36,1) both mov-aparece; }
@keyframes mov-desvanece { to { opacity: 0; } }
@keyframes mov-aparece { from { opacity: 0; } }

/* El encabezado se queda quieto: solo su estado nuevo, sin copia fantasma. */
body > header, header.fixed { view-transition-name: sitio-encabezado; }
::view-transition-group(sitio-encabezado) { animation: none; z-index: 10; }
::view-transition-old(sitio-encabezado) { display: none; }
::view-transition-new(sitio-encabezado) { animation: none; }

/* Magnificación del menú: crece desde la base del enlace. */
header nav a { transition: scale .32s cubic-bezier(.34,1.56,.64,1), translate .32s cubic-bezier(.34,1.56,.64,1), color .2s; transform-origin: center 70%; }

/* Respuesta táctil: la tarjeta se hunde al tocarla, antes de despegar. */
.mov-tocada { scale: .975; transition: scale .12s; }