.border-glow-card {
  position: relative;
  border-radius: var(--border-radius, 28px);
  background: var(--card-bg, #060010);
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
}

.border-glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius, 28px);
  padding: var(--glow-padding, 40px);
  background: linear-gradient(
    0deg,
    var(--glow-color, hsl(40 80% 80% / 100%)),
    var(--glow-color-60, hsl(40 80% 80% / 60%)),
    var(--glow-color-50, hsl(40 80% 80% / 50%)),
    var(--glow-color-40, hsl(40 80% 80% / 40%)),
    var(--glow-color-30, hsl(40 80% 80% / 30%)),
    var(--glow-color-20, hsl(40 80% 80% / 20%)),
    var(--glow-color-10, hsl(40 80% 80% / 10%))
  ) border-box;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
  opacity: 0.7;
}

.edge-light {
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius, 28px);
  padding: var(--glow-padding, 40px);
  background: conic-gradient(
    from calc(var(--cursor-angle, 0deg) - (var(--cone-spread, 25) * 0.5deg)),
    transparent 0deg,
    var(--glow-color, hsl(40 80% 80% / 100%)) calc(var(--cone-spread, 25) * 0.75deg),
    var(--glow-color-60, hsl(40 80% 80% / 60%)) calc(var(--cone-spread, 25) * 1.25deg),
    transparent calc(var(--cone-spread, 25) * 1.5deg),
    transparent
  ) border-box;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--edge-proximity, 0) / 100);
  transition: opacity 0.2s ease;
}

.border-glow-inner {
  position: relative;
  z-index: 3;
  border-radius: calc(var(--border-radius, 28px) - var(--glow-padding, 40px));
  background: var(--gradient-base, linear-gradient(#c084fc 0 100%));
  background-image: 
    var(--gradient-one, radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%)),
    var(--gradient-two, radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%)),
    var(--gradient-three, radial-gradient(at 8% 6%, #38bdf8 0px, transparent 50%)),
    var(--gradient-four, radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%)),
    var(--gradient-five, radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%)),
    var(--gradient-six, radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%)),
    var(--gradient-seven, radial-gradient(at 51% 4%, #f472b6 0px, transparent 50%)),
    var(--gradient-base, linear-gradient(#c084fc 0 100%));
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  padding: calc(var(--glow-padding, 40px) * 0.5);
  opacity: var(--fill-opacity, 0.5);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.border-glow-card:hover .border-glow-inner {
  transform: translateY(-2px);
  opacity: var(--fill-opacity, 0.7);
}

.sweep-active .edge-light {
  animation: sweep 4s ease-in-out forwards;
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  25% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .border-glow-card {
    --glow-padding: 20px;
    --border-radius: 16px;
  }
}