/* keep your @property as-is */
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/* Row */
.ag-border {
  position: relative;
  overflow: auto;           /* let any glow breathe */
  --bw: 5px;                   /* border width */
  --r: 0px;                    /* corner radius if you need it */
  --border-angle: 0deg;

  /* keep stacking sane */
  isolation: isolate;
}
/* keep content above the ring */
.ag-border > * { position: relative; z-index: 1; }

/* Animated ring lives on ::before */
.ag-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--bw);                  /* defines the inner “content-box” for the mask */
  border-radius: calc(var(--r) + var(--bw));
  z-index: 0;
  pointer-events: none;

  /* your layers, unchanged */
  --main-bg: conic-gradient(
    from var(--border-angle),
    transparent,
    transparent 5%,
    transparent 60%,
    transparent 95%
  );
  --gradient-border: conic-gradient(
    from var(--border-angle),
    transparent 25%,
    #ffffff82 26%,
    #fff 40%,
    #fff 60%,
    #ffffff82 95%,
    transparent 100%
  );
  background:
    var(--main-bg) padding-box,
    var(--gradient-border) border-box,
    var(--main-bg) border-box;
  background-position: center center;

  /* show only the ring: (border-box) minus (content-box) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;      /* Safari */
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;          /* Modern */

  /* animate the angle */
  animation: bg-spin 3s linear infinite;
}

/* optional: a soft outer glow that follows the same angle */
.ag-border::after {
  content: "";
  position: absolute;
  inset: calc(-1.5 * var(--bw));
  border-radius: calc(var(--r) + 3 * var(--bw));
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(
    from var(--border-angle),
    rgba(255,255,255,0) 24%,
    rgba(255,255,255,.85) 25%,
    rgba(255,255,255,.85) 26%,
    rgba(255,255,255,0) 27%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(12px);
  opacity: .5;
  animation: bg-spin 2s linear infinite;
}

@keyframes bg-spin {
  0% { --border-angle: 0deg; }
  20% { --border-angle: 72deg; }
  40% { --border-angle: 144deg; }
  60%{ --border-angle: 216deg; }
  80% { --border-angle: 288deg; }
  100% { --border-angle: 359deg; }
}