/* =============================================================
   Movimiento compartido del portal y las PWA (lo maneja movimiento.js)

   Va suelto en public/ y NO en el bundle a propósito: el portal y las
   PWA se publican desde dos carpetas que ya no se parecen (rebuild y
   el worktree de Codex), y un archivo sin hash con su <link> en cada
   página llega igual venga de donde venga el resto.
   ============================================================= */

/* Crossfade entre páginas del mismo sitio (portal ↔ ticket, login → app).
   Navegadores sin soporte: cambio normal, sin errores. */
@view-transition { navigation: auto; }
/* Pantallas y páginas: la que se va se aleja apenas y se desenfoca; la
   nueva llega enfocándose, un poco después y más despacio. Movimientos
   chicos y largos: eso es lo que se siente «suave»; el desenfoque fuerte
   y la escala grande se sentían como un salto. */
::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 tarjeta tocada se transforma en la pantalla (o el
   diálogo, o el editor) que abre. La caja lleva el fondo y las esquinas
   de la tarjeta y una sombra de objeto levantado; adentro, el contenido
   de la tarjeta se va y el de la pantalla llega sin deformarse. */
::view-transition-group(mov-tarjeta) {
  animation-duration: .62s; animation-timing-function: cubic-bezier(.22,1,.36,1);
  overflow: clip; border-radius: var(--mov-radio, 14px); background: var(--mov-fondo, transparent);
  box-shadow: 0 28px 70px -18px rgba(0,0,0,.42), 0 10px 24px -10px rgba(0,0,0,.25);
}
::view-transition-image-pair(mov-tarjeta) { isolation: auto; }
::view-transition-old(mov-tarjeta), ::view-transition-new(mov-tarjeta) {
  width: 100%; height: 100%; object-fit: none; object-position: top center; mix-blend-mode: normal;
}
::view-transition-old(mov-tarjeta) { animation: .22s cubic-bezier(.4,0,1,1) both mov-desvanece; }
::view-transition-new(mov-tarjeta) { animation: .5s cubic-bezier(.22,1,.36,1) .1s both mov-aparece; }
@keyframes mov-desvanece { to { opacity: 0; } }
@keyframes mov-aparece { from { opacity: 0; translate: 0 10px; } }

/* Lo que no cambia de una pantalla a otra se queda quieto: la barra de
   abajo, el menú lateral del panel. */
#campo-tabs { view-transition-name: mov-barra; }
#admin-side { view-transition-name: mov-lado; }
::view-transition-group(mov-barra), ::view-transition-group(mov-lado), ::view-transition-group(sitio-encabezado) { animation-duration: .5s; z-index: 10; }

/* Web pública: el encabezado no participa del crossfade entre páginas,
   se queda quieto mientras cambia el contenido. */
.site-header { view-transition-name: sitio-encabezado; }
/* Magnificación del menú de la web: crece desde la base del enlace. */
#public-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%; }
#public-nav > a[style*="scale: 1.2"], #public-nav > a[style*="scale: 1.3"] { color: var(--ink, #111); }
@media (max-width: 900px) { #public-nav > a { transform-origin: left center; } }

/* La copia de la pantalla que se va (crossfade) y la caja que vuela de
   la tarjeta a su pantalla (shared element). Nunca reciben toques. */
.mov-fantasma { position: fixed !important; margin: 0 !important; z-index: 40; pointer-events: none; animation: none !important; overflow: hidden; }
.mov-caja { position: fixed; z-index: 60; pointer-events: none; overflow: hidden; contain: layout paint; will-change: left, top, width, height; }
.mov-caja > * { position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important; }

/* Magnificación del menú: `scale` y no `transform`, para no pelear con
   el rebote y la gota de la barra, que ya usan transform. */
#campo-tabs .campo-tab-icono { transition: transform .3s var(--spring, ease), stroke-width .2s, scale .32s cubic-bezier(.34,1.56,.64,1), translate .32s cubic-bezier(.34,1.56,.64,1), filter .32s; transform-origin: center bottom; }
/* En el menú lateral de escritorio (vertical) crece desde el centro, no desde la base. */
@media (min-width: 1024px) and (display-mode: browser) { #campo-tabs .campo-tab-icono { transform-origin: center; } }

/* Respuesta táctil: la tarjeta se hunde al tocarla, antes de despegar. */
:is(.admin-row, .product-card, .campo-tarjeta, .campo-cita, .int-ticket, [data-proyecto], [data-sucursal]) { transition: scale .35s cubic-bezier(.34,1.56,.64,1); }
:is(.admin-row, .product-card, .campo-tarjeta, .campo-cita, .int-ticket, [data-proyecto], [data-sucursal]):active { scale: .975; transition-duration: .12s; }
/* La gota ya no agranda su icono por su cuenta: lo hace la magnificación,
   con caída hacia los vecinos (si no, bajo el dedo serían 1.18 × 1.4). */
#campo-tabs .bajo-gota .campo-tab-icono { transform: none; }

/* Menú lateral del panel: el icono crece hacia el margen, sin taparle el texto. */
#admin-side .side-nav .admin-tab > svg { transition: scale .32s cubic-bezier(.34,1.56,.64,1), filter .32s; transform-origin: right center; }

/* Cifras: los textos de SVG crecen desde su propio centro. */
text.mov-cifra { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}