/* Pro Effects — Page Transition: Slide Down
 *
 * IN  (page arrival) : body::before slides from translateY(0) → translateY(100%)
 * OUT (page leaving) : .pe-pt-overlay-slide-down from translateY(-100%) → 0
 *
 * Both share the same motion direction (top → bottom). 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-down::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483646;
  pointer-events: none;
  transform: translateY(0%);
  will-change: transform;
  animation: peSlideDownIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}

@keyframes peSlideDownIn {
  from { transform: translateY(0%); }
  to   { transform: translateY(100%); }
}

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