/* Pro Effects — Page Transition: Diagonal Wipe
 *
 * IN  (page arrival) : body::before transform: rotate(END) translateX(0% → +100%)
 * OUT (page leaving) : .pe-pt-overlay-diagonal-wipe rotate(START) translateX(-100% → 0%)
 *
 * Start y End son INDEPENDIENTES (mismo patron que Iris Reveal):
 *   - Start = de qué esquina entra el band durante OUT
 *   - End   = a qué esquina sale el band durante IN
 *
 * Por defecto Start=BL (-45deg) y End=TR (-45deg) → diagonal continuo BL→TR
 * (mismo motion vector NE en ambas fases). Cuando el usuario los pone
 * distintos, cambia el angle del overlay entre OUT y IN — la pantalla
 * sigue completamente cubierta en el momento de transición (200vmax square
 * cubre cualquier rotación), por lo que el seam visual es invisible.
 *
 * Combinaciones creativas:
 *   - Start BL + End TR → diagonal continuo BL→TR (default)
 *   - Start BL + End BL → entra desde BL y sale por BL (back-and-forth)
 *   - Start TL + End BR → continuo TL→BR (otro diagonal)
 *
 * Insight matemático: CSS rotate() es CW. rotate(-45deg) hace que local X
 * apunte NE (45° CCW desde screen X). translateX(d) mueve d * own-width
 * along local X. Para "entrar desde BL" durante OUT, el band debe MOVERSE
 * NE (entrar desde el lado SW), por eso angle = -45deg.
 *
 * CSS variables consumed:
 *   --pe-pt-color       : color de la banda (default #000000)
 *   --pe-pt-easing      : motion curve (default Snappy)
 *   --pe-pt-diag-start  : rotación durante OUT (default -45deg = entry from BL)
 *   --pe-pt-diag-end    : rotación durante IN  (default -45deg = exit to TR)
 *   --pro-transition-duration : global slider (default 0.6s)
 *
 * Geometría: overlay 200vmax × 200vmax centrado via top:50%/left:50% +
 * margin negativo. Pivot rotación = centro pantalla. 200vmax garantiza
 * cobertura total en cualquier aspect ratio y cualquier ángulo.
 */

/* ─── Cover-IN: pseudo-element on body. Sale por End corner. ─── */
body.pro-page-transition-diagonal-wipe::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483646;
  pointer-events: none;
  transform: rotate(var(--pe-pt-diag-end, -45deg)) translateX(0%);
  will-change: transform;
  animation: peDiagonalWipeIn var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}

@keyframes peDiagonalWipeIn {
  from { transform: rotate(var(--pe-pt-diag-end, -45deg)) translateX(0%); }
  to   { transform: rotate(var(--pe-pt-diag-end, -45deg)) translateX(100%); }
}

/* ─── Cover-OUT: overlay <div> creado por el runtime. Entra desde Start. ─── */
.pe-pt-overlay-diagonal-wipe {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483647;
  pointer-events: none;
  transform: rotate(var(--pe-pt-diag-start, -45deg)) 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-diagonal-wipe.is-leaving {
  transform: rotate(var(--pe-pt-diag-start, -45deg)) translateX(0%);
  pointer-events: auto;
}