/* Pro Effects — Page Transition: Fade

   ARQUITECTURA:
   - Fade-OUT (al hacer click en link): un <div class="pe-pt-overlay"> que JS
     inserta dinamicamente. Animacion via clase .is-leaving.
   - Fade-IN (al cargar la pagina nueva): un body::before pseudo-element. Pure
     CSS animation, sin JS — robusto. Si el script no carga, igual fadea.

   Ambos usan las mismas vars: --pe-pt-color (default #fff) y
   --pro-transition-duration (default 0.5s).
*/

/* ─── Fade-IN: pseudo-element en body. Renderiza desde el primer paint ─── */
body.pro-page-transition-fade::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #ffffff);
  z-index: 2147483646; /* uno menos que el overlay del fade-OUT */
  pointer-events: none;
  will-change: opacity;
  animation: peFadeIn var(--pro-transition-duration, 0.5s) ease-in-out forwards;
}

@keyframes peFadeIn {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ─── Fade-OUT: overlay <div> creado por JS ─── */
.pe-pt-overlay {
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #ffffff);
  opacity: 0;
  pointer-events: none;
  z-index: 2147483647;
  transition: opacity var(--pro-transition-duration, 0.5s) ease-in-out;
  will-change: opacity;
}

.pe-pt-overlay.is-leaving {
  opacity: 1;
  pointer-events: auto;
}