@property --imbexa-form-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .home #imbexa-business.hero-signup-card {
    border-color: rgba(255, 255, 255, .24);
  }

  .home #imbexa-business.hero-signup-card::after {
    position: absolute;
    inset: -1px;
    z-index: 1;
    display: block;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
      from var(--imbexa-form-border-angle),
      transparent 0deg 240deg,
      rgba(255, 255, 255, .35) 285deg,
      #fff 320deg 350deg,
      transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    content: "";
    pointer-events: none;
    animation: imbexa-form-border-orbit 4s linear infinite;
  }
}

@keyframes imbexa-form-border-orbit {
  to { --imbexa-form-border-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .home #imbexa-business.hero-signup-card::after {
    animation: none;
    background: rgba(255, 255, 255, .72);
  }
}