/* ============================================================
   KERUTO — NAVEGACIÓN CON TRANSICIONES (zoom + desplazamiento)
   Transiciones entre páginas con View Transitions (entre documentos).
   Reglas situacionales:
     · Lo que permanece (marco, logo, menú, cabecera) se queda quieto
       o se desplaza a su nueva posición. NUNCA se funde.
     · Lo que se va: zoom out. Lo que entra: zoom in.
   El comportamiento por pareja de páginas lo decide ker-nav.js
   (modos "morph" y "chrome") en pageswap/pagereveal.
   ============================================================ */

/* Navegación entre documentos del mismo origen. */
@view-transition {
  navigation: auto;
}

/* --- Nombres de los elementos persistentes ------------------- */

.ker-frame {
  view-transition-name: ker-frame;
}

/* Modo "morph" (por defecto): el logo y el menú de la home se desplazan a
   su posición de cabecera (y viceversa). Entre páginas con cabecera, son
   idénticos: se quedan inmutables. */
.ker-logo,
.ker-topbar__logo {
  view-transition-name: ker-logo;
}

.ker-menu,
.ker-topbar__menu {
  view-transition-name: ker-menu;
}

/* Modo "chrome" (html.ker-vt-chrome): cuando las DOS páginas llevan
   la cabecera global, se nombra la cabecera entera y queda inmutable.
   Los nombres de logo/menú se quitan para no anidarlos. */
html.ker-vt-chrome .ker-logo,
html.ker-vt-chrome .ker-topbar__logo,
html.ker-vt-chrome .ker-menu,
html.ker-vt-chrome .ker-topbar__menu {
  view-transition-name: none;
}

html.ker-vt-chrome #brx-header {
  view-transition-name: ker-chrome;
}

/* El morph tarjeta → héroe de la ficha no necesita CSS de nombres:
   ker-nav.js pone view-transition-name:ker-proj sobre la imagen clicada
   (página vieja) y sobre .ker-f3-hero (página nueva). */

/* --- Orden de pintado: el marco manda sobre todo ------------- */

::view-transition-group(ker-frame) {
  z-index: 3;
}

::view-transition-group(ker-chrome),
::view-transition-group(ker-logo),
::view-transition-group(ker-menu),
::view-transition-group(ker-proj) {
  z-index: 2;
}

/* --- Duración y curvas comunes ------------------------------- */

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.22, .8, .28, 1);
}

/* --- Contenido: zoom out al salir, zoom in al entrar ----------
   (nunca se anima la opacidad) */

@keyframes ker-vt-out {
  from {
    transform: scale(1) translateY(0);
  }
  to {
    transform: scale(.9) translateY(-6%);
  }
}

@keyframes ker-vt-in {
  from {
    transform: scale(.9) translateY(6%);
  }
  to {
    transform: scale(1) translateY(0);
  }
}

::view-transition-old(root) {
  animation: ker-vt-out 420ms cubic-bezier(.4, 0, .6, 1) both;
}

::view-transition-new(root) {
  animation: ker-vt-in 420ms cubic-bezier(.2, .75, .3, 1) both;
}

/* --- Regla de escala (importante) -----------------------------
   El grupo traslada cada elemento de su punto de origen al de
   destino, pero las capturas se muestran como máximo a su tamaño
   real: `object-fit: scale-down` nunca reescala hacia arriba ni
   estira (si la caja es mayor, la captura queda a su tamaño real;
   si es menor, se encoge de forma uniforme). Así el movimiento se
   conserva pero no hay elementos "gigantes" ni blur por escalado. */
::view-transition-old(ker-logo),
::view-transition-new(ker-logo),
::view-transition-old(ker-menu),
::view-transition-new(ker-menu),
::view-transition-old(ker-proj),
::view-transition-new(ker-proj) {
  object-fit: scale-down;
  /* El paso de testigo entre capturas es breve: manda el desplazamiento. */
  animation-duration: 220ms;
}

/* Elementos nombrados que solo existen en una de las dos páginas
   (entran nuevos o se van): zoom in / zoom out, sin fundido. */
::view-transition-old(*):only-child {
  animation: ker-vt-out 380ms cubic-bezier(.4, 0, .6, 1) both;
}

::view-transition-new(*):only-child {
  animation: ker-vt-in 380ms cubic-bezier(.2, .75, .3, 1) both;
}

/* --- El marco lo pinta .ker-frame durante la transición -------
   El border de ker-shell se hace transparente mientras dura la
   transición para no ver dos marcos (uno quieto y otro deslizándose). */

html.ker-vt-live section.ker-shell {
  border-color: transparent;
}

/* --- Fallback sin View Transitions ---------------------------
   Zoom + desplazamiento del contenido; marco, cabecera y logo
   se quedan quietos. La navegación es instantánea al terminar. */

@keyframes ker-nav-in {
  from {
    transform: scale(.92) translateY(5%);
  }
  to {
    transform: scale(1) translateY(0);
  }
}

@keyframes ker-nav-out {
  from {
    transform: scale(1) translateY(0);
  }
  to {
    transform: scale(.92) translateY(-5%);
  }
}

html.ker-nav-fallback.ker-nav-in #brx-content {
  animation: ker-nav-in 380ms cubic-bezier(.2, .75, .3, 1) both;
}

html.ker-nav-fallback.ker-nav-out #brx-content {
  animation: ker-nav-out 240ms cubic-bezier(.4, 0, .6, 1) both;
}

/* --- Movimiento reducido: sin animaciones --------------------- */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }

  html.ker-nav-fallback.ker-nav-in #brx-content,
  html.ker-nav-fallback.ker-nav-out #brx-content {
    animation: none;
  }
}