/* Text Shine — tecnica Uiverse pura: gradient con background-clip:text sobre el texto.
   El icono SVG no soporta background-clip:text, asi que usa animacion de fill en el
   mismo timing con un pequeno animation-delay → se percibe como una luz que termina
   el recorrido del texto y continua al icono. Sin overlays, sin clones, sin border.

   HOVER: el shine se congela en su posicion actual, y los stops del gradient se
   expanden (de 40%/60% a 0%/100%) → el highlight emana desde el punto congelado
   hacia todo el texto con fade. @property permite interpolar los percentages. */

@property --pe-shine-fill-left {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 40%;
}
@property --pe-shine-fill-right {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 60%;
}

/* ── Texto: exact Uiverse ────────────────────────────────────────────── */
.elementor-button.pe-shine-active .elementor-button-text {
  background-image: linear-gradient(
    90deg,
    var(--pe-shine-base, currentColor) 0%,
    var(--pe-shine-base, currentColor) var(--pe-shine-fill-left, 40%),
    var(--pe-shine-highlight, #ffffff) 50%,
    var(--pe-shine-base, currentColor) var(--pe-shine-fill-right, 60%),
    var(--pe-shine-base, currentColor) 100%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  /* Con 300% el highlight (en 50% del gradient) queda FUERA del area visible
     en los extremos del barrido: a bg-pos 100% esta off-screen a la izquierda
     (no ha entrado), a bg-pos 0% esta off-screen a la derecha (ya salio).
     El sweep cruza el texto solo durante la porcion media de la animacion. */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
  color: transparent;
  animation-duration: var(--pe-shine-duration, 3s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transition: --pe-shine-fill-left 0.4s linear, --pe-shine-fill-right 0.4s linear;
}

/* ── Icono SVG: fill pulsante en el mismo ritmo, con delay equivalente
      a ~15% del ciclo → la luz llega al icono justo despues de salir del texto ── */
.elementor-button.pe-shine-active .elementor-button-icon svg,
.elementor-button.pe-shine-active .elementor-button-icon svg * {
  animation-duration: var(--pe-shine-duration, 3s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--pe-shine-duration, 3s) * -0.85);
  /* delay NEGATIVO = arranca "en el futuro" para que sincronice con el texto que
     ya comenzo. Valor ajustado para que el peak del icono coincida con cuando
     la luz saldria del texto. */
}

/* ── Animation names por dir x pausa ─────────────────────────────────── */
.pe-shine-active.pe-shine-dir-ltr.pe-shine-pause-none   .elementor-button-text { animation-name: pe-shine-text-ltr-none; }
.pe-shine-active.pe-shine-dir-ltr.pe-shine-pause-short  .elementor-button-text { animation-name: pe-shine-text-ltr-short; }
.pe-shine-active.pe-shine-dir-ltr.pe-shine-pause-medium .elementor-button-text { animation-name: pe-shine-text-ltr-medium; }
.pe-shine-active.pe-shine-dir-ltr.pe-shine-pause-long   .elementor-button-text { animation-name: pe-shine-text-ltr-long; }
.pe-shine-active.pe-shine-dir-rtl.pe-shine-pause-none   .elementor-button-text { animation-name: pe-shine-text-rtl-none; }
.pe-shine-active.pe-shine-dir-rtl.pe-shine-pause-short  .elementor-button-text { animation-name: pe-shine-text-rtl-short; }
.pe-shine-active.pe-shine-dir-rtl.pe-shine-pause-medium .elementor-button-text { animation-name: pe-shine-text-rtl-medium; }
.pe-shine-active.pe-shine-dir-rtl.pe-shine-pause-long   .elementor-button-text { animation-name: pe-shine-text-rtl-long; }

.pe-shine-active.pe-shine-pause-none   .elementor-button-icon svg,
.pe-shine-active.pe-shine-pause-none   .elementor-button-icon svg * { animation-name: pe-shine-icon-none; }
.pe-shine-active.pe-shine-pause-short  .elementor-button-icon svg,
.pe-shine-active.pe-shine-pause-short  .elementor-button-icon svg * { animation-name: pe-shine-icon-short; }
.pe-shine-active.pe-shine-pause-medium .elementor-button-icon svg,
.pe-shine-active.pe-shine-pause-medium .elementor-button-icon svg * { animation-name: pe-shine-icon-medium; }
.pe-shine-active.pe-shine-pause-long   .elementor-button-icon svg,
.pe-shine-active.pe-shine-pause-long   .elementor-button-icon svg * { animation-name: pe-shine-icon-long; }

/* ── Keyframes del texto (LTR: bg-pos de 100% a 0%) ──────────────────── */
@keyframes pe-shine-text-ltr-none   { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes pe-shine-text-ltr-short  { 0% { background-position: 100% 0; } 80% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
@keyframes pe-shine-text-ltr-medium { 0% { background-position: 100% 0; } 60% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
@keyframes pe-shine-text-ltr-long   { 0% { background-position: 100% 0; } 40% { background-position: 0% 0; } 100% { background-position: 0% 0; } }

@keyframes pe-shine-text-rtl-none   { 0% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
@keyframes pe-shine-text-rtl-short  { 0% { background-position: 0% 0; } 80% { background-position: 100% 0; } 100% { background-position: 100% 0; } }
@keyframes pe-shine-text-rtl-medium { 0% { background-position: 0% 0; } 60% { background-position: 100% 0; } 100% { background-position: 100% 0; } }
@keyframes pe-shine-text-rtl-long   { 0% { background-position: 0% 0; } 40% { background-position: 100% 0; } 100% { background-position: 100% 0; } }

/* ── Keyframes del icono: pulso corto al highlight ───────────────────── */
@keyframes pe-shine-icon-none   { 0%, 100% { fill: var(--pe-shine-highlight, #ffffff); } }
@keyframes pe-shine-icon-short  { 0% { fill: var(--pe-shine-base, currentColor); } 40% { fill: var(--pe-shine-highlight, #ffffff); } 80%, 100% { fill: var(--pe-shine-base, currentColor); } }
@keyframes pe-shine-icon-medium { 0% { fill: var(--pe-shine-base, currentColor); } 30% { fill: var(--pe-shine-highlight, #ffffff); } 60%, 100% { fill: var(--pe-shine-base, currentColor); } }
@keyframes pe-shine-icon-long   { 0% { fill: var(--pe-shine-base, currentColor); } 20% { fill: var(--pe-shine-highlight, #ffffff); } 40%, 100% { fill: var(--pe-shine-base, currentColor); } }

/* ── Hover: congela el shine donde este y expande el highlight hacia todo el texto.
      - animation-play-state: paused → la banda de luz se queda fija en su posicion.
      - --pe-shine-fill-left: 0% y --pe-shine-fill-right: 100% → los stops del gradient
        se abren a los bordes, el highlight deja de ser una banda y pasa a cubrir
        toda la superficie, con un fade que emana desde la posicion congelada.
      La transicion (0.4s) esta declarada en el selector base arriba. ──────── */
.elementor-button.pe-shine-active:hover .elementor-button-text {
  animation-play-state: paused;
  --pe-shine-fill-left: 0%;
  --pe-shine-fill-right: 100%;
}

.elementor-button.pe-shine-active .elementor-button-icon svg,
.elementor-button.pe-shine-active .elementor-button-icon svg * {
  transition: fill 0.4s linear;
}

.elementor-button.pe-shine-active:hover .elementor-button-icon svg,
.elementor-button.pe-shine-active:hover .elementor-button-icon svg * {
  animation-play-state: paused;
  fill: var(--pe-shine-highlight, #ffffff) !important;
}

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