/**
 * Pro Effects — Hover Slide
 *
 * Overlay div con bg solido cubre el button entero. Reveal con clip-path
 * polygon RECTO (no hand-drawn), barriendo de izquierda a derecha.
 *
 * Animaciones independientes:
 *   peHslIn  → borde derecho avanza 0% → 100% (entry, ease-out)
 *   peHslOut → borde izquierdo avanza 0% → 100% (exit, ease-in)
 *   Ambos van LTR (mismo direction). Por eso necesitamos animations distintas
 *   en lugar de :hover natural (que seria reverse simetrico).
 *
 * Direccion configurable via --pe-hsl-rotate (rota el overlay entero).
 */

.elementor-button.pe-hsl-active {
  position: relative;
  overflow: hidden; /* clip al overlay si excede el button */
}

.elementor-button.pe-hsl-active .elementor-button-content-wrapper {
  position: relative;
  z-index: 2; /* text/icon ENCIMA del overlay */
}

/* Overlay — bg color, clip-path inicial = invisible (collapsed left).
 * Rotation aplicada al overlay entero — la wipe direction efectivamente rota.
 * width/height/top/left set por JS para asegurar cobertura en cualquier rotacion. */
.elementor-button.pe-hsl-active .pe-hsl-overlay {
  position: absolute;
  background: var(--pe-hsl-color, #1a1a1a);
  pointer-events: none;
  z-index: 1;
  transform: rotate(var(--pe-hsl-rotate, 0deg));
  transform-origin: center center;
  /* Estado inicial: borde derecho en x=0%, borde izquierdo en x=0%.
   * Polygon area = 0 → invisible. */
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

/* ENTRY animation: borde derecho avanza 0% → 100%, borde izquierdo se queda en 0% */
@keyframes peHslIn {
  0%   { clip-path: polygon(0% 0%,   0% 0%,   0% 100%,   0% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%,   0% 100%); }
}

/* EXIT animation: borde derecho ya esta en 100%, borde izquierdo avanza 0% → 100%.
 * El panel sigue moviendose en la misma direccion (LTR), saliendo por la derecha. */
@keyframes peHslOut {
  0%   { clip-path: polygon(  0% 0%, 100% 0%, 100% 100%,   0% 100%); }
  100% { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
}

.elementor-button.pe-hsl-active.pe-hsl-entering .pe-hsl-overlay {
  animation: peHslIn var(--pe-hsl-dur-in, 0.5s) cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.elementor-button.pe-hsl-active.pe-hsl-exiting .pe-hsl-overlay {
  animation: peHslOut var(--pe-hsl-dur-out, 0.5s) cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

/* Text/icon color flip sincronizado con el panel */
.elementor-button.pe-hsl-active .elementor-button-text,
.elementor-button.pe-hsl-active .elementor-button-icon {
  transition: color var(--pe-hsl-dur-in, 0.5s) ease;
}
.elementor-button.pe-hsl-active.pe-hsl-entering .elementor-button-text,
.elementor-button.pe-hsl-active.pe-hsl-entering .elementor-button-icon {
  color: var(--pe-hsl-text-hover, #ffffff);
}
.elementor-button.pe-hsl-active.pe-hsl-entering .elementor-button-icon svg {
  fill: var(--pe-hsl-text-hover, #ffffff);
}
.elementor-button.pe-hsl-active.pe-hsl-exiting .elementor-button-text,
.elementor-button.pe-hsl-active.pe-hsl-exiting .elementor-button-icon {
  transition: color var(--pe-hsl-dur-out, 0.5s) ease;
  /* color back to inherit (button original) */
}

/* Reduced motion — sin animation, panel visible solo en :hover (fade simple) */
@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-hsl-active .pe-hsl-overlay {
    transition: opacity 0.2s ease;
    opacity: 0;
    clip-path: none !important;
    animation: none !important;
  }
  .elementor-button.pe-hsl-active:hover .pe-hsl-overlay {
    opacity: 1;
  }
}