/* React Bits MagicBento adapted to the existing eight-module layout. */
.magic-bento .magic-bento-card {
  --mb-color: 164, 105, 255;
  --mb-x: 50%;
  --mb-y: 50%;
  --mb-glow: 0;
  --mb-rx: 0deg;
  --mb-ry: 0deg;
  --mb-mx: 0px;
  --mb-my: 0px;
}
/* Compose with DriftWall's depth; its independent translate animation remains intact. */
.view-body.view-dashboard .section .grid8 .grid8-cell.magic-bento-card {
  transform: translateZ(var(--dw-z)) translate(var(--mb-mx), var(--mb-my))
             rotateX(var(--mb-rx)) rotateY(var(--mb-ry));
}
.magic-bento-card .mb-effects {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.mb-effects::before,
.mb-effects::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--mb-glow);
  transition: opacity 220ms ease;
  pointer-events: none;
}
.mb-effects::before {
  background: radial-gradient(300px circle at var(--mb-x) var(--mb-y),
    rgba(var(--mb-color), .19), rgba(var(--mb-color), .06) 45%, transparent 75%);
}
.mb-effects::after {
  padding: 2px;
  background: radial-gradient(300px circle at var(--mb-x) var(--mb-y),
    rgba(224, 204, 255, .98), rgba(var(--mb-color), .75) 30%, transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.mb-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e3cfff;
  box-shadow: 0 0 6px 1px rgba(var(--mb-color), .8);
  opacity: 0;
  pointer-events: none;
}
.mb-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--mb-color), .35), rgba(var(--mb-color), .15) 35%, transparent 70%);
  pointer-events: none;
}
.magic-bento-card:focus-visible { --mb-glow: 1 !important; }
@media (max-width: 768px), (hover: none), (prefers-reduced-motion: reduce) {
  .magic-bento .mb-effects { display: none; }
  .view-body.view-dashboard .section .grid8 .grid8-cell.magic-bento-card {
    transform: translateZ(var(--dw-z));
  }
}