/**
 * Pro Effects — Glitch Text
 *
 * ::before y ::after sobre .elementor-button-text duplican el texto
 * (via attr(data-text)) y se animan con offset para crear chromatic
 * aberration en hover.
 *
 * Intensity:
 *   subtle  → solo offset estatico (sin shake)
 *   medium  → offset + shake leve
 *   strong  → offset + clip-path skips (segmentos brincan)
 */

.elementor-button.pe-glt-active .pe-glt-text {
  position: relative;
  display: inline-block;
}
.elementor-button.pe-glt-active .pe-glt-text::before,
.elementor-button.pe-glt-active .pe-glt-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.elementor-button.pe-glt-active .pe-glt-text::before {
  color: var(--pe-glt-color-a, #00ffff);
  text-shadow: none;
}
.elementor-button.pe-glt-active .pe-glt-text::after {
  color: var(--pe-glt-color-b, #ff00ff);
  text-shadow: none;
}

/* Hover: revelar canales */
.elementor-button.pe-glt-active:hover .pe-glt-text::before,
.elementor-button.pe-glt-active:hover .pe-glt-text::after {
  opacity: 0.95;
}

/* SUBTLE — solo offset estatico (no animation) */
.elementor-button.pe-glt-active[data-pe-glt-intensity="subtle"]:hover .pe-glt-text::before {
  transform: translate(calc(var(--pe-glt-offset, 3px) * -1), 0);
}
.elementor-button.pe-glt-active[data-pe-glt-intensity="subtle"]:hover .pe-glt-text::after {
  transform: translate(var(--pe-glt-offset, 3px), 0);
}

/* MEDIUM — offset + shake suave */
@keyframes peGltShakeA {
  0%   { transform: translate(calc(var(--pe-glt-offset) * -1), 0); }
  20%  { transform: translate(calc(var(--pe-glt-offset) * -0.6), -1px); }
  40%  { transform: translate(calc(var(--pe-glt-offset) * -1.1), 1px); }
  60%  { transform: translate(calc(var(--pe-glt-offset) * -0.4), 0); }
  80%  { transform: translate(calc(var(--pe-glt-offset) * -0.9), 1px); }
  100% { transform: translate(calc(var(--pe-glt-offset) * -1), 0); }
}
@keyframes peGltShakeB {
  0%   { transform: translate(var(--pe-glt-offset), 0); }
  20%  { transform: translate(calc(var(--pe-glt-offset) * 0.7), 1px); }
  40%  { transform: translate(calc(var(--pe-glt-offset) * 1.2), -1px); }
  60%  { transform: translate(calc(var(--pe-glt-offset) * 0.5), 0); }
  80%  { transform: translate(calc(var(--pe-glt-offset) * 1.0), -1px); }
  100% { transform: translate(var(--pe-glt-offset), 0); }
}
.elementor-button.pe-glt-active[data-pe-glt-intensity="medium"]:hover .pe-glt-text::before {
  animation: peGltShakeA var(--pe-glt-speed, 0.5s) steps(5) infinite;
}
.elementor-button.pe-glt-active[data-pe-glt-intensity="medium"]:hover .pe-glt-text::after {
  animation: peGltShakeB var(--pe-glt-speed, 0.5s) steps(5) infinite;
}

/* STRONG — shake + clip-path skips */
@keyframes peGltSkipA {
  0%   { transform: translate(calc(var(--pe-glt-offset) * -1), 0); clip-path: inset(0 0 60% 0); }
  20%  { transform: translate(calc(var(--pe-glt-offset) * -1.3), 1px); clip-path: inset(40% 0 20% 0); }
  40%  { transform: translate(calc(var(--pe-glt-offset) * -0.5), -1px); clip-path: inset(70% 0 0 0); }
  60%  { transform: translate(calc(var(--pe-glt-offset) * -1.2), 1px); clip-path: inset(20% 0 50% 0); }
  80%  { transform: translate(calc(var(--pe-glt-offset) * -0.8), 0); clip-path: inset(0 0 80% 0); }
  100% { transform: translate(calc(var(--pe-glt-offset) * -1), 0); clip-path: inset(0); }
}
@keyframes peGltSkipB {
  0%   { transform: translate(var(--pe-glt-offset), 0); clip-path: inset(50% 0 10% 0); }
  20%  { transform: translate(calc(var(--pe-glt-offset) * 1.2), -1px); clip-path: inset(0 0 70% 0); }
  40%  { transform: translate(calc(var(--pe-glt-offset) * 0.4), 1px); clip-path: inset(20% 0 40% 0); }
  60%  { transform: translate(calc(var(--pe-glt-offset) * 1.3), -1px); clip-path: inset(60% 0 0 0); }
  80%  { transform: translate(calc(var(--pe-glt-offset) * 0.9), 0); clip-path: inset(10% 0 60% 0); }
  100% { transform: translate(var(--pe-glt-offset), 0); clip-path: inset(0); }
}
.elementor-button.pe-glt-active[data-pe-glt-intensity="strong"]:hover .pe-glt-text::before {
  animation: peGltSkipA var(--pe-glt-speed, 0.5s) steps(5) infinite;
}
.elementor-button.pe-glt-active[data-pe-glt-intensity="strong"]:hover .pe-glt-text::after {
  animation: peGltSkipB var(--pe-glt-speed, 0.5s) steps(5) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-glt-active .pe-glt-text::before,
  .elementor-button.pe-glt-active .pe-glt-text::after {
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
  }
}