/* Up Designs CTA v1.5.17
   Smooth colour-morphing gradient (no travelling cyan stripe) + soft diffused light sweep. */

/* Typed custom colour properties let Chromium/Safari interpolate the gradient colours smoothly. */
@property --cta-left {
  syntax: '<color>';
  inherits: false;
  initial-value: #7859ff;
}
@property --cta-mid {
  syntax: '<color>';
  inherits: false;
  initial-value: #4f63ff;
}
@property --cta-right {
  syntax: '<color>';
  inherits: false;
  initial-value: #2d91ee;
}

.cta-pro{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:0 !important;
  outline:0;
  border-radius:16px !important;
  background:#5064ff !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  text-decoration:none;
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 5px 14px rgba(29,63,181,.18),
    0 0 18px rgba(111,78,255,.18),
    0 0 30px rgba(45,154,255,.09),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -3px 9px rgba(18,43,135,.15) !important;
  transform:translateY(0);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,filter .22s ease;
}
.cta-pro::before,.cta-pro::after{content:none !important;display:none !important}

html body.upd-theme .button.cta-pro > .cta-gradient-layer{
  position:absolute !important;
  inset:-2px !important;
  z-index:0 !important;
  display:block !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  --cta-left:#7859ff;
  --cta-mid:#4f63ff;
  --cta-right:#2d91ee;
  background:linear-gradient(112deg,var(--cta-left) 0%,var(--cta-mid) 52%,var(--cta-right) 100%);
  animation:updCtaGradient1517 12s ease-in-out infinite;
  will-change:filter;
}

/* Soft, broad reflection. It is deliberately white/neutral rather than cyan. */
html body.upd-theme .button.cta-pro > .cta-sweep-layer{
  position:absolute !important;
  z-index:1 !important;
  top:-125% !important;
  left:-48% !important;
  width:42% !important;
  height:350% !important;
  display:block !important;
  border-radius:999px !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.025) 18%,
    rgba(255,255,255,.12) 38%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.12) 62%,
    rgba(255,255,255,.025) 82%,
    rgba(255,255,255,0) 100%);
  filter:blur(11px);
  transform:translate3d(0,0,0) rotate(16deg);
  opacity:0;
  animation:updCtaSweep1517 9.5s ease-in-out infinite;
  will-change:transform,opacity;
}

html body.upd-theme .button.cta-pro > .cta-content{
  position:relative !important;
  z-index:2 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  pointer-events:none !important;
}
.cta-pro .cta-label,.cta-pro .cta-arrow{color:#fff !important;-webkit-text-fill-color:#fff}
.cta-pro .cta-arrow{font-weight:900;transition:transform .18s ease}

.cta-pro:hover{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  transform:translateY(-2px);
  box-shadow:
    0 14px 29px rgba(0,0,0,.31),
    0 7px 17px rgba(31,69,197,.21),
    0 0 21px rgba(119,83,255,.22),
    0 0 35px rgba(49,169,255,.12),
    inset 0 1px 0 rgba(255,255,255,.29),
    inset 0 -3px 9px rgba(18,43,135,.13) !important;
  filter:saturate(1.04) brightness(1.02);
}
.cta-pro:hover .cta-arrow{transform:translate(2px,-1px)}
.cta-pro:active,.cta-pro.cta-pressed{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  transform:translateY(1px) scale(.993);
  box-shadow:
    0 5px 12px rgba(0,0,0,.26),
    0 2px 7px rgba(31,69,197,.14),
    0 0 11px rgba(104,80,255,.12),
    inset 0 3px 9px rgba(8,18,60,.19),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition-duration:.08s;
}
.cta-pro:visited,.cta-pro:focus{color:#fff !important;-webkit-text-fill-color:#fff}
.cta-pro:focus-visible{outline:2px solid rgba(145,222,255,.64);outline-offset:4px}

/* Starts purple/blue, smoothly becomes a cooler blue/cyan mix, then returns to the exact start state. */
@keyframes updCtaGradient1517{
  0%,100%{
    --cta-left:#7859ff;
    --cta-mid:#4f63ff;
    --cta-right:#2d91ee;
    filter:saturate(1);
  }
  50%{
    --cta-left:#5364ff;
    --cta-mid:#347dff;
    --cta-right:#39bde7;
    filter:saturate(1.04);
  }
}

@keyframes updCtaSweep1517{
  0%,18%{transform:translate3d(0,0,0) rotate(16deg);opacity:0}
  25%{opacity:.16}
  38%{opacity:.42}
  62%{opacity:.42}
  76%{transform:translate3d(480%,0,0) rotate(16deg);opacity:.16}
  84%,100%{transform:translate3d(480%,0,0) rotate(16deg);opacity:0}
}

@media(max-width:760px){
  .cta-pro{
    box-shadow:
      0 8px 19px rgba(0,0,0,.25),
      0 4px 11px rgba(29,63,181,.15),
      0 0 15px rgba(100,77,255,.14),
      0 0 22px rgba(45,154,255,.07),
      inset 0 1px 0 rgba(255,255,255,.23),
      inset 0 -2px 7px rgba(18,43,135,.12) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body.upd-theme .button.cta-pro > .cta-gradient-layer,
  html body.upd-theme .button.cta-pro > .cta-sweep-layer{animation:none !important}
}