/* ============================================================================
   FIRMA shinmac — `page-morph` (View Transitions)
   Backing CSS de la firma declarada en <meta name="fx-signature" content="page-morph">.
   Todo scoped bajo .fx; consume los motion tokens del sitio. Sin View Transitions
   (o con prefers-reduced-motion) el sitio se comporta exactamente como la base.
   ============================================================================ */

.fx{
  --fx-dur-1:120ms;
  --fx-dur-2:320ms;
  --fx-dur-3:520ms;
  --fx-ease-out:cubic-bezier(.23,1,.32,1);
  --fx-ease-out-expo:cubic-bezier(.16,1,.3,1);
  --fx-stagger:60ms;
}

/* ---------- 1. Morph CROSS-DOCUMENT (navegación entre las 9 páginas) ---------- */
/* El logo persiste: es el eje del morph. */
.fx .nav__logo img{view-transition-name:sm-brand}
/* la franja utilitaria persiste entre páginas: no debe parpadear en el morph */
.fx .util{view-transition-name:sm-util}
::view-transition-group(sm-util){animation-duration:var(--fx-dur-3,520ms)}
::view-transition-old(sm-util),::view-transition-new(sm-util){animation:none}
/* El título de cada página morphea al de la siguiente. */
.fx h1{view-transition-name:sm-title}

/* Coreografía: el contenido entra desde abajo mientras el saliente se va más rápido (exit ≈ 75%). */
::view-transition-old(root){animation:sm-out var(--fx-dur-3,520ms) cubic-bezier(.16,1,.3,1) both}
::view-transition-new(root){animation:sm-in  var(--fx-dur-3,520ms) cubic-bezier(.16,1,.3,1) both}
@keyframes sm-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes sm-in{from{opacity:0;transform:translateY(14px)}}

/* El logo y el título NO parpadean: se transportan (el grupo interpola posición y escala). */
::view-transition-group(sm-brand),
::view-transition-group(sm-title){animation-duration:var(--fx-dur-3,520ms);animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(sm-brand),::view-transition-new(sm-brand),
::view-transition-old(sm-title),::view-transition-new(sm-title){animation:none;mix-blend-mode:normal;height:100%;object-fit:contain}

/* ---------- 2. SET-PIECE: la foto de la máquina viaja de la card a la ficha ---------- */
/* El nombre se asigna EN CALIENTE por firma-shinmac.js (solo al par card↔ficha implicado). */
::view-transition-group(sm-machine){
  animation-duration:var(--fx-dur-2,320ms);
  animation-timing-function:cubic-bezier(.16,1,.3,1);
  z-index:5;
}
::view-transition-old(sm-machine),
::view-transition-new(sm-machine){animation:none;height:100%;object-fit:cover;border-radius:14px}

/* El panel de la ficha crece desde la card; el fondo se atenúa. */
.fx .fi__panel{view-transition-name:sm-ficha}
::view-transition-group(sm-ficha){animation-duration:var(--fx-dur-2,320ms);animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(sm-ficha){animation:sm-ficha-out calc(var(--fx-dur-2,320ms) * .75) cubic-bezier(.23,1,.32,1) both}
::view-transition-new(sm-ficha){animation:sm-ficha-in var(--fx-dur-2,320ms) cubic-bezier(.16,1,.3,1) both}
@keyframes sm-ficha-in{from{opacity:0}}
@keyframes sm-ficha-out{to{opacity:0}}

/* Mientras el morph corre, la card de origen no debe "quedar" debajo: se la marca. */
.fx .pcard.sm-morphing .pcard__imgwrap img{opacity:0}

/* ---------- 3. LEY REDUCED-MOTION: se anula todo, el contenido queda completo ---------- */
@media (prefers-reduced-motion: reduce){
  .fx .nav__logo img,.fx h1,.fx .fi__panel{view-transition-name:none}
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}