/**
 * Pro Effects — Hover Pixel
 *
 * Grid CSS (cols × rows) absolute inset 0 sobre el button. Cada pixel idle:
 * scale 0 + opacity 0. En :hover: scale 1 + opacity 1 con transition-delay
 * proporcional a su distancia Manhattan al origen.
 *
 * Asimetria entry/exit via transitions distintas en idle vs hover state.
 */

.elementor-button.pe-hpx-active {
  position: relative;
  overflow: hidden;
}
.elementor-button.pe-hpx-active .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
}

/* Grid container — cubre todo el button */
.elementor-button.pe-hpx-active .pe-hpx-grid {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
  z-index: 1;
}

/* Idle (exit): pixel oculto. dur-out + ease-in. */
.elementor-button.pe-hpx-active .pe-hpx-pixel {
  background: var(--pe-hpx-color, #1a1a1a);
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: center center;
  transition:
    transform var(--pe-hpx-dur-out, 0.4s) cubic-bezier(0.32, 0, 0.67, 0),
    opacity   var(--pe-hpx-dur-out, 0.4s) cubic-bezier(0.32, 0, 0.67, 0);
  transition-delay: calc(var(--pe-hpx-d, 0) * var(--pe-hpx-stagger, 0.025s));
}

/* Hover (entry): pixel visible. dur-in + ease-out. */
.elementor-button.pe-hpx-active:hover .pe-hpx-pixel,
.elementor-button.pe-hpx-active:focus-visible .pe-hpx-pixel {
  transform: scale(1);
  opacity: 1;
  transition:
    transform var(--pe-hpx-dur-in, 0.3s) cubic-bezier(0.33, 1, 0.68, 1),
    opacity   var(--pe-hpx-dur-in, 0.3s) cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: calc(var(--pe-hpx-d, 0) * var(--pe-hpx-stagger, 0.025s));
}

/* Text/icon color flip sincronizado */
.elementor-button.pe-hpx-active .elementor-button-text,
.elementor-button.pe-hpx-active .elementor-button-icon {
  position: relative;
  z-index: 2;
  transition: color var(--pe-hpx-dur-out, 0.4s) cubic-bezier(0.32, 0, 0.67, 0);
}
.elementor-button.pe-hpx-active:hover .elementor-button-text,
.elementor-button.pe-hpx-active:hover .elementor-button-icon,
.elementor-button.pe-hpx-active:focus-visible .elementor-button-text,
.elementor-button.pe-hpx-active:focus-visible .elementor-button-icon {
  color: var(--pe-hpx-text-hover, #ffffff);
  transition: color var(--pe-hpx-dur-in, 0.3s) cubic-bezier(0.33, 1, 0.68, 1);
}
.elementor-button.pe-hpx-active:hover .elementor-button-icon svg,
.elementor-button.pe-hpx-active:focus-visible .elementor-button-icon svg {
  fill: var(--pe-hpx-text-hover, #ffffff);
}

/* Reduced motion bail-out */
@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-hpx-active .pe-hpx-pixel {
    transition: none !important;
    transition-delay: 0s !important;
  }
  .elementor-button.pe-hpx-active .elementor-button-text,
  .elementor-button.pe-hpx-active .elementor-button-icon {
    transition: none !important;
  }
}