.magic-bento-button{position:relative;overflow:hidden;transition:all .3s ease}.magic-bento-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(132,0,255,.1) 50%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}.magic-bento-button:hover:before{opacity:1}.magic-bento-button:after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,rgba(132,0,255,.3),rgba(168,85,247,.3),rgba(132,0,255,.3));border-radius:inherit;opacity:0;transition:opacity .3s ease;z-index:-1;filter:blur(4px)}.magic-bento-button:hover:after{opacity:.6}.magic-bento-button .particle{position:absolute;width:2px;height:2px;background:#a855f7;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s ease}.magic-bento-button:hover .particle{opacity:1;animation:float 2s ease-in-out infinite}.magic-bento-button .particle:first-child{top:10%;left:10%;animation-delay:0s}.magic-bento-button .particle:nth-child(2){top:20%;right:15%;animation-delay:.2s}.magic-bento-button .particle:nth-child(3){bottom:15%;left:20%;animation-delay:.4s}.magic-bento-button .particle:nth-child(4){bottom:10%;right:10%;animation-delay:.6s}.magic-bento-button .particle:nth-child(5){top:50%;left:5%;animation-delay:.8s}.magic-bento-button .particle:nth-child(6){top:30%;right:5%;animation-delay:1s}@keyframes float{0%,to{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-10px) scale(1.2);opacity:1}}.magic-bento-button .glow-overlay{position:absolute;inset:0;border-radius:inherit;padding:2px;background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),rgba(132,0,255,.4) 0,rgba(132,0,255,.2) 30%,transparent 60%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:subtract;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:0;transition:opacity .3s ease;pointer-events:none}.magic-bento-button:hover .glow-overlay{opacity:1}.magic-bento-button:hover{transform:scale(1.05);box-shadow:0 10px 25px rgba(132,0,255,.3),0 0 50px rgba(132,0,255,.2),inset 0 1px 0 rgba(255,255,255,.1)}.magic-bento-button.secondary:hover{background:rgba(132,0,255,.1);border-color:rgba(132,0,255,.6);box-shadow:0 10px 25px rgba(132,0,255,.2),0 0 30px rgba(132,0,255,.15)}.magic-bento-button.primary:hover{background:linear-gradient(135deg,#7c3aed,#8b5cf6,#a855f7);box-shadow:0 15px 35px rgba(132,0,255,.4),0 0 60px rgba(132,0,255,.3),inset 0 1px 0 rgba(255,255,255,.2)}.magic-nav-link{position:relative;overflow:hidden;transition:all .3s ease}.magic-nav-link:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(132,0,255,.08) 50%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;border-radius:inherit}.magic-nav-link:hover:before{opacity:1}.magic-nav-link:after{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;background:linear-gradient(45deg,rgba(132,0,255,.2),rgba(168,85,247,.2),rgba(132,0,255,.2));border-radius:inherit;opacity:0;transition:opacity .3s ease;z-index:-1;filter:blur(2px)}.magic-nav-link:hover:after{opacity:.4}.magic-nav-glow{background:radial-gradient(circle at 50% 50%,rgba(132,0,255,.15) 0,rgba(132,0,255,.08) 30%,transparent 60%);pointer-events:none}.magic-nav-link:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(132,0,255,.2),0 0 20px rgba(132,0,255,.1)}