.foo-wrapper {
  position: relative;
  display: inline-block;
  z-index: 0; /* Base stacking context */
}

.foo-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: conic-gradient(
    from var(--angle),
    #2d00f7ff,          /* blue */
    #6a00f4ff,          /* electric-indigo */
    #8900f2ff,          /* violet */
    #a100f2ff,          /* veronica */
    #b100e8ff,          /* veronica-2 */
    #bc00ddff,          /* electric-purple */
    #d100d1ff,          /* steel-pink */
    #db00b6ff,          /* steel-pink-2 */
    #e500a4ff,          /* hollywood-cerise */
    #f20089ff,          /* magenta */
    #2d00f7ff           /* blue (repeat for seamless loop) */
  );
  animation: spin 3s linear infinite;
  filter: blur(1rem); /* Softer shadow */
  opacity: 0.2;       /* Lower opacity so background shows */
  z-index: -1;        /* Behind everything */
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.foo-wrapper:hover::before {
  filter: blur(5.5rem);
  opacity: 0.8;
}

.foo::after,
.foo-wrapper::before {
  pointer-events: none;
}

.foo {
  position: relative;
  padding: 2em;
  background: #020202; /* Flat gray background */
  border-radius: 10px;
  color: white;
  transition: transform 0.3s ease;
}

.foo:hover {
  transform: scale(1.03);
}

/* Keep your gradient border on the card */
.foo::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    #2d00f7ff,          /* blue */
    #6a00f4ff,          /* electric-indigo */
    #8900f2ff,          /* violet */
    #a100f2ff,          /* veronica */
    #b100e8ff,          /* veronica-2 */
    #bc00ddff,          /* electric-purple */
    #d100d1ff,          /* steel-pink */
    #db00b6ff,          /* steel-pink-2 */
    #e500a4ff,          /* hollywood-cerise */
    #f20089ff,          /* magenta */
    #2d00f7ff           /* blue (repeat for seamless loop) */
);

  animation: spin 3s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  transition: padding 0.3s ease;
}

.foo:hover::after {
  padding: 2px;
}

/* CSS property for animation */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}