/* Pro Effects — Page Transition: Basic Pixel
 *
 * Variante de Pixel Reveal: pixels aparecen en orden RANDOM (o radial
 * center/edges según control). Sin direccion lineal — sensacion de "fill
 * caotico" o "explosion radial" en vez de wave.
 *
 * Appearance modes:
 *   - scale (default) : cada pixel scale(0 → 1) — pop-in suave
 *   - instant         : cada pixel snap (opacity 0 → 1 instantaneo)
 *
 * El JS setea data-appearance en el container; CSS branchea via attribute selector.
 *
 * CSS variables consumed:
 *   --pe-pt-color           : color (default #000000)
 *   --pe-pt-easing          : motion curve (default Snappy)
 *   --pe-pt-px-cols         : columnas (default 20)
 *   --pe-pt-px-rows         : filas (default 12)
 *   --pe-pt-px-order        : "random" | "center" | "edges"
 *   --pe-pt-px-appearance   : "scale" | "instant"
 *   --pro-transition-duration : global slider (default 0.6s)
 */

/* ─── Containers ─── */
.pe-pt-overlay-basic-pixel {
  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);
}

.pe-pt-in-basic-pixel {
  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);
}

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

/* ════════════════════════════════════════════════════════════════════════
   APPEARANCE: SCALE (default — pop-in con escala)
   ════════════════════════════════════════════════════════════════════════ */
.pe-pt-overlay-basic-pixel[data-appearance="scale"] .pe-pt-px,
.pe-pt-in-basic-pixel[data-appearance="scale"] .pe-pt-px {
  transition-property: transform;
  transition-duration: var(--px-duration, 150ms);
}
.pe-pt-overlay-basic-pixel[data-appearance="scale"] .pe-pt-px {
  transform: scale(0);
}
.pe-pt-overlay-basic-pixel[data-appearance="scale"].is-leaving .pe-pt-px {
  transform: scale(1);
}
.pe-pt-in-basic-pixel[data-appearance="scale"] .pe-pt-px {
  transform: scale(1);
}
.pe-pt-in-basic-pixel[data-appearance="scale"].is-revealing .pe-pt-px {
  transform: scale(0);
}

/* ════════════════════════════════════════════════════════════════════════
   APPEARANCE: INSTANT (snap on, snap off — sin animacion del pixel)
   El delay sigue funcionando para el orden, pero la transition es de 1ms
   (snap) y se anima opacity para que transitionend dispare consistente.
   ════════════════════════════════════════════════════════════════════════ */
.pe-pt-overlay-basic-pixel[data-appearance="instant"] .pe-pt-px,
.pe-pt-in-basic-pixel[data-appearance="instant"] .pe-pt-px {
  transition-property: opacity;
  transition-duration: 1ms;
  transition-timing-function: linear;
}
.pe-pt-overlay-basic-pixel[data-appearance="instant"] .pe-pt-px {
  opacity: 0;
}
.pe-pt-overlay-basic-pixel[data-appearance="instant"].is-leaving .pe-pt-px {
  opacity: 1;
}
.pe-pt-in-basic-pixel[data-appearance="instant"] .pe-pt-px {
  opacity: 1;
}
.pe-pt-in-basic-pixel[data-appearance="instant"].is-revealing .pe-pt-px {
  opacity: 0;
}

/* Pointer events go to overlay only when leaving (block clicks on old page) */
.pe-pt-overlay-basic-pixel.is-leaving {
  pointer-events: auto;
}