.bento-section {
  position: relative;
}

.magic-bento-card {
  position: relative;
  overflow: hidden;
  --glow-color: 77, 159, 255; /* Purple-ish default */
  --glow-radius: 300px;
  --glow-intensity: 0;
  --glow-x: 50%;
  --glow-y: 50%;
  transition: transform 0.3s ease;
}

/* Background spotlight effect inside the card */
.magic-bento-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-color), calc(0.15 * var(--glow-intensity))),
    transparent calc(var(--glow-radius) * 0.8)
  );
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}

/* Border glow effect */
.magic-bento-card.magic-bento-card--border-glow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px; /* border thickness */
  background: radial-gradient(
    circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-color), calc(0.5 * var(--glow-intensity))),
    transparent calc(var(--glow-radius) * 0.5)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.magic-bento-card > * {
  position: relative;
  z-index: 2;
}

.global-spotlight {
  position: fixed;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(var(--global-glow-color, 77, 159, 255), 0.15) 0%,
    rgba(var(--global-glow-color, 77, 159, 255), 0.08) 15%,
    rgba(var(--global-glow-color, 77, 159, 255), 0.04) 25%,
    rgba(var(--global-glow-color, 77, 159, 255), 0.02) 40%,
    rgba(var(--global-glow-color, 77, 159, 255), 0.01) 65%,
    transparent 70%
  );
  z-index: 200;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: opacity 0.3s ease, left 0.1s ease-out, top 0.1s ease-out;
}