/* Pro Effects — Page Transition: Pixel Deconstruct
 *
 * Variante "noisy" de Pixel Reveal: cada pixel tiene opacidad final variada
 * (random per-pixel, controlada por --pe-pt-px-noise) + jitter en el delay
 * del wave. El resultado tiene textura "deconstruida" en vez de wave limpio.
 *
 * Backstop sólido detrás del grid garantiza cobertura 100% al momento de
 * navegar (sino el browser flashearía entre páginas con el grid translúcido).
 *
 * CSS variables consumed:
 *   --pe-pt-color      : color base (default #000000)
 *   --pe-pt-easing     : motion curve (default Snappy)
 *   --pe-pt-px-cols    : columnas (default 20, range 4-40)
 *   --pe-pt-px-rows    : filas (default 12, range 3-20)
 *   --pe-pt-px-noise   : intensidad de deconstrucción (default 70, 0-100)
 *   --pro-transition-duration : global slider (default 0.6s)
 *
 * Per-pixel inline vars (set por JS):
 *   --px-duration      : ms — totalDuration / 4
 *   --px-delay         : ms — colIndex * staggerCol + jitter
 *   --px-final-opacity : 0.3 a 1.0, random per pixel
 */

/* ─── Containers ─── */
.pe-pt-overlay-pixel-deconstruct {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: transparent;
}

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

/* ─── Solid backstop — fades in at the end of the timeline ─── */
.pe-pt-overlay-pixel-deconstruct .pe-pt-px-solid,
.pe-pt-in-pixel-deconstruct .pe-pt-px-solid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pe-pt-color, #000000);
  opacity: 0;
  will-change: opacity;
  transition: opacity calc(var(--pro-transition-duration, 0.6s) * 0.25)
              ease-out;
  transition-delay: calc(var(--pro-transition-duration, 0.6s) * 0.75);
}
.pe-pt-overlay-pixel-deconstruct.is-leaving .pe-pt-px-solid {
  opacity: 1;
}
/* IN: solid starts at full coverage, fades out FIRST (revealing the noisy
 * pixel grid below as it dissolves) */
.pe-pt-in-pixel-deconstruct .pe-pt-px-solid {
  opacity: 1;
  /* Override delay/duration for IN: fade out at the START, not end */
  transition: opacity calc(var(--pro-transition-duration, 0.6s) * 0.25)
              ease-in;
  transition-delay: 0ms;
}
.pe-pt-in-pixel-deconstruct.is-revealing .pe-pt-px-solid {
  opacity: 0;
}

/* ─── Pixel grid container ─── */
.pe-pt-overlay-pixel-deconstruct .pe-pt-px-grid,
.pe-pt-in-pixel-deconstruct .pe-pt-px-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  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-deconstruct .pe-pt-px,
.pe-pt-in-pixel-deconstruct .pe-pt-px {
  background: var(--pe-pt-color, #000000);
  transform-origin: center;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  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: invisible (opacity 0, scale 0) */
.pe-pt-overlay-pixel-deconstruct .pe-pt-px {
  opacity: 0;
  transform: scale(0);
}
/* OUT final: each pixel reaches its OWN final opacity (varied) at scale 1 */
.pe-pt-overlay-pixel-deconstruct.is-leaving .pe-pt-px {
  opacity: var(--px-final-opacity, 1);
  transform: scale(1);
}
.pe-pt-overlay-pixel-deconstruct.is-leaving {
  pointer-events: auto;
}

/* IN initial: pixels at their final opacity, scaled (covering with texture) */
.pe-pt-in-pixel-deconstruct .pe-pt-px {
  opacity: var(--px-final-opacity, 1);
  transform: scale(1);
}
/* IN final: pixels disappear (scale 0, opacity 0) — wave continues */
.pe-pt-in-pixel-deconstruct.is-revealing .pe-pt-px {
  opacity: 0;
  transform: scale(0);
}