/* Define the custom properties for the glow color and size */
:root {
  --glow-color1: #00ffff;
  --glow-color2: #ff00ff;
  --glow-size: 300px;
}

.glow-card {
  position: relative;
  background: var(--bg-dark); /* The card's background color */
  border-radius: 26px;
  padding: 2px; /* This padding acts as the border thickness */
  overflow: hidden; /* Keeps the glow contained */
}

/* The content container inside the card */
.card-content {
  background: var(--white);
  padding: 2rem;
  border-radius: 24px; /* Slightly smaller radius than the parent */
  position: relative;
  z-index: 2;
}

/* The glowing pseudo-element */
.glow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  /* Initial "offwhite" border state */
  background: #f0f0f020; /* A semi-transparent off-white */
  
  /* Smooth transition for when the mouse leaves */
  transition: background 0.5s linear;
}

/* On hover, change the background to the glowing radial gradient */
.glow-card:hover::before {
  background-image: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    var(--brand),
    var(--brand),
    transparent 60%
  );
}