/* Pro Effects — Page Transition: Pixel Reveal
 *
 * 2D grid de cols × rows pixeles. Cada pixel scale(0 → 1) durante OUT y
 * scale(1 → 0) durante IN. Stagger por columna (left-to-right wave).
 *
 * Grid CSS con grid-auto-flow: column → la JS appendea en orden columna-mayor
 * (c=0 todos los rows, c=1 todos los rows, etc) y CSS Grid los posiciona
 * correctamente columna por columna.
 *
 * CSS variables consumed:
 *   --pe-pt-color      : color de los pixels (default #000000)
 *   --pe-pt-easing     : motion curve (default Snappy)
 *   --pe-pt-px-cols    : columnas del grid (default 20, range 4-40)
 *   --pe-pt-px-rows    : filas del grid (default 12, range 3-20)
 *   --pro-transition-duration : global slider (default 0.6s)
 *
 * Per-pixel inline vars (set by JS):
 *   --px-duration : ms — totalDuration / 4 (each pixel animates fast)
 *   --px-delay    : ms — colIndex * staggerCol (left-to-right wave)
 */

/* ─── Containers (creados por runtime onCreate / script.js DOMContentLoaded) ─── */
.pe-pt-overlay-pixel-reveal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(var(--pe-pt-px-cols, 20), 1fr);
  grid-template-rows: repeat(var(--pe-pt-px-rows, 12), 1fr);
  grid-auto-flow: column;
}

.pe-pt-in-pixel-reveal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(var(--pe-pt-px-cols, 20), 1fr);
  grid-template-rows: repeat(var(--pe-pt-px-rows, 12), 1fr);
  grid-auto-flow: column;
}

/* ─── Pixels — common styles ─── */
.pe-pt-overlay-pixel-reveal .pe-pt-px,
.pe-pt-in-pixel-reveal .pe-pt-px {
  background: var(--pe-pt-color, #000000);
  transform-origin: center center;
  will-change: transform;
  transition-property: transform;
  transition-duration: var(--px-duration, 150ms);
  transition-delay: var(--px-delay, 0ms);
  transition-timing-function: var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1));
}

/* OUT initial: all pixels invisible (scale 0) */
.pe-pt-overlay-pixel-reveal .pe-pt-px {
  transform: scale(0);
}
/* OUT final: all pixels at scale(1) — covering, with stagger */
.pe-pt-overlay-pixel-reveal.is-leaving .pe-pt-px {
  transform: scale(1);
}
.pe-pt-overlay-pixel-reveal.is-leaving {
  pointer-events: auto;
}

/* IN initial: all pixels covering (scale 1) at first paint */
.pe-pt-in-pixel-reveal .pe-pt-px {
  transform: scale(1);
}
/* IN final: pixels disappear (scale 0) in same left-to-right wave */
.pe-pt-in-pixel-reveal.is-revealing .pe-pt-px {
  transform: scale(0);
}