/* Pro Effects — Page Transition: Column Wipe (TWO MODES)
 *
 * Mode "inverse" (default) — alternating directions, simultaneous:
 *   Even cols slide DOWN from top, odd cols slide UP from bottom.
 *   Converge at center to cover. IN side retracts each col to its origin.
 *
 * Mode "cascade" — same direction, staggered with delay:
 *   All cols slide from `--pe-pt-col-start-y` (top or bottom) to cover.
 *   IN side retracts to `--pe-pt-col-end-y`. JS computes per-col delay so
 *   col 0 starts first, col N-1 ends at the global duration.
 *
 * The mode is set on the container via data-mode="inverse"|"cascade" by the
 * JS at injection time, reading from --pe-pt-col-mode CSS var.
 *
 * CSS variables consumed:
 *   --pe-pt-color         : color de las columnas (default #000000)
 *   --pe-pt-easing        : motion curve (default Snappy)
 *   --pe-pt-col-count     : numero de columnas (default 4, range 2-12)
 *   --pe-pt-col-mode      : "inverse" | "cascade" (default "inverse")
 *   --pe-pt-col-start-y   : cascade only — translateY origin "-100%"|"100%"
 *   --pe-pt-col-end-y     : cascade only — translateY destination "-100%"|"100%"
 *   --pro-transition-duration : global slider (default 0.6s)
 *
 * Per-column inline vars (set by JS in cascade mode only):
 *   --col-duration : ms — shorter than total (lets cols overlap with stagger)
 *   --col-delay    : ms — when this col starts animating
 */

/* ─── Containers (creados por runtime onCreate / script.js DOMContentLoaded) ─── */
.pe-pt-overlay-column-wipe {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: transparent;
}

.pe-pt-in-column-wipe {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: transparent;
}

/* ─── Columnas — common positioning ─── */
.pe-pt-overlay-column-wipe .pe-pt-col,
.pe-pt-in-column-wipe .pe-pt-col {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / var(--pe-pt-col-count, 4));
  left: calc(var(--col-index) * (100% / var(--pe-pt-col-count, 4)));
  background: var(--pe-pt-color, #000000);
  will-change: transform;
  transition: transform var(--pro-transition-duration, 0.6s)
              var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1));
}

/* ════════════════════════════════════════════════════════════════════════
   MODE: INVERSE (alternating directions, simultaneous — DEFAULT)
   ════════════════════════════════════════════════════════════════════════ */

/* OUT initial: even off-screen above, odd off-screen below */
.pe-pt-overlay-column-wipe[data-mode="inverse"] .pe-pt-col[data-parity="even"] {
  transform: translateY(-100%);
}
.pe-pt-overlay-column-wipe[data-mode="inverse"] .pe-pt-col[data-parity="odd"] {
  transform: translateY(100%);
}
/* OUT final: all cols converge to center */
.pe-pt-overlay-column-wipe[data-mode="inverse"].is-leaving .pe-pt-col {
  transform: translateY(0);
}

/* IN initial: all covering */
.pe-pt-in-column-wipe[data-mode="inverse"] .pe-pt-col {
  transform: translateY(0);
}
/* IN final: each col retracts to its original origin */
.pe-pt-in-column-wipe[data-mode="inverse"].is-revealing .pe-pt-col[data-parity="even"] {
  transform: translateY(-100%);
}
.pe-pt-in-column-wipe[data-mode="inverse"].is-revealing .pe-pt-col[data-parity="odd"] {
  transform: translateY(100%);
}

/* ════════════════════════════════════════════════════════════════════════
   MODE: CASCADE (same direction, staggered)
   ════════════════════════════════════════════════════════════════════════ */

/* OUT initial: all cols off-screen at the START side */
.pe-pt-overlay-column-wipe[data-mode="cascade"] .pe-pt-col {
  transform: translateY(var(--pe-pt-col-start-y, -100%));
  /* JS sets --col-duration and --col-delay per column for stagger */
  transition-duration: var(--col-duration, var(--pro-transition-duration, 0.6s));
  transition-delay: var(--col-delay, 0ms);
}
/* OUT final: all cols at center (covering), each at its delayed timing */
.pe-pt-overlay-column-wipe[data-mode="cascade"].is-leaving .pe-pt-col {
  transform: translateY(0);
}

/* IN initial: all covering */
.pe-pt-in-column-wipe[data-mode="cascade"] .pe-pt-col {
  transform: translateY(0);
  transition-duration: var(--col-duration, var(--pro-transition-duration, 0.6s));
  transition-delay: var(--col-delay, 0ms);
}
/* IN final: all cols exit at the END side, staggered */
.pe-pt-in-column-wipe[data-mode="cascade"].is-revealing .pe-pt-col {
  transform: translateY(var(--pe-pt-col-end-y, -100%));
}