/* Animated brand borders: border-only, content background untouched */
@property --abra-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.abra-visual,
.abra-inline-visual,
.abra-media-tile,
.abra-recraft-shot,
.abra-visual-band,
.abra-card,
.abra-tile,
.abra-graphic-card,
.abra-flow-step,
.abra-chart-panel,
.rank-math-list-item,
.abra-list li,
.abra-rich-copy p {
  position: relative;
  border-color: transparent !important;
  isolation: isolate;
}

.abra-visual::before,
.abra-inline-visual::before,
.abra-media-tile::before,
.abra-recraft-shot::before,
.abra-visual-band::before,
.abra-card::before,
.abra-tile::before,
.abra-graphic-card::before,
.abra-flow-step::before,
.abra-chart-panel::before,
.rank-math-list-item::before,
.abra-rich-copy p::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--abra-border-angle),
    rgba(192, 38, 211, .95),
    rgba(124, 58, 237, .8),
    rgba(37, 99, 235, .9),
    rgba(6, 182, 212, .82),
    rgba(236, 72, 153, .9),
    rgba(192, 38, 211, .95)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: abra-border-spin 8s linear infinite;
}

.abra-visual::after,
.abra-inline-visual::after,
.abra-media-tile::after,
.abra-recraft-shot::after,
.abra-visual-band::after,
.abra-card::after,
.abra-tile::after,
.abra-graphic-card::after,
.abra-flow-step::after,
.abra-chart-panel::after,
.rank-math-list-item::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: .18;
  filter: blur(16px);
  background: conic-gradient(from var(--abra-border-angle),
    rgba(192, 38, 211, .52),
    rgba(37, 99, 235, .36),
    rgba(6, 182, 212, .34),
    rgba(236, 72, 153, .42),
    rgba(192, 38, 211, .52)
  );
  animation: abra-border-spin 8s linear infinite;
}

.abra-visual:hover::before,
.abra-inline-visual:hover::before,
.abra-media-tile:hover::before,
.abra-recraft-shot:hover::before,
.abra-visual-band:hover::before,
.abra-card:hover::before,
.abra-tile:hover::before,
.abra-graphic-card:hover::before,
.abra-flow-step:hover::before,
.abra-chart-panel:hover::before,
.rank-math-list-item:hover::before,
.abra-rich-copy p:hover::after {
  padding: 2px;
  animation-duration: 3.2s;
}

.abra-visual:hover::after,
.abra-inline-visual:hover::after,
.abra-media-tile:hover::after,
.abra-recraft-shot:hover::after,
.abra-visual-band:hover::after,
.abra-card:hover::after,
.abra-tile:hover::after,
.abra-graphic-card:hover::after,
.abra-flow-step:hover::after,
.abra-chart-panel:hover::after,
.rank-math-list-item:hover::after {
  opacity: .3;
  animation-duration: 3.2s;
}

.abra-visual img,
.abra-inline-visual img,
.abra-media-tile img,
.abra-recraft-shot img {
  border: 0 !important;
}

/* Keep list check icons intact; animated border on list items would conflict with their icon pseudo-elements. */
.abra-list li {
  border: 1px solid rgba(14,14,18,.1) !important;
}

@keyframes abra-border-spin {
  to { --abra-border-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .abra-visual::before,
  .abra-inline-visual::before,
  .abra-media-tile::before,
  .abra-recraft-shot::before,
  .abra-visual-band::before,
  .abra-card::before,
  .abra-tile::before,
  .abra-graphic-card::before,
  .abra-flow-step::before,
  .abra-chart-panel::before,
  .rank-math-list-item::before,
  .abra-rich-copy p::after,
  .abra-visual::after,
  .abra-inline-visual::after,
  .abra-media-tile::after,
  .abra-recraft-shot::after,
  .abra-visual-band::after,
  .abra-card::after,
  .abra-tile::after,
  .abra-graphic-card::after,
  .abra-flow-step::after,
  .abra-chart-panel::after,
  .rank-math-list-item::after {
    animation: none !important;
  }
}