/* === Continuous animated glow border (magenta ↔ dark navy), ring only === */
.ai-aurora{
  position: relative;
  border-radius: 16px;              /* match your card rounding */
  background: transparent;
}

/* COLOR RING — gradient moves, geometry stays fixed */
.ai-aurora::before{
  content: "";
  position: absolute;
  inset: -3px;                      /* ring thickness = 3px (keep inset == padding) */
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;

  --navy:    #0a1a3f;
  --magenta: #ff0ea3;

  /* Animate the gradient angle (NOT the element) */
  background:
    conic-gradient(from var(--t, 0deg),
        var(--navy) 0%,
        var(--navy) 20%,
        var(--magenta) 32%,
        var(--magenta) 48%,
        var(--navy) 60%,
        var(--navy) 80%,
        var(--magenta) 92%,
        var(--magenta) 100%);


  /* Show only the ring, never the center */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  animation: spin 20s linear infinite;
}


/* Optional: subtle outer glow that follows the ring (no interior tint) */
.ai-aurora::after{
  content: "";
  position: absolute;
  inset: -10px;                     /* sits outside the card */
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  background:
    conic-gradient(from var(--t, 0deg),
        var(--navy) 0%,
        var(--navy) 20%,
        var(--magenta) 32%,
        var(--magenta) 48%,
        var(--navy) 60%,
        var(--navy) 80%,
        var(--magenta) 92%,
        var(--magenta) 100%);







  /* ⬇️ Mask like the ring so nothing can render over the center */
  padding: 3px;  /* match ring thickness from ::before */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  filter: blur(10px);
  animation: spin 20s linear infinite;
}


/* Register the animatable angle so browsers actually animate it */
@property --t {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Animate the angle; geometry does NOT rotate */
@keyframes spin { to { --t: 360deg; } }

/* Reduced-motion support */
@media (prefers-reduced-motion: reduce){
  .ai-aurora::before,
  .ai-aurora::after{ animation: none; }
}