/**
 * Pro Effects — Hover Column Wipe
 *
 * Wrapper rotated + sized to diagonal × 1.5. Contiene N columnas (display:flex),
 * cada una width = 100/N % del wrapper. Las columnas entran translateY desde
 * top o bottom segun --pe-hcw-from (-1 = top, +1 = bottom).
 *
 * Stagger via transition-delay = idx × stagger.
 *
 * Easing asimetrico: idle state usa dur-out + ease-in, hover state usa dur-in
 * + ease-out (mismo patron que hover-split, NO necesita JS class toggle).
 */

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

/* Wrapper — flex container con N columnas. Rotated por --pe-hcw-rotate. */
.elementor-button.pe-hcw-active .pe-hcw-wrapper {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  display: flex;
  flex-direction: row;
  transform: rotate(var(--pe-hcw-rotate, 0deg));
  transform-origin: center center;
}

/* Cada columna — ancho 1/N del wrapper, altura full */
.elementor-button.pe-hcw-active .pe-hcw-column {
  flex: 1 1 0;
  background: var(--pe-hcw-color, #1a1a1a);
  will-change: transform;
  /* Idle: translateY ±100% (fuera del wrapper visible). --pe-hcw-from = -1 (top) o +1 (bottom) */
  transform: translateY(calc(var(--pe-hcw-from, -1) * 100%));
  transition: transform var(--pe-hcw-dur-out, 0.5s) cubic-bezier(0.32, 0, 0.67, 0);
  transition-delay: calc(var(--pe-hcw-idx, 0) * var(--pe-hcw-stagger, 0.05s));
}

/* Hover — columnas entran a translateY 0, cubriendo el button */
.elementor-button.pe-hcw-active:hover .pe-hcw-column {
  transform: translateY(0);
  transition: transform var(--pe-hcw-dur-in, 0.4s) cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: calc(var(--pe-hcw-idx, 0) * var(--pe-hcw-stagger, 0.05s));
}

/* Text/icon color flip sincronizado */
.elementor-button.pe-hcw-active .elementor-button-text,
.elementor-button.pe-hcw-active .elementor-button-icon {
  transition: color var(--pe-hcw-dur-out, 0.5s) ease;
}
.elementor-button.pe-hcw-active:hover .elementor-button-text,
.elementor-button.pe-hcw-active:hover .elementor-button-icon {
  color: var(--pe-hcw-text-hover, #ffffff);
  transition: color var(--pe-hcw-dur-in, 0.4s) ease;
}
.elementor-button.pe-hcw-active:hover .elementor-button-icon svg {
  fill: var(--pe-hcw-text-hover, #ffffff);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-hcw-active .pe-hcw-column {
    transition: none !important;
    transition-delay: 0s !important;
  }
}