/* Adapted from Uiverse.io by Lakshay-art: violet/pink conic glow border. */
@property --qq-border-angle {
  syntax: "<angle>";
  initial-value: 70deg;
  inherits: true;
}

#supportLink {
  --qq-border-angle: 70deg;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-color: transparent !important;
  background: #fff !important;
  box-shadow: 0 3px 12px #402fb510 !important;
  transition: --qq-border-angle 2s ease, transform .2s ease;
}

#supportLink::before,
#supportLink::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  -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;
}

#supportLink::before {
  inset: -4px;
  padding: 5px;
  background: conic-gradient(from var(--qq-border-angle),
    transparent, #402fb5 5%, transparent 25%,
    transparent 50%, #cf30aa 60%, transparent 85%);
  filter: blur(8px);
  opacity: .55;
  transition: opacity .3s ease;
}

#supportLink::after {
  inset: -1px;
  padding: 2px;
  background: conic-gradient(from var(--qq-border-angle),
    #e4e1f2, #402fb5 5%, #a099d8 11%, #e4e1f2 22%,
    #e4e1f2 50%, #cf30aa 60%, #dfa2da 66%, #e4e1f2 78%);
}

@media (hover: hover) {
  #supportLink:hover { --qq-border-angle: 250deg; }
  #supportLink:hover::before { opacity: .85; }
}

#supportLink:focus-visible {
  --qq-border-angle: 430deg;
  outline: 2px solid #6753c5 !important;
  outline-offset: 5px;
}

#supportLink:focus-visible::before { opacity: .85; }

@media (max-width: 760px) {
  #supportLink::before { inset: -2px; padding: 3px; filter: blur(5px); }
}

@media (prefers-reduced-motion: reduce) {
  #supportLink,
  #supportLink::before { transition: none; }
  #supportLink:hover,
  #supportLink:focus-visible { --qq-border-angle: 70deg; transform: none; }
}