/* Pro Effects — Page Transition: Slide
 *
 * Monodirectional continuous sweep. Direction control: Left/Right/Up/Down.
 *
 * Para cada direction:
 *   Direction = "left"  → OUT enters from RIGHT (translateX 100% → 0%);
 *                         IN exits to LEFT (translateX 0% → -100%)
 *   Direction = "right" → OUT enters from LEFT (translateX -100% → 0%);
 *                         IN exits to RIGHT (translateX 0% → 100%)
 *   Direction = "up"    → OUT enters from BOTTOM (translateY 100% → 0%);
 *                         IN exits to TOP (translateY 0% → -100%)
 *   Direction = "down"  → OUT enters from TOP (translateY -100% → 0%);
 *                         IN exits to BOTTOM (translateY 0% → 100%)
 *
 * Vibe: editorial premium, agencies, portfolios. Awwwards-tier monodirectional gesture.
 *
 * CSS variables:
 *   --pe-pt-color    : color overlay (default #000000)
 *   --pe-pt-easing   : motion curve (default Snappy)
 *   --pe-pt-slide-dir: "left" | "right" | "up" | "down" (default "left")
 *   --pro-transition-duration : global slider (default 0.6s)
 */

/* ─── OUT overlay (created by runtime) ─── */
.pe-pt-overlay-slide {
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483647;
  pointer-events: none;
  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[data-direction="left"]  { transform: translateX(100%); }
.pe-pt-overlay-slide[data-direction="right"] { transform: translateX(-100%); }
.pe-pt-overlay-slide[data-direction="up"]    { transform: translateY(100%); }
.pe-pt-overlay-slide[data-direction="down"]  { transform: translateY(-100%); }

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

/* ─── IN body::before (continues direction, exits opposite edge) ─── */
body.pro-page-transition-slide::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;
}

body.pro-page-transition-slide[data-slide-dir="left"]::before {
  animation: peSlideLeftIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}
body.pro-page-transition-slide[data-slide-dir="right"]::before {
  animation: peSlideRightIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}
body.pro-page-transition-slide[data-slide-dir="up"]::before {
  animation: peSlideUpIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}
body.pro-page-transition-slide[data-slide-dir="down"]::before {
  animation: peSlideDownIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}
/* Default fallback (server-render before JS sets data-slide-dir) — Left */
body.pro-page-transition-slide:not([data-slide-dir])::before {
  animation: peSlideLeftIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}

@keyframes peSlideLeftIn  { from { transform: translateX(0%); }   to { transform: translateX(-100%); } }
@keyframes peSlideRightIn { from { transform: translateX(0%); }   to { transform: translateX(100%); } }
@keyframes peSlideUpIn    { from { transform: translateY(0%); }   to { transform: translateY(-100%); } }
@keyframes peSlideDownIn  { from { transform: translateY(0%); }   to { transform: translateY(100%); } }