/* Animated conic runner that hugs rounded corners */
/* Target: .border-fx > div */

.border-fx > div {
  position: relative;
  border-radius: 16px;
  background: #fff;

  --bb: 2px;
  --run: 8s;
  --delay: 0s;
  --tailArc: 140deg;
  --solidFrac: 0.30;
  --c: #3578FF;
}

.border-fx > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  padding: var(--bb);

  background:
    conic-gradient(
      from 0deg,
      rgba(53,120,255,1) 0deg,
      rgba(53,120,255,1) calc(var(--tailArc) * var(--solidFrac)),
      rgba(53,120,255,0) var(--tailArc),
      rgba(53,120,255,0) 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  filter: drop-shadow(0 0 10px rgba(53,120,255,.35));

  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: bfx-rotate var(--run) linear infinite var(--delay);
}

@keyframes bfx-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* optional utilities – applied to .border-fx */
.bfx-1s { --delay: 1s; }
.bfx-2s { --delay: 2s; }
.bfx-3s { --delay: 3s; }
.bfx-4s { --delay: 4s; }

.bfx-2x   { --run: calc(8s / 2); }
.bfx-1-5x { --run: calc(8s / 1.5); }
.bfx--5x  { --run: calc(8s * 2); }