/* Icon Fly — Button extension styles */

.elementor-button.pe-if-active {
  overflow: hidden;
  cursor: pointer;
}

/* Texto: transición para deslizar fuera */
.pe-if-active .elementor-button-text {
  transition: transform var(--pe-if-duration, 0.5s) ease;
}

/* Icono: transición para centrar + vuelo */
.pe-if-active .elementor-button-icon {
  transition: transform var(--pe-if-duration, 0.3s) ease;
}

/* === Hover: icono izquierda (default) — texto sale a la DERECHA === */
.elementor-button.pe-if-active:hover .elementor-button-text {
  transform: translateX(var(--pe-if-text-exit, 200px));
}

/* Icono se centra via transición */
.elementor-button.pe-if-active:hover .elementor-button-icon {
  transform: translateX(var(--pe-if-center-offset, 0px))
             rotate(var(--pe-if-rotation, 45deg))
             scale(var(--pe-if-scale, 1.1));
}

/* Vuelo solo cuando la clase JS está activa (se agrega con delay, se remueve en mouseleave) */
.elementor-button.pe-if-active .elementor-button-icon.pe-if-flying {
  animation: pe-if-fly 0.6s ease-in-out infinite alternate;
}

/* === Hover: icono derecha — texto sale a la IZQUIERDA === */
.elementor-button.pe-if-active[data-pe-if-dir="right"]:hover .elementor-button-text {
  transform: translateX(calc(-1 * var(--pe-if-text-exit, 200px)));
}

.elementor-button.pe-if-active[data-pe-if-dir="right"]:hover .elementor-button-icon {
  transform: translateX(var(--pe-if-center-offset, 0px))
             rotate(calc(-1 * var(--pe-if-rotation, 45deg)))
             scale(var(--pe-if-scale, 1.1));
}

/* Keyframe de vuelo (oscilación vertical) */
@keyframes pe-if-fly {
  from {
    transform: translateX(var(--pe-if-center-offset, 0px))
               rotate(var(--pe-if-rotation, 45deg))
               scale(var(--pe-if-scale, 1.1))
               translateY(var(--pe-if-fly-intensity, 2px));
  }
  to {
    transform: translateX(var(--pe-if-center-offset, 0px))
               rotate(var(--pe-if-rotation, 45deg))
               scale(var(--pe-if-scale, 1.1))
               translateY(calc(-1 * var(--pe-if-fly-intensity, 2px)));
  }
}

/* Keyframe RTL (rotación invertida) */
@keyframes pe-if-fly-rtl {
  from {
    transform: translateX(var(--pe-if-center-offset, 0px))
               rotate(calc(-1 * var(--pe-if-rotation, 45deg)))
               scale(var(--pe-if-scale, 1.1))
               translateY(var(--pe-if-fly-intensity, 2px));
  }
  to {
    transform: translateX(var(--pe-if-center-offset, 0px))
               rotate(calc(-1 * var(--pe-if-rotation, 45deg)))
               scale(var(--pe-if-scale, 1.1))
               translateY(calc(-1 * var(--pe-if-fly-intensity, 2px)));
  }
}

.elementor-button.pe-if-active[data-pe-if-dir="right"] .elementor-button-icon.pe-if-flying {
  animation: pe-if-fly-rtl 0.6s ease-in-out infinite alternate;
}

/* Active state */
.elementor-button.pe-if-active:active {
  transform: scale(0.95);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .pe-if-active .elementor-button-text,
  .pe-if-active .elementor-button-icon {
    transition: none !important;
    animation: none !important;
  }
}