/* Fundido al cambiar de página.

   Solo se funde <main>. La franja superior, la barra de navegación y el pie
   quedan intactos, igual que en rksolutions.es, donde el Navbar vive fuera
   del componente de transición. Aquí la cabecera es hermana de <main>
   dentro de .body_wrap, así que basta con apuntar a <main> y los demás ni
   se enteran.

   La navegación es con recarga completa (ver el comentario de
   NavigationTransition.tsx para el porqué). Aquí vive SOLO la salida; la
   entrada ya la hace WOW.js, elemento a elemento.

   Hubo aquí una animación de entrada sobre <main> y había que quitarla:
   producía un parpadeo. main.js se carga `afterInteractive`, así que WOW
   arranca bastante después de que la página pinte. La secuencia era
   <main> apareciendo con medio contenido todavía invisible (los .wow nacen
   ocultos por CSS) y, un cuarto de segundo más tarde, cada elemento
   entrando por su cuenta. Dos entradas encadenadas que se leen como un
   parpadeo.

   Con una sola entrada —la de WOW, que además es el lenguaje del resto del
   sitio— desaparece. */

/* El contenido desaparece del todo: lo que se va tiene que irse, no
   quedarse a medias. Como la barra no se mueve, el vacío dura lo que tarda
   la página siguiente y se lee como un cambio de sección, no como una
   pantalla en blanco.

   `pointer-events: none` evita que se pueda pulsar algo que ya se está
   yendo. */
body.gp-saliendo main {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
}

/* Entrada suave y reposada del nuevo contenido al cambiar de sección */
@keyframes gpMainEntrada {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gp-main-entrando {
  animation: gpMainEntrada 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

/* Quien haya pedido menos movimiento navega sin fundido. No se pierde
   nada: el contenido es el mismo y llega antes. */
@media (prefers-reduced-motion: reduce) {
  body.gp-saliendo main,
  .gp-main-entrando {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ocultar preloader de inmediato si ya se mostró en esta sesión (evita cualquier FOUC al navegar o refrescar) */
html.gp-no-preloader #preloader,
.gp-no-preloader #preloader,
#preloader.gp-oculto {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}