.magic-bento{--mb-primary:59, 130, 246;--mb-primary-soft:96, 165, 250;--mb-primary-deep:29, 78, 216;--mb-glow-radius:280px;position:relative}.mb-card{isolation:isolate;will-change:transform;background:linear-gradient(#11111999 0%,#0a0a0fd9 100%);border:1px solid #ffffff14;border-radius:1.25rem;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s;position:relative;overflow:hidden}.mb-card:hover{border-color:rgba(var(--mb-primary), .35)}.mb-card:before{content:"";border-radius:inherit;background:radial-gradient(var(--mb-glow-radius) circle at var(--mb-mouse-x,50%) var(--mb-mouse-y,50%), rgba(var(--mb-primary-soft), .55), rgba(var(--mb-primary), .15) 40%, transparent 70%);-webkit-mask-composite:xor;opacity:0;pointer-events:none;z-index:1;padding:1px;transition:opacity .4s;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.magic-bento:hover .mb-card:before{opacity:1}.mb-card:after{content:"";border-radius:inherit;background:radial-gradient(220px circle at var(--mb-card-x,50%) var(--mb-card-y,50%), rgba(var(--mb-primary), .18), rgba(var(--mb-primary-deep), .06) 35%, transparent 65%);opacity:0;pointer-events:none;z-index:0;transition:opacity .32s;position:absolute;inset:0}.mb-card:hover:after{opacity:1}.mb-card>*{z-index:2;position:relative}.mb-ripple{background:radial-gradient(circle, rgba(var(--mb-primary-soft), .55) 0%, rgba(var(--mb-primary), .2) 50%, transparent 70%);pointer-events:none;z-index:3;border-radius:9999px;animation:.7s ease-out forwards mb-ripple;position:absolute}@keyframes mb-ripple{0%{opacity:.9;width:0;height:0}to{opacity:0;width:360px;height:360px}}.mb-section-spotlight{pointer-events:none;background:radial-gradient(420px circle at var(--mb-section-x,50%) var(--mb-section-y,50%), rgba(var(--mb-primary), .1), transparent 65%);opacity:0;z-index:0;transition:opacity .5s;position:absolute;inset:0}.magic-bento:hover .mb-section-spotlight{opacity:1}@media (prefers-reduced-motion:reduce){.mb-card,.mb-card:before,.mb-card:after{transition:none}.mb-ripple{display:none}}