/**
 * Pro Effects — Marker Wipe (rebuild Buttons.cc 007)
 *
 * Overlay div con bg = marker color cubre el button entero. Reveal con
 * clip-path polygon de 18 vertices (9 por edge, ±2% offset hand-drawn).
 *
 * Animaciones independientes:
 *   peMwIn  → borde derecho avanza 0% → 100% (entry, ease-out)
 *   peMwOut → 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).
 */

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

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

/* Overlay — bg color, clip-path inicial = invisible (collapsed left).
 * Rotation aplicada al overlay entero — la wipe direction efectivamente rota. */
.elementor-button.pe-mw-active .pe-mw-overlay {
  position: absolute;
  inset: 0;
  background: var(--pe-mw-color, #f0e9c8);
  pointer-events: none;
  z-index: 1;
  transform: rotate(var(--pe-mw-rotate, 0deg));
  transform-origin: center center;
  /* Estado inicial: borde derecho en x=0% (con zigzag), borde izquierdo en x=0%.
   * Polygon area = 0 → invisible. */
  clip-path: polygon(
    -2% 0%, -1% 12%, 1% 25%, -1% 37%, 0% 50%, 1% 62%, -2% 75%, -1% 87%, 0% 100%,
    0% 100%, -1% 87%, -2% 75%, 1% 62%, 0% 50%, -1% 37%, 1% 25%, -1% 12%, -2% 0%
  );
}

/* ENTRY animation: borde derecho avanza 0% → 100%, borde izquierdo se queda */
@keyframes peMwIn {
  0% {
    clip-path: polygon(
      -2% 0%, -1% 12%, 1% 25%, -1% 37%, 0% 50%, 1% 62%, -2% 75%, -1% 87%, 0% 100%,
      0% 100%, -1% 87%, -2% 75%, 1% 62%, 0% 50%, -1% 37%, 1% 25%, -1% 12%, -2% 0%
    );
  }
  100% {
    clip-path: polygon(
      102% 0%, 99% 12%, 101% 25%, 98% 37%, 102% 50%, 100% 62%, 99% 75%, 101% 87%, 102% 100%,
      0% 100%, -1% 87%, -2% 75%, 1% 62%, 0% 50%, -1% 37%, 1% 25%, -1% 12%, -2% 0%
    );
  }
}

/* EXIT animation: borde derecho se queda en 100%, borde izquierdo avanza 0% → 100% */
@keyframes peMwOut {
  0% {
    clip-path: polygon(
      102% 0%, 99% 12%, 101% 25%, 98% 37%, 102% 50%, 100% 62%, 99% 75%, 101% 87%, 102% 100%,
      0% 100%, -1% 87%, -2% 75%, 1% 62%, 0% 50%, -1% 37%, 1% 25%, -1% 12%, -2% 0%
    );
  }
  100% {
    clip-path: polygon(
      102% 0%, 99% 12%, 101% 25%, 98% 37%, 102% 50%, 100% 62%, 99% 75%, 101% 87%, 102% 100%,
      102% 100%, 99% 87%, 100% 75%, 102% 62%, 100% 50%, 99% 37%, 101% 25%, 99% 12%, 100% 0%
    );
  }
}

.elementor-button.pe-mw-active.pe-mw-entering .pe-mw-overlay {
  animation: peMwIn var(--pe-mw-dur-in, 0.65s) cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.elementor-button.pe-mw-active.pe-mw-exiting .pe-mw-overlay {
  animation: peMwOut var(--pe-mw-dur-out, 0.75s) cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

/* (RTL/LTR direction reemplazado por --pe-mw-rotate. Para wipe right-to-left
 *  el usuario setea rotate: 180deg) */

/* ─── VARIANT: ZIGZAG DIAGONAL ────────────────────────────────────────────
 * SVG con path zigzag desde TL hacia BR. stroke-dashoffset anima el dibujo
 * progresivo + stroke-width crece de 0 a 250 (cubre el button cuando llega
 * al medio del path). Cuando el path termina, todo el button esta cubierto.
 */
.elementor-button.pe-mw-active[data-pe-mw-variant="zigzag"] .pe-mw-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  color: var(--pe-mw-color, #f0e9c8);
  overflow: visible;
  transform: rotate(var(--pe-mw-rotate, 0deg));
  transform-origin: center center;
}

.elementor-button.pe-mw-active[data-pe-mw-variant="zigzag"] .pe-mw-zigzag-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-width: 0;
}

/* Path de Z tiene 3 segmentos en pathLength normalizado:
 *   Top horizontal:  0    → 0.31
 *   Diagonal:        0.31 → 0.69 (aqui crece el grosor)
 *   Bottom horizontal: 0.69 → 1.0 (grosor explota cubriendo todo)
 *
 * El grosor empieza thin (que la Z se note como Z), engorda en la diagonal
 * (mid-trazo), y explota en el bottom para cubrir el button entero. */
/* Fases:
   - 0-70%: dibujo de la Z con stroke fino y constante (forma visible).
     stroke-width escala con --pe-mw-zigzag-thickness (default 20, range 8-35).
   - 70-100%: la "punta del rotulador" engorda rapidamente hasta inundar
     el button (full cover — width 280 fijo). */
@keyframes peMwZigzagIn {
  0%   { stroke-dashoffset: 1;    stroke-width: 0; }
  10%  { stroke-dashoffset: 0.9;  stroke-width: calc(var(--pe-mw-zigzag-thickness, 20) * 0.4); }
  30%  { stroke-dashoffset: 0.66; stroke-width: calc(var(--pe-mw-zigzag-thickness, 20) * 0.6); }
  50%  { stroke-dashoffset: 0.4;  stroke-width: calc(var(--pe-mw-zigzag-thickness, 20) * 0.75); }
  70%  { stroke-dashoffset: 0;    stroke-width: calc(var(--pe-mw-zigzag-thickness, 20) * 1); }
  85%  { stroke-dashoffset: 0;    stroke-width: 70; }
  100% { stroke-dashoffset: 0;    stroke-width: 280; }
}
@keyframes peMwZigzagOut {
  0%   { stroke-dashoffset: 0;    stroke-width: 280; }
  15%  { stroke-dashoffset: 0;    stroke-width: 70; }
  30%  { stroke-dashoffset: 0;    stroke-width: calc(var(--pe-mw-zigzag-thickness, 20) * 1); }
  50%  { stroke-dashoffset: 0.4;  stroke-width: calc(var(--pe-mw-zigzag-thickness, 20) * 0.75); }
  70%  { stroke-dashoffset: 0.66; stroke-width: calc(var(--pe-mw-zigzag-thickness, 20) * 0.6); }
  90%  { stroke-dashoffset: 0.9;  stroke-width: calc(var(--pe-mw-zigzag-thickness, 20) * 0.4); }
  100% { stroke-dashoffset: 1;    stroke-width: 0; }
}

.elementor-button.pe-mw-active[data-pe-mw-variant="zigzag"].pe-mw-entering .pe-mw-zigzag-path {
  animation: peMwZigzagIn var(--pe-mw-dur-in, 0.65s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.elementor-button.pe-mw-active[data-pe-mw-variant="zigzag"].pe-mw-exiting .pe-mw-zigzag-path {
  animation: peMwZigzagOut var(--pe-mw-dur-out, 0.75s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* (Para zigzag, RTL no se usa — la rotacion graduable es el control de direccion.
 *  El control RTL/LTR queda condicionado solo a Smooth Wipe en el injection PHP) */

/* Text/icon color flip sincronizado con el marker animation */
.elementor-button.pe-mw-active .elementor-button-text,
.elementor-button.pe-mw-active .elementor-button-icon {
  transition: color var(--pe-mw-dur-in, 0.65s) ease;
}
.elementor-button.pe-mw-active.pe-mw-entering .elementor-button-text,
.elementor-button.pe-mw-active.pe-mw-entering .elementor-button-icon {
  color: var(--pe-mw-text-hover, #1a1a1a);
}
.elementor-button.pe-mw-active.pe-mw-entering .elementor-button-icon svg {
  fill: var(--pe-mw-text-hover, #1a1a1a);
}
.elementor-button.pe-mw-active.pe-mw-exiting .elementor-button-text,
.elementor-button.pe-mw-active.pe-mw-exiting .elementor-button-icon {
  transition: color var(--pe-mw-dur-out, 0.75s) ease;
  /* color back to inherit (button original) */
}

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