@property --cta-002-angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: true;
}

@property --cta-002-gradX {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: true;
}

@property --cta-002-gradY {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

:root {
  --cta-002-d: 2500ms;
  --cta-002-angle: 90deg;
  --cta-002-gradX: 100%;
  --cta-002-gradY: 50%;
  --cta-002-c1: rgba(168, 239, 255, 1);
  --cta-002-c2: rgba(168, 239, 255, 0.1);
}

.lws-cta-002-gradient-radial-container {
  width: min(40rem, 100%);
  margin: 0px auto;
}

.lws-cta-002-gradient-radial-container .box {
  margin: max(1rem, 3vw);
  padding: 3vw;
  font-size: 3vw;
  border: 0.35rem solid;
  border-image: radial-gradient(
      ellipse at var(--cta-002-gradX) var(--cta-002-gradY),
      var(--cta-002-c1),
      var(--cta-002-c1) 10%,
      var(--cta-002-c2) 40%
    )
    30;
  animation: borderRadial var(--cta-002-d) linear infinite forwards;
  -webkit-animation: borderRadial var(--cta-002-d) linear infinite forwards;
}

/* @keyframes borderRotate {
  100% {
    --cta-002-angle: 420deg;
  }
} */

@keyframes borderRadial {
  20% {
    --cta-002-gradX: 100%;
    --cta-002-gradY: 50%;
  }
  40% {
    --cta-002-gradX: 100%;
    --cta-002-gradY: 100%;
  }
  60% {
    --cta-002-gradX: 50%;
    --cta-002-gradY: 100%;
  }
  80% {
    --cta-002-gradX: 0%;
    --cta-002-gradY: 50%;
  }
  100% {
    --cta-002-gradX: 50%;
    --cta-002-gradY: 0%;
  }
}