/* Glowing Effect Base Styles */

.glow-wrapper {
  position: relative;
  /* Add specific z-index so content inside stays above the glow */
}

.glow-wrapper > * {
  position: relative;
  z-index: 10;
}

.glow-effect {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.glow-effect .glow-el {
  border-radius: inherit;
}

.glow-effect .glow-el::after {
  content: "";
  border-radius: inherit;
  position: absolute;
  /* border width is 1px */
  inset: -1px;
  border: 1px solid transparent;
  background-attachment: fixed;
  opacity: var(--active, 0);
  transition: opacity 0.3s ease;
  
  /* Masking trick to only show the border */
  mask-clip: padding-box, border-box;
  -webkit-mask-clip: padding-box, border-box;
  
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  
  /* The conic gradient creates the moving spotlight based on --start angle */
  mask-image: linear-gradient(#0000, #0000),
    conic-gradient(
      from calc((var(--start, 0) - var(--spread, 20)) * 1deg),
      transparent 0deg,
      #fff,
      transparent calc(var(--spread, 20) * 2deg)
    );
  -webkit-mask-image: linear-gradient(#0000, #0000),
    conic-gradient(
      from calc((var(--start, 0) - var(--spread, 20)) * 1deg),
      transparent 0deg,
      #fff,
      transparent calc(var(--spread, 20) * 2deg)
    );
}

/* Default vibrant gradient theme */
.glow-effect.theme-default .glow-el::after {
  background: 
    radial-gradient(circle, #dd7bbb 10%, transparent 20%),
    radial-gradient(circle at 40% 40%, #818cf8 5%, transparent 15%),
    radial-gradient(circle at 60% 60%, #c084fc 10%, transparent 20%),
    radial-gradient(circle at 40% 60%, #38bdf8 10%, transparent 20%),
    repeating-conic-gradient(
      from 236.84deg at 50% 50%,
      #dd7bbb 0%,
      #818cf8 calc(25% / 5),
      #c084fc calc(50% / 5),
      #38bdf8 calc(75% / 5),
      #dd7bbb calc(100% / 5)
    );
}

/* White gradient theme */
.glow-effect.theme-white .glow-el::after {
  background: repeating-conic-gradient(
    from 236.84deg at 50% 50%,
    rgba(255,255,255,0.8),
    rgba(255,255,255,0.8) calc(25% / 5)
  );
}