/* ============================================================
   glow-border.css
   - Glow sits strictly at the border edge, behind content
   - Fades in on hover, out when not hovered
   - Mouse-tracking arc
   ============================================================ */

[data-glow] {
  position: relative;
  isolation: isolate;
}

/* The gradient glow layer */
[data-glow]::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: 0;

  /* Fade out by default, fade in on hover */
  opacity: 0;
  transition: opacity 0.5s ease;

  background:
    radial-gradient(circle, #dd7bbb 10%, transparent 20%),
    radial-gradient(circle at 40% 40%, #d79f1e 5%, transparent 15%),
    radial-gradient(circle at 60% 60%, #5a922c 10%, transparent 20%),
    radial-gradient(circle at 40% 60%, #4c7894 10%, transparent 20%),
    conic-gradient(from calc(var(--glow-start, 0) * 1deg) at 50% 50%,
      #dd7bbb 0%,
      #d79f1e 20%,
      #5a922c 40%,
      #4c7894 60%,
      #dd7bbb 80%,
      #dd7bbb 100%);
  background-attachment: fixed;

  /* Mask: only show gradient along the border strip */
  -webkit-mask-image:
    linear-gradient(#000, #000),
    conic-gradient(from calc((var(--glow-start, 0) - 40) * 1deg),
      transparent 0deg,
      white,
      transparent 80deg);
  mask-image:
    linear-gradient(#000, #000),
    conic-gradient(from calc((var(--glow-start, 0) - 40) * 1deg),
      transparent 0deg,
      white,
      transparent 80deg);

  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* Show glow on hover */
[data-glow]:hover::before {
  opacity: 1;
}

/* Solid card background to prevent bleed-through.
   Matches the dark slate theme — adjust the color to suit your design. */
[data-glow]::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* below can be changed to a lighter colour to brighten the cards*/
  background: #131f35; 
  /* slate-900 — change to match your card bg */
  z-index: 1;
}

/* All card content sits above both the glow (z:0) and the background fill (z:1) */
[data-glow]>* {
  position: relative;
  z-index: 2;
}