/* Navegación sin parpadeo entre páginas de la plataforma.

   Cada clic es una página nueva que pinta el servidor. Sin esto, la página
   vieja se queda quieta mientras responde Railway (150–600 ms) y luego cambia
   de golpe. Con las View Transitions entre documentos el navegador funde una
   en la otra; donde no las soporta (Firefox), la navegación es la de siempre.

   Lo carga `_transiciones.html` en el backoffice, el ingreso, el portal, la
   firma y el modo obra. La web pública no: la Galería tiene su cortina. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Las barras que se repiten de una página a otra van aparte del resto: entre
   dos fotos idénticas el fundido no se ve, así que quedan quietas y solo
   cambia lo que sí cambió (el enlace activo, el título de la sección). En el
   celular, la lateral abierta se desliza a su sitio en vez de desaparecer. */
.app-sidebar { view-transition-name: dc-lateral; }
.app-topbar, .pt-top, .cp-top { view-transition-name: dc-superior; }

::view-transition-group(*) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* El contenido: la página vieja se apaga mientras la nueva entra subiendo
   unos píxeles. Las dos animaciones corren a la vez: con el fundido en
   secuencia la pantalla se oscurece un instante entre una y otra, que es
   justo el parpadeo que se quiere quitar. La franja que deja el
   desplazamiento queda debajo de la barra superior. */
::view-transition-old(root) {
  animation: 160ms cubic-bezier(.4, 0, 1, 1) both dc-vt-sale;
}
::view-transition-new(root) {
  animation: 240ms cubic-bezier(0, 0, .2, 1) both dc-vt-entra;
}
@keyframes dc-vt-sale { to { opacity: 0; } }
@keyframes dc-vt-entra { from { opacity: 0; transform: translateY(6px); } }

/* Barra de progreso: solo aparece si el servidor tarda más de un cuarto de
   segundo (ver transiciones.js). Avanza rápido al principio y se frena cerca
   del final, sin llegar: llega la página nueva y la reemplaza. */
.dc-progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 2000; pointer-events: none;
  background: var(--dc-accent, var(--clay, #9c7a4e));
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0; transition: opacity .2s;
}
html.dc-navegando .dc-progreso {
  opacity: 1;
  animation: dc-progreso 8s cubic-bezier(.1, .6, .2, 1) forwards;
}
@keyframes dc-progreso {
  0%   { transform: scaleX(0); }
  10%  { transform: scaleX(.4); }
  100% { transform: scaleX(.94); }
}
@media (prefers-reduced-motion: reduce) {
  html.dc-navegando .dc-progreso { animation: none; transform: scaleX(.6); }
}