/**
 * Pro Effects — Hover Split
 *
 * DOM construido por JS:
 *   <a class="elementor-button">
 *     <div class="pe-hsp-wrapper">  (rotated, sized via JS)
 *       <div class="pe-hsp-half pe-hsp-half--top">
 *       <div class="pe-hsp-half pe-hsp-half--bottom">
 *     </div>
 *     <span class="content-wrapper">...</span>
 *   </a>
 *
 * Variants (data-pe-hsp-variant):
 *   "cover"  → halves arrancan FUERA del button (translateY ±100%), en hover
 *              entran a translateY 0 cubriendo todo. Se juntan en el centro.
 *   "reveal" → halves arrancan en translateY 0 cubriendo el button, en hover
 *              salen a translateY ±100% revelando el button (center-out).
 *
 * Easing asimetrico: las transitions del idle state usan dur-out + ease-in,
 * las del hover state usan dur-in + ease-out. Asi entry y exit se sienten
 * distintos sin necesidad de keyframes/JS.
 */

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

/* Wrapper rotado — width/height/top/left set by JS */
.elementor-button.pe-hsp-active .pe-hsp-wrapper {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  transform: rotate(var(--pe-hsp-rotate, 0deg));
  transform-origin: center center;
}

/* Halves — cada uno cubre la mitad del wrapper */
.elementor-button.pe-hsp-active .pe-hsp-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--pe-hsp-color, #1a1a1a);
  will-change: transform;
}
.elementor-button.pe-hsp-active .pe-hsp-half--top    { top: 0; }
.elementor-button.pe-hsp-active .pe-hsp-half--bottom { bottom: 0; }

/* ─── VARIANT: COVER ─────────────────────────────────────────────────────
 * IDLE: halves estan FUERA del button (translate ±100%, invisible).
 * HOVER: halves entran a 0 (cubren todo). */
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"] .pe-hsp-half {
  transition: transform var(--pe-hsp-dur-out, 0.55s) cubic-bezier(0.32, 0, 0.67, 0);
}
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"] .pe-hsp-half--top {
  transform: translateY(-100%);
}
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"] .pe-hsp-half--bottom {
  transform: translateY(100%);
}
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"]:hover .pe-hsp-half {
  transform: translateY(0);
  transition: transform var(--pe-hsp-dur-in, 0.45s) cubic-bezier(0.33, 1, 0.68, 1);
}

/* ─── VARIANT: REVEAL ────────────────────────────────────────────────────
 * IDLE: halves cubren el button (translate 0, visible).
 * HOVER: halves se separan saliendo a ±100% (revealing the button). */
.elementor-button.pe-hsp-active[data-pe-hsp-variant="reveal"] .pe-hsp-half {
  transition: transform var(--pe-hsp-dur-out, 0.55s) cubic-bezier(0.32, 0, 0.67, 0);
  transform: translateY(0);
}
.elementor-button.pe-hsp-active[data-pe-hsp-variant="reveal"]:hover .pe-hsp-half--top {
  transform: translateY(-100%);
  transition: transform var(--pe-hsp-dur-in, 0.45s) cubic-bezier(0.33, 1, 0.68, 1);
}
.elementor-button.pe-hsp-active[data-pe-hsp-variant="reveal"]:hover .pe-hsp-half--bottom {
  transform: translateY(100%);
  transition: transform var(--pe-hsp-dur-in, 0.45s) cubic-bezier(0.33, 1, 0.68, 1);
}

/* ─── Text/Icon color flip (solo en variant Cover) ─────────────────────── */
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"] .elementor-button-text,
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"] .elementor-button-icon {
  transition: color var(--pe-hsp-dur-out, 0.55s) ease;
}
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"]:hover .elementor-button-text,
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"]:hover .elementor-button-icon {
  color: var(--pe-hsp-text-hover, #ffffff);
  transition: color var(--pe-hsp-dur-in, 0.45s) ease;
}
.elementor-button.pe-hsp-active[data-pe-hsp-variant="cover"]:hover .elementor-button-icon svg {
  fill: var(--pe-hsp-text-hover, #ffffff);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-hsp-active .pe-hsp-half {
    transition: none !important;
  }
}