/* ============================================================
   MAGIC BENTO — ported from the React Bits MagicBento component
   (spotlight, border-glow, tilt, magnetism, particles, click ripple)
   to vanilla JS/CSS. Recolored from the demo's purple to the
   Recykal.Market brand green so it matches the rest of the page —
   applied to the existing .cat-card / .reach-card grids, no layout
   changes to those cards.
   ============================================================ */

.bento-grid { position: relative; }

.bento-fx {
  position: relative;
  overflow: hidden;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 300px;
}

/* Border glow ring that tracks the cursor via --glow-x/--glow-y,
   set by JS as the pointer moves across the section. */
.bento-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--mb-glow), calc(var(--glow-intensity) * .85)) 0%,
    rgba(var(--mb-glow), calc(var(--glow-intensity) * .35)) 35%,
    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: 3;
}

.bento-fx.is-hot {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08), 0 0 26px rgba(var(--mb-glow), .18);
}

/* Particles spawned by JS on hover */
.bento-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--mb-glow), 1);
  box-shadow: 0 0 6px rgba(var(--mb-glow), .55);
  pointer-events: none;
  z-index: 4;
}

/* Click ripple */
.bento-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--mb-glow), .32) 0%, rgba(var(--mb-glow), .16) 32%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* Cursor-following ambient spotlight, one per grid, fixed-positioned */
.bento-spotlight {
  position: fixed;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(var(--mb-glow), .10) 0%,
    rgba(var(--mb-glow), .05) 22%,
    rgba(var(--mb-glow), .02) 40%,
    transparent 68%
  );
  z-index: 5;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  .bento-fx::after { display: none; }
  .bento-spotlight { display: none; }
}