.slide-up-enter-active,.slide-up-leave-active{transition:all .25s ease-out}.slide-up-enter-from{opacity:0;transform:translateY(.7rem)}.slide-up-leave-to{opacity:0;transform:translateY(-.7rem)}.cardcontainer:hover{--active:1}.cardcontainer:after{background:radial-gradient(circle at calc(var(--x)*1px) calc(var(--y)*1px),rgba(214,44,237,.142),transparent 15vmin);background-attachment:fixed;opacity:var(--active,0);transition:opacity .2s}.cardcontainer:after,.cardcontainer:before{content:"";inset:0;pointer-events:none;position:absolute}.cardcontainer:before{background:radial-gradient(circle at calc(var(--x)*1px) calc(var(--y)*1px),hsla(0,0%,100%,.5),transparent 15vmin),transparent;background-attachment:fixed;border-radius:6px;-webkit-mask:linear-gradient(rgba(192,132,252,.3),rgba(192,132,252,.3)) 50% 0 /100% 4px no-repeat,linear-gradient(rgba(192,132,252,.3),rgba(192,132,252,.3)) 50% 100% /100% 4px no-repeat,linear-gradient(rgba(192,132,252,.3),rgba(192,132,252,.3)) 0 50% /4px 100% no-repeat,linear-gradient(rgba(192,132,252,.3),rgba(192,132,252,.3)) 100% 50% /4px 100% no-repeat;mask:linear-gradient(rgba(192,132,252,.3),rgba(192,132,252,.3)) 50% 0 /100% 4px no-repeat,linear-gradient(rgba(192,132,252,.3),rgba(192,132,252,.3)) 50% 100% /100% 4px no-repeat,linear-gradient(rgba(192,132,252,.3),rgba(192,132,252,.3)) 0 50% /4px 100% no-repeat,linear-gradient(rgba(192,132,252,.3),rgba(192,132,252,.3)) 100% 50% /4px 100% no-repeat}