/* Pro Effects — Page Transition: Slide Right
 *
 * IN  (page arrival) : body::before slides from translateX(0) → translateX(100%)
 * OUT (page leaving) : .pe-pt-overlay-slide-right from translateX(-100%) → 0
 *
 * Both share the same motion direction (left → right). Continuous sweep.
 *
 * CSS variables consumed (set by the controls system per `controls.json`):
 *   --pe-pt-color    : overlay background color (default #000000)
 *   --pe-pt-easing   : motion curve (default snappy cubic-bezier)
 *   --pro-transition-duration : global duration slider from admin panel (default 0.6s)
 */

/* ─── Fade-IN: pseudo-element on body. Renders from first paint. ─── */
body.pro-page-transition-slide-right::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483646;
  pointer-events: none;
  transform: translateX(0%);
  will-change: transform;
  animation: peSlideRightIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}

@keyframes peSlideRightIn {
  from { transform: translateX(0%); }
  to   { transform: translateX(100%); }
}

/* ─── Fade-OUT: overlay <div> created by the runtime ─── */
.pe-pt-overlay-slide-right {
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483647; /* one above the IN pseudo */
  pointer-events: none;
  transform: translateX(-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-slide-right.is-leaving {
  transform: translateX(0%);
  pointer-events: auto;
}