/* MagicBento (React Bits) ported to vanilla JS/CSS — no React/build step in this project. */

.bento-section {
  position: relative;
  user-select: none;
}

.magic-bento-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 260px;
  --glow-color: 192, 57, 43; /* Nasser red, C0392B */
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.magic-bento-card--border-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.9)) 0%,
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.5)) 30%,
    transparent 65%
  );
  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;
  z-index: 2;
}

.global-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
  z-index: 60;
}

@media (max-width: 768px) {
  .global-spotlight { display: none; }
}