/* Bento Card Effect Global Styles */
:root {
  --bento-glow-color: 255, 255, 255;
}

.bento-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 300px;
}

/* Border glow effect mask */
.bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--bento-glow-color), calc(var(--glow-intensity) * 0.8)) 0%,
    rgba(var(--bento-glow-color), calc(var(--glow-intensity) * 0.4)) 30%,
    transparent 60%
  );
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.bento-card:hover::after {
  opacity: 1;
}

.bento-card:hover {
  box-shadow: 0 4px 22px rgba(255, 255, 255, 0.08);
}

.global-spotlight {
  mix-blend-mode: screen;
  will-change: transform, opacity;
  z-index: 200 !important;
  pointer-events: none;
}