/* SexyWidgets LV - Mejoritas - Efecto Degradado Animado
   Funciona en frontend + editor preview (iframe) gracias a CSS vars + selectors + prefix_class
*/

.sexy-mj-effect-efecto-degradado-animado {
  position: relative;
  overflow: hidden;

  /* ✅ Defaults EN EL WRAPPER (para que Elementor selectors los puedan sobreescribir) */
  --sexy-mj-grad-c1: #be185d;
  --sexy-mj-grad-c2: #ec4899;
  --sexy-mj-grad-c3: #d946ef;
  --sexy-mj-grad-c4: #0ea5e9;
  --sexy-mj-grad-angle: -45deg;
  --sexy-mj-grad-size-min: 300%;
  --sexy-mj-grad-size-max: 450%;
  --sexy-mj-grad-duration: 10s;
  --sexy-mj-grad-easing: ease-in-out;
}

.sexy-mj-effect-efecto-degradado-animado > * {
  position: relative;
  z-index: 1;
}

.sexy-mj-effect-efecto-degradado-animado::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: linear-gradient(
    var(--sexy-mj-grad-angle),
    var(--sexy-mj-grad-c1),
    var(--sexy-mj-grad-c2),
    var(--sexy-mj-grad-c3),
    var(--sexy-mj-grad-c4)
  );

  background-size: var(--sexy-mj-grad-size-min);
  background-position: 0% 50%;

  /* ✅ Default anim por si por lo que sea no entra la clase sexy-mj-grad-anim-* */
  animation-name: sexy_mj_grad_pan_lr;
  animation-duration: var(--sexy-mj-grad-duration);
  animation-timing-function: var(--sexy-mj-grad-easing);
  animation-iteration-count: infinite;
  animation-fill-mode: both;

  will-change: background-position, background-size, transform;
  border-radius: inherit;
}

/* Loop: una vez */
.sexy-mj-grad-loop-once.sexy-mj-effect-efecto-degradado-animado::before {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* Animación por clase (prefix_class => sexy-mj-grad-anim-*) */
.sexy-mj-grad-anim-pan_lr.sexy-mj-effect-efecto-degradado-animado::before { animation-name: sexy_mj_grad_pan_lr; }
.sexy-mj-grad-anim-pan_tb.sexy-mj-effect-efecto-degradado-animado::before { animation-name: sexy_mj_grad_pan_tb; }
.sexy-mj-grad-anim-pan_diag.sexy-mj-effect-efecto-degradado-animado::before { animation-name: sexy_mj_grad_pan_diag; }
.sexy-mj-grad-anim-pan_square.sexy-mj-effect-efecto-degradado-animado::before { animation-name: sexy_mj_grad_pan_square; }
.sexy-mj-grad-anim-zoom.sexy-mj-effect-efecto-degradado-animado::before { animation-name: sexy_mj_grad_zoom; }
.sexy-mj-grad-anim-zoom_pan.sexy-mj-effect-efecto-degradado-animado::before { animation-name: sexy_mj_grad_zoom_pan; }
.sexy-mj-grad-anim-rotate.sexy-mj-effect-efecto-degradado-animado::before {
  animation-name: sexy_mj_grad_rotate;
  background-position: 50% 50%;
  transform-origin: 50% 50%;
}

@keyframes sexy_mj_grad_pan_lr {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes sexy_mj_grad_pan_tb {
  0%   { background-position: 50% 0%; }
  50%  { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}

@keyframes sexy_mj_grad_pan_diag {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes sexy_mj_grad_pan_square {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes sexy_mj_grad_zoom {
  0%   { background-size: var(--sexy-mj-grad-size-min); }
  50%  { background-size: var(--sexy-mj-grad-size-max); }
  100% { background-size: var(--sexy-mj-grad-size-min); }
}

@keyframes sexy_mj_grad_zoom_pan {
  0%   { background-size: var(--sexy-mj-grad-size-min); background-position: 0% 50%; }
  50%  { background-size: var(--sexy-mj-grad-size-max); background-position: 100% 50%; }
  100% { background-size: var(--sexy-mj-grad-size-min); background-position: 0% 50%; }
}

@keyframes sexy_mj_grad_rotate {
  0%   { transform: scale(1.2) rotate(0deg); }
  50%  { transform: scale(1.2) rotate(180deg); }
  100% { transform: scale(1.2) rotate(360deg); }
}