/* Magic Bento Effect */
/* Based on ReactBits Magic Bento */

.magic-bento-card {
    position: relative;
    overflow: hidden;
    /* Ensure default layout from existing connection is preserved or configured here */
    /* Default variables */
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-intensity: 0;
    --glow-radius: 600px;

    /* Site Specific Colors */
    --mb-spotlight-color: 184, 134, 11;
    /* #B8860B converted to RGB for rgba usage */

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.magic-bento-card:hover {
    transform: scale(1.03);
    /* Slight zoom for focus */
    z-index: 10;
    /* Bring to front */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Enhanced shadow for depth */
}

/* The Spotlight Border Effect */
.magic-bento-card::after {
    display: none;
    /* User requested to make the frame/border invisible */
    content: '';
    position: absolute;
    inset: 0;
    padding: 4px;
    background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),
            rgba(var(--mb-spotlight-color), var(--glow-intensity)) 0%,
            rgba(var(--mb-spotlight-color), calc(var(--glow-intensity) * 0.5)) 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: 1;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Optional: Slight inner glow/highlight interaction on the content background */
.magic-bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--glow-x) var(--glow-y),
            rgba(var(--mb-spotlight-color), calc(var(--glow-intensity) * 0.05)),
            transparent 40%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}