/* Pro Effects — Page Transition: Curtain (display name "Curtain Reveal")
 *
 * IN  (page arrival) : body::before translate(0,0) → translate(--curtain-from)
 * OUT (page leaving) : .pe-pt-overlay-curtain translate(--curtain-from) → translate(0,0)
 *
 * RETRACT motion (vs Slide, which is continuous through to opposite side).
 *
 * Una sola CSS var holds the off-screen translate value:
 *   --pe-pt-curtain-from: "0 -100%"  → from top (default, theatrical descent)
 *   --pe-pt-curtain-from: "0 100%"   → from bottom (curtain rises)
 *   --pe-pt-curtain-from: "-100% 0"  → from left
 *   --pe-pt-curtain-from: "100% 0"   → from right
 *
 * Both phases reference the SAME var → IN automatically retraces OUT.
 *
 * CSS variables consumed:
 *   --pe-pt-color         : color (default #000000)
 *   --pe-pt-easing        : motion curve (default Snappy)
 *   --pe-pt-curtain-from  : posición fuera de pantalla (default "0 -100%" = top)
 *   --pro-transition-duration : global slider (default 0.6s)
 */

body.pro-page-transition-curtain::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483646;
  pointer-events: none;
  transform: translate(0, 0);
  will-change: transform;
  animation: peCurtainIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}

@keyframes peCurtainIn {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--pe-pt-curtain-from, 0, -100%)); }
}

.pe-pt-overlay-curtain {
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483647;
  pointer-events: none;
  transform: translate(var(--pe-pt-curtain-from, 0, -100%));
  will-change: transform;
  transition: transform var(--pro-transition-duration, 0.6s)
              var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1));
}

.pe-pt-overlay-curtain.is-leaving {
  transform: translate(0, 0);
  pointer-events: auto;
}